移动端pdf插件(展示预览打开pdf)-pdfh5.js

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/fade999/article/details/81327679

移动端pdf插件 预览pdf 展示pdf 在线打开pdf-pdfh5.js

本插件基于pdf.js和jQuery,可手势捏合缩放。

2018.12.20更新:新增部分api。配置项增加scrollEnable:false不允许pdf滚动,true允许pdf滚动。新增方法pdfh5.scrollEnable(true)允许pdf滚动,pdfh5.scrollEnable(false)不允许pdf滚动。新增on方法,监听各种事件,内部this指向pdfh5对象。

2018.12.04更新:解决部分pdf字体显示不全,合同、公文等pdf末尾红色印章无法显示问题。必须下载我提供的pdf.js和pdf.worker.js。GitHub上偶尔会更新完善bug、功能,后续会放出api文档。以及做成npm包引用(时间待定,暂不支持)。

需要引用:

  1. pdf.js 下载大小:283kb
  2. pdf.worker.js 下载大小:708kb
  3. jquery-1.11.3.min.js 下载大小:94kb
  4. pdfh5.js 下载大小:41kb
  5. pdfh5.css 下载大小:1kb

 然后实例化就可以了。

new Pdfh5(selector,options) 

options可以不填:new Pdfh5(selector),不设置pdf路径,会默认拿地址栏的?file=后面的pdf路径

例如:http://www.gjtool.cn/pdfh5/pdf.html?file=http://xxx.xxx.xxx/xxx.pdf

var pdfh5 = new Pdfh5('.pdfjs', {
        pdfurl: 'default.pdf'
    });

 

例子:

html代码:

<!DOCTYPE html>
<html>

<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 http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<title>PDFH5</title>
	<link type="image/x-icon" rel="shortcut icon" href="images/logo.jpg">
	<link rel="stylesheet" href="css/style.css" />
	<link rel="stylesheet" href="css/pdfh5.css" />
	<style>
		.pdfjs {
			width: 100%;
			height: 50%;
			overflow: hidden;
			background: #fff;
			position: relative;
		}
		.pdfjs2 {
			width: 100%;
			height: 50%;
			overflow: hidden;
			background: #fff;
			position: relative;
		}
	</style>
</head>

<body>
	<div class="pdfjs"></div>
	<div class="pdfjs2"></div>
	<script src="js/pdf.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/pdf.worker.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/pdfh5.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var url = "http://118.89.56.33:8999/pdfh5/default.pdf"
		// var url = 'default.pdf';
		var pdfh5 = new Pdfh5('.pdfjs', {
			pdfurl: url
		});
		//监听当前加载的pdf页数,currentPageDom当前加载的pdf的dom,currentNum当前加载的pdf页数,
		pdfh5.on("renderPages",function(currentPageDom){
			console.log(this.currentNum)
			console.log(pdfh5.currentNum)
		})
		// var pdfh52 = new Pdfh5('.pdfjs2',{
		// 	pdfurl: 'test.pdf'
		// });
		//pdfh5.zoomChange pdfh5.renderPages pdfh5.renderEnd pdfh5.scroll pdfh5.show pdfh5.hide
		//pdfh5还有pdfh5开始初始化、pdfh5加载完成、PDF加载失败、PDF加载成功事件:   pdfh5.start pdfh5.complete pdfh5.error pdfh5.success 
		//pdfh5还有还原事件、销毁事件(附带回调函数):   pdfh5.reset pdfh5.destroy 
		//pdfh5还有静态参数: 
		//pdf最外层div pdfh5.container
		//pdf第二层div pdfh5.viewerContainer
		//所有包裹pdf的div的父div pdfh5.viewer
		//所有包裹pdf的div pdfh5.pages
		//pdf加载完成状态 pdfh5.pdfLoaded
		//pdf总页数 pdfh5.totalNum
		//pdf当前页数 pdfh5.currentNum
		//pdfh5初始化的时间戳 pdfh5.initTime
		//pdfh5开始渲染距离初始化多少毫秒 pdfh5.startTime
		//pdfh5渲染完毕距离初始化多少毫秒  pdfh5.endTime
		//pdfh5渲染过程中时间戳   pdfh5.renderTime
		//pdfh5支持在线预览 http://www.gjtool.cn/pdfh5/pdf.html?file=http://xxx.xxx.xxx/xxx.pdf
//新增配置参数scrollEnable:false不允许pdf滚动,true允许pdf滚动
//		var pdfh5 = new Pdfh5('.pdfjs', {
// 			scrollEnable:false,//是否允许pdf滚动
// 			pdfurl: url
// 		});
//新增方法pdfh5.scrollEnable(true)允许pdf滚动,pdfh5.scrollEnable(false)不允许pdf滚动
//新增on方法,监听各种事件
// 		pdfh5.on("start",function(str){
// 			console.log(str)
// 		})
// 		pdfh5.on("complete",function(str){
// 			pdfh5.scrollEnable(true)
// 		})
	</script>
</body>

</html>

github地址https://github.com/gjTool/pdfh5

示例地址1http://www.gjtool.cn/pdfh5/

示例地址2http://118.89.56.33:8999/pdfh5/index.html

如果需要在线预览,那就把github上的项目下载,部署到自己的服务器上。

也可以用下面的两个地址在线预览,修改?file=后面的地址即可:

http://www.gjtool.cn/pdfh5/pdf.html?file=http://www.gjtool.cn/pdfh5/test.pdf

http://118.89.56.33:8999/pdfh5/pdf.html?file=http://118.89.56.33:8999/pdfh5/test.pdf

在地址栏最后添加?file="PDF文件的地址"

示例用法:

http://www.gjtool.cn/pdfh5/pdf.html?file=http://xxx.xxx.xxx/xxx.pdf

 

有问题BUG,请去GitHub上提Issue。https://github.com/gjTool/pdfh5/issues

如果觉得插件还可以,就请点个星星吧,也可以Fork一下,以后有空我会更新api文档,完善插件功能

 

展开阅读全文

没有更多推荐了,返回首页