所谓工欲善其事必先利其器，要想使用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就行~~~
项目地址：地址
参考资料：资料
网友评论