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

html预览pdf文件需要依赖pdf.js 移动端适配需要pdfh5.js 记录移动端适配pdfh5.js的用发
在线预览： https://www.gjtool.cn/pdfh5/pdf.html?file=https://www.gjtool.cn/pdfh5/git.pdf

引入css
创建div
依次引入js（需引用本项目的js,不要引用官方的pdf.js,jquery可以引用其它版的）

实例化：

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

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

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

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加载最大页数

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 }); } });

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方法监听所有事件

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的用发
【html页面预览pdf文件使用插件pdfh5.js】在线预览： https://www.gjtool.cn/pdfh5/pdf.html?file=https://www.gjtool.cn/pdfh5/git.pdf

引入css
创建div
依次引入js（需引用本项目的js,不要引用官方的pdf.js,jquery可以引用其它版的）

实例化：