网页在线预览pdf文件的demo pdf.js

在用BOSS直聘的时候发现他那边可以直接查看pdf文档，我想着web能不能做到，于是今天花了一点时间去做这个，顺带用vue写了个单页demo，用的是bootstrap-vue框架。

第一次用的这个，文档有点怪怪的，用习惯国内的框架，一上来用英文的，而且也不怎么详细，所以导致没研究出单个模块引入的方式，于是js文件就变的很大了，废话少说，这次的重点是如何在web端查看pdf文件。

基本做法就是将文件渲染成画布canvas，然后在输出到网页中，其中最好的，也是最复杂的就是pdf.js，该项目在github开源，并且是mozilla发布，有点东西。

不过github的东西可能比较适合使用iframe元素，因为他有一个已经做好的文件夹，我们调用这个文件夹里的viewer.html，然后通过get传参的方式加上我们要打开的文件就能直接在该网页中查看。

例：

<iframe src="viewer.html?file=pdf文件路径" frameborder="0"></iframe>

通过传入文件路径达到预览的效果。

但是这个ui是固定的，我就想简单一点，直接给我渲染出pdf就行了，其他的东西我自己做。

因为本身就是个demo，按上面那个实用性可能不是很大。

所以我直接就调用两个js文件：pdf.js和pdf.worker.js；然后利用里面封装的方法来使用。

下载

官网

下载完打开里面有两个文件夹：build和web

其中web就是上面说的，已经做好的项目了，你直接合并到自己的项目里，然后通过链接的方式调用。

我使用的是build里面的js文件，在index.html中引入pdf.js和pdf.worker.js这两个文件。

方法

pdfjsLib.getDocument会有一个promise，利用then捕获到成功回调，并且会传入这个object对象，这个对象就是pdf.js生成的对象。

pdfjsLib.getDocument("pdf文件路径").promise.then(pdf => {

});

显示第几页pdf.getPage(page)

通过pdf对象的方法getPage我们可以设置渲染第几页，然后用then来捕获，在里面我们要先计算好canvas的大小和绘制比例，然后创建画布，最后再将这些参数保存在一个对象的键值对中，然后进入render初始化，初始化后这个canvas对象就绘制好了，我们再将这个canvas插入到页面中去。

这个部分的例子可以去官网查看到，我这里不放了，因为vue的东西太多绑定了，显示这个看不到那个，还不如直接看源码，源码又在我本地，demo也有了。

预览图

demo

demo