移动端PDF预览

·  阅读 2501

移动端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就是用iframe src指向pdf链接的方式来实现的pdf预览

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);
});
复制代码

一次性加载pdf所有页面,菊花也要转半天,单页加载速度会快很多,不过总的体验比iframe会好很多

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>
复制代码

看下效果,除了速度慢点,其他还是很完美的。

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改