Code Monkey home page Code Monkey logo

pdfh5's Introduction

gjTool

Build Status npm version npm downloads

gjTool.js是一个仿jQuery的js类库(PC端和移动端),支持移动端触摸滑动、捏合手势事件,模仿jQuery的链式调用,API用法和jQuery的差不多,相当于简版JQ。 支持extend方法扩展,在gjTool上增加属性、方法。gjTool.fn.extend、gjTool.extend。

gjTool 测试

更新信息

  • v1.2.5

  • 新增touch手势事件 pinch、 pinchin、 pinchout、 pinchstart、 pinchend

  • 修复find方法bug

安装


npm install gjtool

引用方式


import gjTool from "gjtool";  //var gjTool = require("gjtool");
<script type="text/javascript" src="gjtool.js"></script>

使用


对外暴露的全局变量是gjTool、$。

gjTool("#test").hide();//$("#test").hide(500);

API接口方法

API文档地址


选择器:
 
ID选择器、类选择器、标签选择器、通配符、群组选择器、后代选择器、属性选择器、html字符串、eq、first、last、even、odd、lt、le、gt、ge、not
例如:'#nav'、 '.subNav '、'div '、'div.test' 、'.div.abc'  、 'input[type=button]'、
'.div .ul li , #div'、  '.div ul .li'、 '.div ul li:eq(0)'、 '.div ul li:first'、'.div ul li:odd'、 '.div ul li:not(:eq(0))'

遍历:

each、map、find、 eq 、index 、parent、parents、siblings、prev、next、first、last

class操作:

addClass 、removeClass、hasClass、toggleClass

css操作:

css、width、height、offset、scrollTop、scrollLeft

属性操作:

attr、removeAttr、prop、data、val、html、text、empty

DOM操作:

after、before、append、prepend、remove、clone 、appendTo

动画:

animate、stop、show、hide、fadeIn、fadeOut、fadeTo、fadeToggle


事件:

on、off、hover、trigger、还有其他的普通事件,
文档加载完成:gjTool(function(){})、gjTool(document).ready(function(){});
例如:blur focus input load resize scroll unload click dblclick 等

Touch模块:

touch、untouch、touchstart、 touchmove、 touchend、 touchcancel、 press、 tap、 doubletap、 swipe、 swipeleft、 swiperigh、t swipeup、 swipedown、pinch、 pinchin、 pinchout、 pinchstart、 pinchend


ajax异步请求:(gjTool.ajax)

ajax、get、post、getJSON、getXML

常用工具、方法:(gjTool.each(arr,fn))

extend、 each、map、browser、now、getTime、getdate、arrSort、cloneArr、cloneObj、extendArr、objSort、setCookie、getCookie、delCookie、encrypt、decrypt、unique、getVerify

插件:


pdfh5's People

Contributors

dependabot[bot] avatar gjtool avatar qq861366490 avatar realzzz1874 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

pdfh5's Issues

pdf文档,使用Acrobat设置表单域,使用iText5填充表单内容后,中文字符无法预览

pdf文档,使用Acrobat设置表单域,使用iText5填充表单内容后,中文无法预览

pdf文档,有些地方需要动态填充,在需要动态填充的地方使用Acrobat设置表单域后,使用java的iText5进行填充,填充后使用pdfh5预览,英文和数字显示,中文不显示,其他地方预览,都显示

期待的结果

中文也可以正常预览

截屏或录像

1

上图使用pdfh5预览,地址中是中文,不显示
image
上图是在谷歌浏览器直接预览

我使用pdf.js可以预览中文

以下是我测试的前端代码:

` var pdfh5 = new Pdfh5('#demo', {
renderType:"canvas",
pdfurl: "http://192.168.0.101:8080/sign/resource/upload/33302eb1-83e0-4de2-97c9-11c7565d8d27.pdf"

    });`

数字证书的显示问题和小程序的兼容问题

1、svg渲染模式的情况下签名、数字证书都无法显示。
2、小程序显示的时候因为我不是全屏显示,header+main,出现了只显示单页的纸张长度,不能占满,尤其是FDA表格。

creat-react-app项目中引入pdfh5时的警告

描述问题

creat-react-app项目中引入pdfh5时会有警告

./node_modules/pdfh5/js/pdf.js

Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

主要版本

"pdfh5": "^1.2.22",
"react": "^16.12.0",
"react-app-rewired": "^2.1.5",
"react-scripts": "3.3.0"

桌面端环境

  • OS: mac
  • Browser: chrome

onError事件无效

pdfh5.on("start",function(str){ console.log("onStart"); }); pdfh5.on("complete",function(str){ console.log("onComplete"); }); pdfh5.on("error",function(str){ console.log("onError"); }); pdfh5.on("success",function(str){ console.log("onSuccess"); });
onError 和 onSuccess事件是这样写么?
onSuccess可用,onError事件无效(故意把pdf的路径写错)

跨域问题看这里,统一回答

鉴于很多人在留言说跨域的问题,我统一作个回答吧。

  • 一、首先确定跨域这个东西,它是浏览器安全策略,有经验的前端/后端是不会在这里问跨域的。因为解决它,跟前端关系不大,跟pdfh5.js更无关。这个是需要服务端解决的,前端顶多作个配合。这个是基础论调。
  • 二、当你使用这个插件的时候,你不能是file:///协议打开的网页查看pdf(就是本地文件路径方式打开)。这样打开网页,无论你是使用本插件,还是去ajax请求网络接口,都是统一提示你跨域。这个也是浏览器的限制。解决它,你用web服务打开网页就行(就是用http或者https的方式)。使用vscode、webstorm、hbuilder等编辑器可以使用里面的服务打开浏览器,它们都有内置web服务。或者使用tomcat/apache/phpstudy等起一个web服务,再把你的网页文件丢到对应位置,然后在浏览器访问服务地址打开网页。
  • 三、 如果你是用http方式打开的网页,使用本插件打开pdf还是提示跨域,而你们后端已经做了接口跨域的处理。那么,你们后端还需要做一个资源跨域的处理。具体方式请百度。目前我的服务器是apache服务,资源跨域,是修改httpd.conf,找到#LoadModule headers_module modules/mod_headers.so把#注释符去掉,然后在<VirtualHost *:80></VirtualHost>虚拟机
    配置里添加Header set Access-Control-Allow-Origin *。然后在<Directory "/根目录"></Directory>里也添加Header set Access-Control-Allow-Origin *。
    nginx配置资源跨域
    apache配置资源跨域
    tomcat配置资源跨域

pdf水印显示问题

pdf文件本身是有水印的,但是使用插件之后展示在浏览器的pdf不显示水印;
可否显示pdf原文件的水印或者像pdfviewer.js那样自定义水印

android端第一次进入显示的,返回上个一层再进去就不显示了

描述问题

android端第一次进入详情界面,点击档案显示pdf的那个界面(档案界面里面有pdf插件),然后返回上个一层(详情界面),再点击档案再进去就不显示了(空白一片,但日志台上是没问题的);(都是在android的webview中)
但android把webview的这个activity关掉后,在第一次进入就没问题的;

截屏或录像

移动端环境

  • Device: android手机
  • OS: android系统8.0 全部android手机都不行
  • Browser 都在android的webview中
  • Version 1.2.22

请提供其他附加信息帮助我们诊断问题。

pdf加了水印 读不了

描述问题

Uncaught (in promise) TypeError: Cannot read property 'length' of undefined
at n.executeOpTree (pdf.js:9)
at pdf.js:9
pdf 可以单独打开显示正常的

重现步骤

后台返回的pdf加了水印后,报上面的错

期待的结果

请尽量清晰精准地描述你所期待的结果。

截屏或录像

如果可能,请尽量附加截图或录像来描述你遇到的问题。

桌面端环境

  • OS: [e.g. windows, mac, linux]
  • Browser [e.g. chrome, safari]
  • Version [e.g. 22]

移动端环境

  • Device: [e.g. iPhone8]
  • OS: [e.g. iOS12]
  • Browser [e.g. stock browser, safari]
  • Version [e.g. 22]

其他信息

请提供其他附加信息帮助我们诊断问题。

跨域问题

当链接是http的形式,加载pdf文件会出现跨域问题

带有电子签章的pdf文件,签章不显示

我预览那种带有签章的pdf文件,发现签章不显示。然后,我百度搜索预览签章的pdf,很多回答都是说注释掉pdf.worker.js里面的一段代码,就可以了,默认是不显示签章的。

image

然后,我去从你github上clone下来的pdf.worker.js文件找这段代码,发现你的那个文件没有这段代码,我又从官网下载下来最新的这个文件,里面是有这段代码的。你的版本跟官网新版有很大区别,不知能否解决一下。

参数lazy设置为true后,loadingBar:false失效,拖动视图会触发loadingBar消失

描述问题

参数lazy设置为true后,loadingBar:false失效,拖动视图会触发loadingBar消失

重现步骤

请描述如何重现这个问题:

  1. 加载网络pdf 设置为lazy模式
  2. 进入loading 一直在转
  3. 拖动视图会触发loadingBar消失,否则会一直存在

期待的结果

参数lazy设置为true后,加载当前可视图的pdf的loadingBar 消失

pdf只能显示第一页,后续页面一直loading

### 描述问题

在线预览pdf只能显示第一页

重现步骤

请描述如何重现这个问题:

pdf获取总页数为6,但是渲染第一页过后就停止渲染,没有触发complete事件

期待的结果

能正常显示6页数据

截屏或录像

我的js配置如下:
var pdfh5 = new Pdfh5('#handout_wrap_inner', {
pdfurl: '/' + contract,
renderType : 'canvas',
maxZoom : 1,
loadingBar : false,
lazy : true,
cMapUrl : '/js/plugins/pdfjs/cmaps/',
});

浏览器控制台输出如下:
image

桌面端环境

  • OS: [mac]
  • Browser [chrome]

其他信息

请提供其他附加信息帮助我们诊断问题。

发票显示不全问题

图一是pdf原图 ,第二是展示之后的图片,显示不全
qianzhang.pdf
FE7958D003C4D196FD265B78EC24973E

你在什么场景下需要该功能?

请尽量清晰精准地描述你碰到的问题。

描述可能的解决方案

请尽量清晰精准地描述你期待我们要做的,描述你想到的实现方案。

描述你认为的候选方案

请尽量清晰精准地描述你能接受的候选解决方案。

其他信息

请提供关于该功能建议的其他附加信息。

pdf文件里面的表格 安卓显示黑块 IOS无问题 pc无问题

描述问题

展示pdf文件里面的表格 安卓显示黑块 IOS无问题 pc无问题

重现步骤

请描述如何重现这个问题:

直接打开就有此问题

期待的结果

请尽量清晰精准地描述你所期待的结果。

截屏或录像

black
normal

]

桌面端环境

  • OS: [e.g. windows,]
  • Browser [e.g. chrome,]
  • Version [e.g. 22]

移动端环境

  • Device: [e.g. iPhone10,华为, 三星,小米

  • OS: [e.g. iOS12,e.g.andriod9.0,e.g.andriod9.0 ]

  • Browser [e.g. stock browser, safari]

  • Version [e.g. 22]

其他信息

请提供其他附加信息帮助我们诊断问题。

出现 * fs in ./~/pdfh5/js/pdf.js 的报错看这里

image
使用npm install pdfh5方式的时候,有的人会出现以上报错。大体意思pdf.js引用了fs包,但是又没有找到该依赖包。按提示npm install fs也没用,因为去node_modules里找到fs你会发现fs是个空包。
产生这种错误原因具体不知道。因为我创建vue项目的时候并不会出现这个问题。
解决办法:
image
就是去webpack.dev.conf.js去修改node,在里面添加一个fs:"empty"。没有node就添加一个node,在node里添加fs:"empty"。

如果能够识别文档上的网址,打开链接,就更好了 。如果可以,请联系我微信8777817 长沙香樟路

如果可以,请联系我微信8777817 长沙香樟路

你在什么场景下需要该功能?

请尽量清晰精准地描述你碰到的问题。

描述可能的解决方案

请尽量清晰精准地描述你期待我们要做的,描述你想到的实现方案。

描述你认为的候选方案

请尽量清晰精准地描述你能接受的候选解决方案。

其他信息

请提供关于该功能建议的其他附加信息。

跨域

跨域问题怎么解决

参数lazy设置为true后,loadingBar:false失效

描述问题

参数lazy设置为true后,loadingBar:false失效

重现步骤

请描述如何重现这个问题:
参数lazy设置为true后,loadingBar:false失效

期待的结果

不出现顶部进度条

截屏或录像

pdf文件中二维码显示模糊

我的pdf文件中有个二维码,文字都能正常显示,二维码显示模糊,代码我仅使用了初始化代码
var pdfh5 = new Pdfh5('.pdfjs', { pdfurl: 'http://cheetah.nat300.top/pdf/123.pdf' });

加载本地pdf报错

pdf.js:9 Fetch API cannot load file:///Users/11/Downloads/pdfh5-master/default.pdf. URL scheme must be "http" or "https" for CORS request.
e @ pdf.js:9

jquery版本太低

当前用的jquery版本太低了,如果等保验证的话通不过。

替换官方的pdfjs库加载pdf失败

替换官方的pdfjs库加载pdf失败,是不是改动过pdf.js和pdf.worker.js
大概改动了哪些地方?
我看pdf.worker.js的大小相差有点大,我用的版本是1.1.159(1.23M),不知道你用的是哪个版本?

然后就是放大缩小卡顿的问题
我改用了android的webview去实现放大缩小功能,相对改善挺明显,具体代码如下:
H5

<head>
	<meta charset="UTF-8">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="format-detection" content="telephone=no" />
        <!-- 开启可伸缩 -->
	<!--<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">-->
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=2.5,user-scalable=yes"/>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<title>PDFH5</title>
	<link rel="stylesheet" href="css/style.css" />
	<link rel="stylesheet" href="css/pdfh5.css" />
	<style>
		.pdfContent {
			width: 100%;
			height: 100%;
			overflow: hidden;
			background: #fff;
			position: relative;
		}
	</style>
</head>

JS

// 254行,设置加载pdf比例大小
var viewport = page.getViewport(2.5);

Android WebView

WebSettings webSettings = mWebView.getSettings();
 webSettings.setAllowFileAccess(true);
 webSettings.setAllowFileAccessFromFileURLs(true);
  webSettings.setAllowUniversalAccessFromFileURLs(true);
   // 支持JS
  webSettings.setJavaScriptEnabled(true);
  // 设置可以支持缩放
  webSettings.setSupportZoom(true);
  //初始化缩放工具
  webSettings.setBuiltInZoomControls(true);
  // 设置不出现缩放工具
  webSettings.setDisplayZoomControls(false);

屏幕旋转后,比例会变形

1、当屏幕旋转后,长宽比例会发生变化,导致变形,有什么解决办法吗。
2、还有一个问题,pdfh5.js源码中:部分方法中的flag并没有定义(可能是笔误):if (arr && arr instanceof Array) { for (var i = 0; i < arr.length; i++) { arr[i] && arr[i].call(this, flag) } }

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.