前些天，公司的一个移动端项目中，有个这样的需求，点击按钮，请求后台获取PDF地址，实现PDF预览，需要放大缩小翻页功能。因为之前没做过，在百度谷歌乱搜一通，有用标签iframe、embed、object的，也有用PDFObject的，还有用PDF.js的。前者用标签的方法我一一试过，没成功，特别是结合vue开发。后者经过尝试，我优先用了在PDF.js的基础上做了一点点改动封装。当然，网上也有些类似的封装，类似于vueshowpdf、vue-pdf。
DEMO源码上传至github：https://github.com/xiao0502/vue-to-pdf
准备工作：
1. npm install pdfjs-dist -S // => 安装pdfjs-dist依赖
2. npm install better-scroll -S // => 安装better-scroll依赖
3. 初始化PDF
=> 3.1 利用require引入，别用Import
let pdfJS = require('pdfjs-dist').PDFJS;
=> 3.2 把pdfJS的的workerSrc指向pdf.worker.js
pdfJS.workerSrc = require('pdfjs-dist/build/pdf.worker.min');
=> 3.3 获取DOM中为预览PDF准备好的canvasDOM对象
var canvas = document.getElementById('the-canvas');
=> 3.4 初始化pdf文件渲染
let vm = this;
pdfJS.getDocument(this.url).then(function getPdfHelloWorld(pdf) {
pdf.getPage(num).then(function getPageHelloWorld(page) {
if (vm.initFlag) {
vm.scale = document.body.getBoundingClientRect().width / page.view[2];
vm.minScale = vm.scale;
}
vm.initFlag = false;
var viewport = page.getViewport(vm.scale);
var context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
document.querySelector('.scroll-content-info').style.width = document.querySelector('#the-canvas').getBoundingClientRect().width + 'px';
vm.$refs.scroll.refresh();
vm.isLoading = false;
});
});
=> 3.5 设置PDF总页数
pdfJS.getDocument(this.url).then(function (pdfDoc_) { //初始化pdf
vm.pdfDoc = pdfDoc_;
vm.pageTotal = vm.pdfDoc.numPages;
}).catch(function (err) {
if (err) {
console.log(err)
vm.throwerr(vm.pdfurl)
}
})
=> 3.6 上述变量解释
this.url // => 从后台获取的pdf urldi地址
num // => 渲染PDF的当前页
initFlag // => 判断PDF渲染是否是第一次，因为第一次的时候要计算PDF的缩放，刚好满足手机屏幕的最大宽度，即一屏显示完整
minScale // => PDF的最小缩放值（正常为1，这里最小为计算出来的一屏显示）
scale // => 缩放值
document.querySelector('.scroll-content-info').style.width = document.querySelector('#the-canvas').getBoundingClientRect().width + 'px';
vm.$refs.scroll.refresh();
上述两行是设置better-scroll 横向滚动的宽度和重新计算滚动宽高度
对better-scroll不太了解的同学可以顺便学习下，个人接触到的做移动端滚动
结合vue项目做开发最好的插件，地址：https://ustbhuangyi.github.io/better-scroll/doc/zh-hans/#better-scroll 是什么
4. 放大缩小翻页功能，只需要改变上述变量的scale值和num值，然后重新初始
化就行，这里有个坑，因为是对同一个canvas操作，当canvas还没有渲染完成的候，
快速点击放大缩小或者翻页再次对同一canvas操作的话，就会报错。我这里的处理办法
是实现放大缩小翻页功能的时候，删除原来的canvas，重新渲染到新的canvas上面
网友评论