PC端与手机端h5页面pdf展示 pdfh5.js 与 pdf.js
PC端与手机端h5页面pdf展示 pdfh5.js 与 pdf.js
·
PC端与手机端h5页面pdf展示
我们web经常会遇到对于pdf文件的展示，对于PC端我们可以直接通过浏览器打开pdf进行预览。但是对于手机端，我们的h5页面中连接的pdf文件在安卓上会跳转到下载，在IOS上会直接打开。对于这种需要兼容pc端与手机端的展示我们可以使用pdf.js来做。
解决方案：
1，pdf.js
2，pdfh5.js
下面的pdfh5.js是对上面pdf.js的封装，pdf.js对于2.0.xx版本与2.1.xx版本的使用有些许区别。pdfh5.js的使用起来更加简单。
我这里是传统开发模式，没有使用npm进行安装。
pdfh5.js 使用
原pdfh5.js博客：https://www.gjtool.cn/archives/pdfh5
pdfh5.js 使用步骤：
1，引入css
<link rel="stylesheet" href="css/pdfh5.css" />
2，引入js
<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-2.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/pdfh5.js" type="text/javascript" charset="utf-8"></script>
3，创建div
<div id="demo" ></div>
4，实例化
var pdfh5 = new Pdfh5('#demo', {
pdfurl: "./default.pdf"
});
5，其他方法
// $.ajax({
// url: "页面崩溃PDF(1).pdf", //假设这是pdf文件流的请求接口
// type: "get",
// mimeType: 'text/plain; charset=x-user-defined', //jq ajax请求文件流的方式
// // dataType: 'arraybuffer',
// success: function(data) {
// pdfh5 = new Pdfh5('#demo', {
// data: data,
// });
// pdfh5.on("success", function(time) {
// time = time / 1000
// console.log("pdf渲染完成，总耗时" + time + "秒");
// //滚动到第3页
// // pdfh5.goto(3);
// this.download("2222",function(){
// console.log(11111)
// })
// })
// }
// });
// axios.get("https://www.gjtool.cn/pdfh5/git.pdf", {
// responseType: "arraybuffer"
// }).then(res => {
// pdfh5 = new Pdfh5('#demo', {
// data: res.data
// });
// pdfh5.on("success", function(time) {
// time = time / 1000
// console.log("pdf渲染完成，总耗时" + time + "秒");
// //滚动到第3页
// // pdfh5.goto(3);
// this.download()
// })
// })
pdfh5 = new Pdfh5('#demo', {
pdfurl: "test.pdf",
URIenable:true,
goto: 0,
// scrollEnable: false // 是否允许pdf滚动
zoomEnable: false, // 是否允许pdf手势缩放
// limit: 3
});
// //监听pdf渲染成功
// pdfh5.on("success", function(time) {
// time = time / 1000
// console.log("pdf渲染完成，总耗时" + time + "秒");
// //滚动到第3页
// // pdfh5.goto(3);
// this.download("xxxx",function(){
// console.log(11111)
// })
// })
// pdfh5.on("zoom", function(scale) {
// console.log(scale)
// })
// new Pdfh5('#demo2', {
// pdfurl: "222.pdf"
// });
// new Pdfh5('#demo3', {
// pdfurl: "git.pdf"
// });
// setTimeout(() => {
// var pdfh5 = new Pdfh5('#demo', {
// pdfurl: "https://www.gjtool.cn/pdfh5/git.pdf"
// });
// setTimeout(() => {
// var pdfh5 = new Pdfh5('#demo', {
// pdfurl: "1.pdf"
// });
// setTimeout(() => {
// var pdfh5 = new Pdfh5('#demo', {
// pdfurl: "test.pdf"
// });
// pdfh5.on("complete", function (status, msg, time) {
// console.log("状态：" + status + "，信息：" + msg + "，耗时：" + time + "毫秒，总页数：" + this.totalNum)
// })
// }, 5000);
// }, 5000);
// }, 5000);
//配置项参数 renderType:"svg" 渲染模式为svg，默认canvas
// var pdfh5 = new Pdfh5('#demo', {
// pdfurl: "./default.pdf",
// renderType:"svg"
// });
//配置项参数 lazy:true 开启懒加载，默认是false,不开启懒加载
// var pdfh5 = new Pdfh5('#demo', {
// pdfurl: "./default.pdf",
// lazy:true
// });
//配置项参数 URIenable:true 开启获取地址栏file参数，获取地址栏pdf路径?file=xxx.pdf，默认false不开启
// var pdfh5 = new Pdfh5('#demo', {
// URIenable:false,
// pdfurl: "./default.pdf"
// });
//配置项参数 是否显示小部件 顶部绿色加载进度条loadingBar 左上角页码显示pageNum 右下角回到顶部按钮backTop 默认显示
// var pdfh5 = new Pdfh5('#demo', {
// loadingBar: false,
// pageNum:false,
// backTop:false
// });
//配置项参数data，文件流形式传入 pdfurl和data二选一
// var pdfh5 = new Pdfh5('#demo', {
// data: data
// });
//配置项参数scrollEnable:false不允许pdf滚动,true允许pdf滚动 默认允许
// var pdfh5 = new Pdfh5('#demo', {
// scrollEnable:false,//是否允许pdf滚动
// pdfurl: url
// });
//pdfh5.scrollEnable(true)允许pdf滚动,pdfh5.scrollEnable(false)不允许pdf滚动
//配置项参数zoomEnable:false不允许pdf手势缩放,true允许pdf手势缩放 默认允许
// var pdfh5 = new Pdfh5('#demo', {
// zoomEnable:false,//是否允许pdf手势缩放
// pdfurl: url
// });
//pdfh5.zoomEnable(true)允许pdf手势缩放，pdfh5.zoomEnable(false)不允许pdf手势缩放
//pdfh5还原、销毁（附带回调函数）： pdfh5.reset pdfh5.destroy
//pdfh5显示、隐藏（附带回调函数）： pdfh5.show pdfh5.hide
//pdf准备开始渲染，此时可以拿到pdf总页数
// pdfh5.on("ready", function() {
// console.log("pdf准备开始渲染，总页数：" + this.totalNum)
// })
//监听pdf渲染失败
// pdfh5.on("error", function (time) {
// console.log("渲染失败，总耗时" + time + "毫秒")
// })
//监听完成事件，加载失败、渲染成功都会触发
// pdfh5.on("complete", function(status, msg, time) {
// console.log("状态：" + status + "，总耗时：" + time + "毫秒，总页数：" + this.totalNum, msg)
// })
//监听渲染中事件
// pdfh5.on("render", function(currentNum, time, currentPageDom) {
// // currentPageDom.append("<span class='name-logo'>张三</span>")
// console.log("当前页码：" + currentNum)
// })
//on方法,监听事件： 开始初始化 init 准备渲染pdf ready 加载完成 complete 加载失败 error 加载成功 success 渲染pdf中 render
// 缩放zoom 滚动scroll 显示show 隐藏hide 还原reset 销毁destroy 允许缩放zoomEnable 允许滚动scrollEnable
//pdfh5支持在线预览
//http://www.gjtool.cn/pdfh5/pdf.html?file=http://www.gjtool.cn/pdfh5/default.pdf
所需的js 与 css在 资源下载
pdf.js 2.13.216版本的使用
原pdf.js官网：http://mozilla.github.io/pdf.js/
pdf.js参考博文 https://www.jb51.net/html5/771927.html
从官网上下载的pdf.js：
从官网上下载的文件有两个文件夹，分别对应着两种使用方式：
1，build文件夹的使用方式是h5页面，使用的是canvas来进行将pdf文件绘制出来，一页一图的绘制。
<script type='text/javascript' src='./build/pdf.js'></script>
<div id="canvas"></div>
pdfjsLib.GlobalWorkerOptions.workerSrc = './build/pdf.worker.js';
var url = './111.pdf';
loadPDF(url); // 渲染页面
//读取pdf文件，并加载到页面中
function loadPDF(fileURL) {
pdfjsLib.getDocument(fileURL).then(function (pdf) {
//用 promise 获取页面
var id = '';
var idTemplate = 'cw-pdf-';
var pageNum = pdf.numPages;
//根据页码创建画布
createSeriesCanvas(pageNum, idTemplate);
//将pdf渲染到画布上去
for (var i = 1; i <= pageNum; i++) {
id = idTemplate + i;
renderPDF(pdf, i, id);
}
});
}
function createPdfContainer(id, className) {
var pdfContainer = document.getElementById('canvas');
var canvasNew = document.createElement('canvas');
canvasNew.id = id;
canvasNew.className = className;
pdfContainer.appendChild(canvasNew);
};
//渲染pdf
//建议给定pdf宽度
function renderPDF(pdf, i, id) {
pdf.getPage(i).then(function (page) {
var scale = 0.5;
var viewport = page.getViewport(scale);
//
// 准备用于渲染的 canvas 元素
//
var canvas = document.getElementById(id);
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = document.documentElement.clientWidth;
//
// 将 PDF 页面渲染到 canvas 上下文中
//
var renderContext = {
canvasContext: context,
viewport: viewport,
enableWebGL: false,
renderInteractiveForms: false
};
page.render(renderContext);
});
};
//创建和pdf页数等同的canvas数
function createSeriesCanvas(num, template) {
var id = '';
for (var j = 1; j <= num; j++) {
id = template + j;
createPdfContainer(id, 'pdfClass');
}
}
上述代码渲染出来的pdf在手机端和PC端的都显示的比较模糊，几乎不存在可用性，网上也有关于显示模糊的处理方案。这里我没有实践过就不多写了。
2，web文件夹使用的方式是将web文件夹放置到服务器上，然后通过viewer.html?file=123.pdf进行访问或者viewer.html?file=123.action直接使用后台输出的pdf流来使用。具体的网上资料可以自行参考。
所需资源下载：资源下载
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
0
1- 0
已为社区贡献2条内容
所有评论(0)