最近有这样一个需求，需要在线预览pdf文件，于是就去找这方面的插件。最后筛选了一下，选择了pdf.js这个插件。
我们先看一下pdf.js定义：
pdf.js可以实现在html下直接浏览pdf文档，是一款开源的pdf文档读取解析插件
pdf.js主要包含两个库文件，一个pdf.js和一个pdf.worker.js，，一个负责API解析，一个负责核心解析
pdf.js本质上是用canvas渲染的，pdf文件经过解析之后，在canvas画布上渲染出来，实现预览（看了一下pdf.js的源码，先是用SVG生成图形，然后在canvas画布上展示出来）
那么怎么使用它呢？如下：
(方法都是通用的，借鉴了别人写的流程)
pdf.js的使用方式：
摘自（官网的例子）http://mozilla.github.io/pdf.js/examples/
1、页面引入pdf.js。
2、使用PDFJS.getDocument(‘helloworld.pdf’)方式加载要打开的PDF文件。
3、通过PDFJS.getDocument(‘helloworld.pdf’).then(function(pdf){// you can now use pdf here});then方式处理后续的方法
4、pdf.getPage(1).then(function(page){// you can now use page here});加载PDF的第一页
5、通过h5的canvas进行展示。
// html 部分
<div class="pdf">
<div class="pdf-show" id="pdf-show">
</div>
</div>
// 展示pdf文件 vue中写的代码 js部分
this.showPdf(result.data.url, 'pdf-show');
pdfShow(url, id, type) {
// 先定义一个放置阅览pdf文件的dom元素（页面上定义好的）
let cvsItem = document.getElementById(id);
cvsItem.innerHTML = "";
const loading = this.$loading({
lock: true,
text: type || '加载中...',
target: cvsItem,
spinner: 'loader',
background: 'rgba(0, 0, 0, 0.5)',
customClass: 'loadings'
});
// url.replace("http:", 'https:') 这一步是因为后台返回的url是http开头的，但是用url去请求的时候要更换成https，这个是我做的项目的原因
PDFJS.getDocument(url.replace("http:", 'https:')).then((pafObj) => {
cvsItem.innerHTML = "";
this.isloading = true,
this.pafDoc = pafObj;
let totalNum = this.pafDoc.numPages;
loading.close();
// debugger;
for (let i = 1; i <= totalNum; i++) {
let id = 'canvas' + i;
let cvsNode = document.createElement('canvas');
cvsNode.setAttribute('id', id);
cvsNode.setAttribute('class', 'canvas-item');
cvsWraper.appendChild(cvsNode);
this.renderPage(i);
if (totalNum === i) {
this.isloading = false;
}
}
}).catch(err => {
this.$message({ message: "PDF加载失败", type: 'error' });
})
},
renderPage(num) {
// 进行渲染
let id = 'canvas' + num;
let canvas = document.getElementById(id);
let ctx = canvas.getContext('2d'); // canvas的知识
this.pageRendering = true;
this.pafDoc.getPage(num).then(page => {
let viewport = page.getViewport(this.scale);
canvas.height = viewport.height;
canvas.width = viewport.width;
let renderContext = {
canvasContext: ctx,
viewport: viewport
};
page.render(renderContext);
})
}
},
