pdf.js2.2的使用

所谓工欲善其事必先利其器，要想使用pdf.js2.2，我们先需要获取这个js文件。下载

下载好了之后，我们就可以来使用了。

一：单页加载

首先，我们来看一下，html的代码:

就是一个翻页，和渲染pdf的canvas。

接下来，就开始使用pdf.js编码了

第一步：引入几个js文件

第二步：相关初始化

canvas的初始化可放后，这里实现的是翻页加载的功能，所以维护一个canvas对象就行了，然后对pdf.js做一些初始化的工作，首先加载pdf.worker.js文件，这个和pdf.js就是负责pdf解析相关工作的。然后设置字体库。在上面给的链接里面下载了之后，直接有（其实就是官方demo里的啦~）,不设置也无所谓，不过如果pdf里没有相关字体，可能报错，你也可以在这个cmaps文件夹选择一些字体文件，不选择所有的。

第三步：初始化相关做完了，此时就可以加载pdf文件了。首先我们需要获取pdf文件，如下所示：

url方式

base64编码格式

此时pdf已经加载好了，但是!注意，这个时候，页面还是空白，因为没有渲染。所以，接下来，要做的就是渲染文件

第四步：渲染页面

因为此处我们需要把宽度，固定为800，所以重新计算了一次缩放比例，然后给canvas这个页面元素设置宽高，当然此处，还可以设置canvas的其他效果，详见canvas。然后静待页面渲染完成即可。因为此处，设置了翻页。可能连续点击下一页上一页啊的按钮。所以，做了判断，如果在当前页还在加载的情况下，就又点击了一次的话，那么，应该不是马上就渲染，要等当前页渲染完成在渲染。当然，可以在渲染一页的时候，拦截这个事件，或者做别的处理也行。

上面说的，其实页面已经渲染完成了。加载的是第一页。

下面补充一些方法。

最后看下效果：

二：加载全部（多页）

前面实现了单页加载的功能，但是我想一次性加载完所有的该怎么办呢，其实和前面的单页加载一样，就改几个小地方就行啦

1、pdf加载完成之后，直接把所有页面渲染出来

其次，每个循环时，重新创建个canvas对象，设置相关属性即可：

这样，就把所有页面加载出来啦。当然，其他很多效果都可以实现，参考canvas和html5就行~~~

项目地址：地址

参考资料：资料