html页面预览pdf文件使用插件pdfh5.js

html预览pdf文件需要依赖pdf.js

移动端适配需要pdfh5.js

记录移动端适配pdfh5.js的用发

---

在线预览： https://www.gjtool.cn/pdfh5/pdf.html?file=https://www.gjtool.cn/pdfh5/git.pdf

---

1. 引入css
   
   <link rel="stylesheet" href="css/pdfh5.css" />
2. 创建div
   
   <div id="demo"></div>
3. 依次引入js（需引用本项目的js,不要引用官方的pdf.js,jquery可以引用其它版的）

<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>

1. 实例化：

var pdfh5 = new Pdfh5('#demo', {
  pdfurl: "./default.pdf"
});

1. 实例化参数 var pdfh5 = new Pdfh5(selector, options);

参数名称	类型	取值	是否必须	作用
selector	{String}	-	√	pdfh5的容器选择器
options	{Object}	-	×	pdfh5的配置项参数

1. options配置项参数列表

• 示例： 配置项参数 lazy:true 开启懒加载，默认是false,不开启懒加载

var pdfh5 = new Pdfh5('#demo', {
  pdfurl: "./default.pdf",
  lazy:true
});

参数名称	类型	取值	作用
pdfurl	{String}	-	pdf地址
URIenable	{Boolean}	true、false，默认false	true开启地址栏file参数
data	{String(blob)	-	pdf文件流 ，与pdfurl二选一
renderType	{String}	"canvas"、"svg"，默认"canvas"	pdf渲染模式
lazy	{Boolean}	true、false，	默认false
maxZoom	{Number}	默认3	手势缩放最大倍数
scrollEnable	{Boolean}	true、false， 默认true	是否允许pdf滚动
zoomEnable	{Boolean}	true、false， 默认true	是否允许pdf手势缩放
cMapUrl	{String}	默认"https://www.gjtool.cn/cmaps/"	解析pdf时，特殊情况下显示完整字体的cmaps文件夹路径，例如 cMapUrl:"https://unpkg.com/
limit	{Number}	默认0	限制pdf加载最大页数

1. pdf文件流请求示例（以jq ajax为例）

$.ajax({
  url: "https://gjtool.cn/pdfh5/git.pdf", //假设这是pdf文件流的请求接口
  type: "get",
  mimeType: 'text/plain; charset=x-user-defined',//jq ajax请求文件流的方式
  success: function (data) {
  	var pdfh5 = new Pdfh5('#demo', {
  		data: data
  	});
  }
});

$.ajax({
	url: "https://gjtool.cn/pdfh5/git.pdf", //假设这是pdf文件流的请求接口
	type: "get",
	mimeType: 'text/plain; charset=x-user-defined',//jq ajax请求文件流的方式
	success: function (data) {
		var rawLength = data.length;
		var array = new Uint8Array(new ArrayBuffer(rawLength));
		for (i = 0; i < rawLength; i++) {
		    array[i] = data.charCodeAt(i) & 0xff;
		}
		var pdfh5 = new Pdfh5('#demo', {
			data: array
		});
	}
});

$.ajax({
	url: "https://gjtool.cn/pdfh5/git.pdf", //假设这是pdf文件流的请求接口
	type: "get",
	mimeType: 'text/plain; charset=x-user-defined',//jq ajax请求文件流的方式
	success: function (data) {
		var rawLength = data.length;
		var array = [];
		for (i = 0; i < rawLength; i++) {
		    array.push(data.charCodeAt(i) & 0xff);
		}
		var pdfh5 = new Pdfh5('#demo', {
			data: array
		});
	}
});

1. methods 方法列表

• 实例 是否允许pdf滚动

pdfh5.scrollEnable(true) //允许pdf滚动
pdfh5.scrollEnable(false) //不允许pdf滚动

参数名称	类型	取值	作用
scrollEnable	{Boolean}	true、false， 默认true	是否允许pdf滚动(需要在pdf加载完成后使用)
zoomEnable	{Boolean}	true、false， 默认true	是否允许pdf手势缩放(需要在pdf加载完成后使用)
show	{Function}	带一个回调函数参数	pdfh5显示
hide	{Function}	带一个回调函数参数	pdfh5隐藏
reset	{Function}	带一个回调函数参数	pdfh5还原
destroy	{Function}	带一个回调函数参数	pdfh5销毁
on	{String, Function}	String：监听的事件名，Function：监听的事件回调	on方法监听所有事件

1. on方法监听所有事件-事件名列表

• 示例： 监听pdf准备开始渲染，此时可以拿到pdf总页数

pdfh5.on("ready", function () {
	console.log("总页数：" + this.totalNum)
})

参数名称	回调	作用
init	{Function}	监听pdfh5开始初始化
ready	{Function}	监听pdf准备开始渲染，此时可以拿到pdf总页数
error	{Function(msg,time))}	监听加载失败，msg信息，time耗时
success	{Function(msg,time))}	监听pdf渲染成功，msg信息，time耗时
complete	{Function(status, msg, time)}	监听pdf加载完成事件，加载失败、渲染成功都会触发。status有两种状态success和error
render	{Function(currentNum, time, currentPageDom)}	监听pdf渲染过程，currentPageDom当前加载的pdf的dom,currentNum当前加载的pdf页数,
zoom	{Function(scale)}	监听pdf缩放，scale缩放比例
scroll	{Function(scrollTop)}	监听pdf滚动，scrollTop滚动条高度
backTop	{Function}	监听回到顶部按钮的点击事件回调
zoomEnable	{Function(flag)}	监听允许缩放，flag：true，false
scrollEnable	{Function(flag)}	监听允许滚动，flag：true，false
show	{Function}	监听pdfh5显示
hide	{Function}	监听pdfh5隐藏
reset	{Function}	监听pdfh5还原
destroy	{Function}	监听pdfh5销毁

html预览pdf文件需要依赖pdf.js

移动端适配需要pdfh5.js

记录移动端适配pdfh5.js的用发

---

在线预览： https://www.gjtool.cn/pdfh5/pdf.html?file=https://www.gjtool.cn/pdfh5/git.pdf

---

1. 引入css
   
   <link rel="stylesheet" href="css/pdfh5.css" />
2. 创建div
   
   <div id="demo"></div>
3. 依次引入js（需引用本项目的js,不要引用官方的pdf.js,jquery可以引用其它版的）

<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>

1. 实例化：

var pdfh5 = new Pdfh5('#demo', {
  pdfurl: "./default.pdf"
});

1. 实例化参数 var pdfh5 = new Pdfh5(selector, options);

参数名称	类型	取值	是否必须	作用
selector	{String}	-	√	pdfh5的容器选择器
options	{Object}	-	×	pdfh5的配置项参数

1. options配置项参数列表

• 示例： 配置项参数 lazy:true 开启懒加载，默认是false,不开启懒加载

var pdfh5 = new Pdfh5('#demo', {
  pdfurl: "./default.pdf",
  lazy:true
});

参数名称	类型	取值	作用
pdfurl	{String}	-	pdf地址
URIenable	{Boolean}	true、false，默认false	true开启地址栏file参数
data	{String(blob)	-	pdf文件流 ，与pdfurl二选一
renderType	{String}	"canvas"、"svg"，默认"canvas"	pdf渲染模式
lazy	{Boolean}	true、false，	默认false
maxZoom	{Number}	默认3	手势缩放最大倍数
scrollEnable	{Boolean}	true、false， 默认true	是否允许pdf滚动
zoomEnable	{Boolean}	true、false， 默认true	是否允许pdf手势缩放
cMapUrl	{String}	默认"https://www.gjtool.cn/cmaps/"	解析pdf时，特殊情况下显示完整字体的cmaps文件夹路径，例如 cMapUrl:"https://unpkg.com/
limit	{Number}	默认0	限制pdf加载最大页数

1. pdf文件流请求示例（以jq ajax为例）

$.ajax({
  url: "https://gjtool.cn/pdfh5/git.pdf", //假设这是pdf文件流的请求接口
  type: "get",
  mimeType: 'text/plain; charset=x-user-defined',//jq ajax请求文件流的方式
  success: function (data) {
  	var pdfh5 = new Pdfh5('#demo', {
  		data: data
  	});
  }
});

$.ajax({
	url: "https://gjtool.cn/pdfh5/git.pdf", //假设这是pdf文件流的请求接口
	type: "get",
	mimeType: 'text/plain; charset=x-user-defined',//jq ajax请求文件流的方式
	success: function (data) {
		var rawLength = data.length;
		var array = new Uint8Array(new ArrayBuffer(rawLength));
		for (i = 0; i < rawLength; i++) {
		    array[i] = data.charCodeAt(i) & 0xff;
		}
		var pdfh5 = new Pdfh5('#demo', {
			data: array
		});
	}
});

$.ajax({
	url: "https://gjtool.cn/pdfh5/git.pdf", //假设这是pdf文件流的请求接口
	type: "get",
	mimeType: 'text/plain; charset=x-user-defined',//jq ajax请求文件流的方式
	success: function (data) {
		var rawLength = data.length;
		var array = [];
		for (i = 0; i < rawLength; i++) {
		    array.push(data.charCodeAt(i) & 0xff);
		}
		var pdfh5 = new Pdfh5('#demo', {
			data: array
		});
	}
});

1. methods 方法列表

• 实例 是否允许pdf滚动

pdfh5.scrollEnable(true) //允许pdf滚动
pdfh5.scrollEnable(false) //不允许pdf滚动

参数名称	类型	取值	作用
scrollEnable	{Boolean}	true、false， 默认true	是否允许pdf滚动(需要在pdf加载完成后使用)
zoomEnable	{Boolean}	true、false， 默认true	是否允许pdf手势缩放(需要在pdf加载完成后使用)
show	{Function}	带一个回调函数参数	pdfh5显示
hide	{Function}	带一个回调函数参数	pdfh5隐藏
reset	{Function}	带一个回调函数参数	pdfh5还原
destroy	{Function}	带一个回调函数参数	pdfh5销毁
on	{String, Function}	String：监听的事件名，Function：监听的事件回调	on方法监听所有事件

1. on方法监听所有事件-事件名列表

• 示例： 监听pdf准备开始渲染，此时可以拿到pdf总页数

pdfh5.on("ready", function () {
	console.log("总页数：" + this.totalNum)
})

参数名称	回调	作用
init	{Function}	监听pdfh5开始初始化
ready	{Function}	监听pdf准备开始渲染，此时可以拿到pdf总页数
error	{Function(msg,time))}	监听加载失败，msg信息，time耗时
success	{Function(msg,time))}	监听pdf渲染成功，msg信息，time耗时
complete	{Function(status, msg, time)}	监听pdf加载完成事件，加载失败、渲染成功都会触发。status有两种状态success和error
render	{Function(currentNum, time, currentPageDom)}	监听pdf渲染过程，currentPageDom当前加载的pdf的dom,currentNum当前加载的pdf页数,
zoom	{Function(scale)}	监听pdf缩放，scale缩放比例
scroll	{Function(scrollTop)}	监听pdf滚动，scrollTop滚动条高度
backTop	{Function}	监听回到顶部按钮的点击事件回调
zoomEnable	{Function(flag)}	监听允许缩放，flag：true，false
scrollEnable	{Function(flag)}	监听允许滚动，flag：true，false
show	{Function}	监听pdfh5显示
hide	{Function}	监听pdfh5隐藏
reset	{Function}	监听pdfh5还原
destroy	{Function}	监听pdfh5销毁
------------恢复内容结束------------