html在线预览显示pdf文件，pdf.js插件

1.下载js文件

官网下载：
https://mozilla.github.io/pdf.js/getting_started/#download
百度云下载：
链接：https://pan.baidu.com/s/1-C91MCcrOo_Sq7bn9yCUbQ
提取码：zhac

我下载的是v2.9.359版本

2. 解压

3. 使用pdf.js

（1）不使用viewer其他功能，只显示文档：

把 pdf.js 和pdf.worker.js拷贝到项目plugin内，方便测试，把pdf文件也拷贝到同目录下，使用时换成自己的pdf文件即可。

看一下目录：

在页面里html内写一个canvas：

<canvas id="the_canvas"></canvas>

页面只引用pdf.js，然后在页面的js里写以下代码：

// 这个是你的pdf文件的路径var url = '../../assets/expand/plugins/pdf-2.9.359/compressed.tracemonkey-pldi-09.pdf';// 这个是你copy的pdf.worker.js的路径pdfjsLib.GlobalWorkerOptions.workerSrc ='../assets/expand/plugins/pdf-2.9.359/pdf.worker.js';// 获取文档var loadingTask = pdfjsLib.getDocument(url);loadingTask.promise.then(function(pdf) {//// 显示第一页//pdf.getPage(1).then(function(page) {var scale = 1.5;var viewport = page.getViewport({ scale: scale, });// Support HiDPI-screens.var outputScale = window.devicePixelRatio || 1;//// Prepare canvas using PDF page dimensions//var canvas = document.getElementById('the_canvas'); // 你的canvas的idvar context = canvas.getContext('2d');canvas.width = Math.floor(viewport.width * outputScale);canvas.height = Math.floor(viewport.height * outputScale);canvas.style.width = Math.floor(viewport.width) + "px";canvas.style.height =  Math.floor(viewport.height) + "px";var transform = outputScale !== 1? [outputScale, 0, 0, outputScale, 0, 0]: null;//// Render PDF page into canvas context//var renderContext = {canvasContext: context,transform: transform,viewport: viewport,};page.render(renderContext);});});

如果canvas.getContext(‘2d’)报错，就看看自己canvas的id是不是一致，pdf路径也要写对
看一下效果：

光秃秃的，除了第一页啥也没有…想要丰富的编辑器显示全部页面，那么就要使用第二种，自带的viewer

（2）viewer

把整个解压的文件copy到plugin文件下

打开viewer.html文件，用google打开试试看效果：

阅读器整个出来了，包括打印、页码选择、size调整等等。

下面在自己的页面里添加一个阅读器：
页面html：

<div class="tabDiv"><iframe src="/assets/expand/plugins/pdfjs-2.9.359-dist/web/viewer.html" id="viewerIframe"></iframe>
</div>

效果：

显示的pdf换成我们自己的文档：
viewer.js中有默认url：

更改我们的文件路径，
iframe的src后面跟上 ?file= 在加上自己请求file文件流的路径即可。。