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

本文转载自查看原文 2022-02-22 14:56 3400 前端坑

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

移动端适配需要pdfh5.js

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

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

引入css
<link rel="stylesheet" href="css/pdfh5.css" />
创建div
<div id="demo"></div>
依次引入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>

实例化：

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

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

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

options配置项参数列表

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

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

参数名称	类型	取值	作用
pdfurl		-	pdf地址
URIenable		true、false，默认false	true开启地址栏file参数
data	{String(blob)	-	pdf文件流，与pdfurl二选一
renderType		"canvas"、"svg"，默认"canvas"	pdf渲染模式
lazy		true、false，	默认false
maxZoom		默认3	手势缩放最大倍数
scrollEnable		true、false，默认true	是否允许pdf滚动
zoomEnable		true、false，默认true	是否允许pdf手势缩放
cMapUrl		默认"https://www.gjtool.cn/cmaps/"	解析pdf时，特殊情况下显示完整字体的cmaps文件夹路径，例如 cMapUrl:"https://unpkg.com/
limit		默认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	true、false，默认true	是否允许pdf滚动(需要在pdf加载完成后使用)
zoomEnable	true、false，默认true	是否允许pdf手势缩放(需要在pdf加载完成后使用)
show	带一个回调函数参数	pdfh5显示
hide	带一个回调函数参数	pdfh5隐藏
reset	带一个回调函数参数	pdfh5还原
destroy	带一个回调函数参数	pdfh5销毁
on	String：监听的事件名，Function：监听的事件回调	on方法监听所有事件

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

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

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

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

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

移动端适配需要pdfh5.js

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

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

引入css
<link rel="stylesheet" href="css/pdfh5.css" />
创建div
<div id="demo"></div>
依次引入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>

实例化：

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

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

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

options配置项参数列表

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

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

参数名称	类型	取值	作用
pdfurl		-	pdf地址
URIenable		true、false，默认false	true开启地址栏file参数
data	{String(blob)	-	pdf文件流，与pdfurl二选一
renderType		"canvas"、"svg"，默认"canvas"	pdf渲染模式
lazy		true、false，	默认false
maxZoom		默认3	手势缩放最大倍数
scrollEnable		true、false，默认true	是否允许pdf滚动
zoomEnable		true、false，默认true	是否允许pdf手势缩放
cMapUrl		默认"https://www.gjtool.cn/cmaps/"	解析pdf时，特殊情况下显示完整字体的cmaps文件夹路径，例如 cMapUrl:"https://unpkg.com/
limit		默认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	true、false，默认true	是否允许pdf滚动(需要在pdf加载完成后使用)
zoomEnable	true、false，默认true	是否允许pdf手势缩放(需要在pdf加载完成后使用)
show	带一个回调函数参数	pdfh5显示
hide	带一个回调函数参数	pdfh5隐藏
reset	带一个回调函数参数	pdfh5还原
destroy	带一个回调函数参数	pdfh5销毁
on	String：监听的事件名，Function：监听的事件回调	on方法监听所有事件

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

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

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

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

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 js+html预览PDF Jquery Media插件使用，解决在线预览及打开PDF文件 vue文件流转换成pdf预览(pdf.js+iframe)&&使用vue-pdf实现pdf预览使用PDF.JS实现pdf文件在线预览时，报文件被损坏的错误 uni-app PDF预览插件如何展示本地PDF文件 spring boot + pdf.js 实现pdf文件预览 fis3+vue+pdf.js制作预览PDF文件或其他【转】前端预览 PDF 文件（使用PDFJS） vue中使用 vue-pdf 实现PDF文件预览 nuxt使用pdfjs-dist插件实现pdf预览