移动端PDF预览的几种方式
jquery.media.js
不兼容移动端
<script type="text/javascript" src="http://172.16.130.57:3000/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="http://172.16.130.57:3000/jquery.media.js"></script>
$('#media').media({ width: '100%', height: '1000px' });
<!--模版-->
<a id="media" href="http://172.16.130.57:3000/guice.pdf">PDF File</a>
复制代码jquery.media.js预览的模版结构如下图：
然后再看下jquery.media.js的源代码
jquery.media.js预览存在的问题
jquery.media.js预览不支持移动端，没有对iframe对适配以及兼容
- iframe里面的pdf内容会超出iframe的显示区域，导致部分内容看不到
- iframe的高度需要实时根据pdf的页数计算，不然滚动会有问题
基于以上两点，基本juery.media.js已弃用，下面快速看一下podfobject的实现，因为这个也是弃用的
pdfobject
<!--模版-->
<div id="example1"></div>
window.PDFObject.embed("./guice.pdf", "#example1")
复制代码这是移动端的效果图，可以看出体验很差，所以也弃用
pdf.js
下面介绍下最优解
import PDFJS from 'pdfjs-dist'
let loadingTask = PDFJS.getDocument('/guice.pdf');
loadingTask.promise.then(function (pdf) {
console.log(pdf);
var pageNumber = 1;
pdf.getPage(pageNumber).then(function (page) {
console.log('Page loaded');
var scale = 1;
var viewport = page.getViewport({ scale: scale });
var canvas = document.getElementById('mycanvas');
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
var renderTask = page.render(renderContext);
renderTask.promise.then(function () {
console.log('Page rendered');
});
});
}, function (reason) {
console.error(reason);
});
复制代码pdfh5
pdfh5是基于pdfjs的一个更方便的插件，但是有个缺陷是：因为pdf是一次性加载的，所以速度会稍微慢点
具体实现如下：
import Pdfh5 from "pdfh5";
this.pdfh5 = new Pdfh5("#demo", {
pdfurl: "/guice.pdf"
});
//监听完成事件
this.pdfh5.on("complete", function (status, msg, time) {
console.log("状态：" + status + "，信息：" + msg + "，耗时：" + time + "毫秒，总页数：" + this.totalNum)
})
<!--模版-->
<div id="demo"></div>
复制代码看下效果，除了速度慢点，其他还是很完美的。
