pdf.js的使用

简介

最近接了一个新需求，会用到pdf.js，于是小白赶紧突击了一下，留下粗浅的笔记。
PDF.js 是基于开放的 HTML5 及 JavaScript 技术实现的开源产品。简单说就是一个 PDF 解析器。
首先附上pdf.js的github地址：https://github.com/mozilla/pdf.js
官方网站：http://mozilla.github.io/pdf.js/
然后咱们正式开始~~~~

下载源码

1 2	$ git clone git://github.com/mozilla/pdf.js.git $ cd pdf.js

构建pdf.js

这个项目是用gulp构建的，所以首先请确认已经安装gulp

1	$ (sudo) npm install gulp -g

然后安装项目所需的依赖

1	$ npm install

最后构建使用

1	$ gulp generic

使用

粗略的看了github，然后准备跟着官网getting started，结果一脸萌比.jpg，好像并没有写什么哇，有兴趣的可以从examples开始研究~
一切都还算顺利，直到我看到API…

what?!
无fuck说的小白＝＝
后来我参考了几个示例，要么是hello world，要么是整个完整的最终版viewer。
研究了一下自己的项目，感觉可以直接套用完成的viewer，哈哈哈哈哈，开心到花枝乱颤~~
给大家看一下完整的viewer的效果，超级棒的！

大家也可以在本地把pdf.js的项目挂起来，然后就可以看到辣！

1	$ gulp server

然后访问介个！http://localhost:8888/web/viewer.html
其中generic/web/viewer.html主要是渲染pdf阅读器的样式，而generic/web/viewer.js则是指定打开的pdf文件。
于是我们来看看viewer.js

默认打开指定的文件

可以通过file形参来动态指定打开的PDF文件
在页面中可以用iframe把viewer.html嵌进去，就得到我们想要的样子了

1 2	<iframe src="./generic/web/viewer.html" frameborder="0" width="100%" height="100%"></iframe> // 相对路径的写法需参考自己的文件目录

然后我们指定一个file形参，就可以打开我们想开的PDF文件辣！

1 2	<iframe src="./generic/web/viewer.html？file=./test.pdf" frameborder="0" width="100%" height="100%"></iframe> // 相对路径的写法需参考自己的文件目录

大概酱紫！
但是在我的实际项目中请求的file路径确是酱紫的！

需要根据不同的参数，来选择展示不同的pdf文件，涉及到传参的问题了，仔细观察上面这段url地址会发现，在file请求参数中的值为一个url地址，而这个url地址又追加了自己的请求参数，这就导致一个url地址中出现2个”?”，导致浏览器不能正常解析这段url！
一种解决思路是：我们可以把file形参的值，先编码，然后再解码来解决这个问题！
所以用到了encodeURIComponent()函数来进行编码，如下：

<iframe id="viewer" frameborder="0" width="100%" height="100%"></iframe>
<script type="text/javascript">
	var url = encodeURIComponent('/fop/convert/preview?cid=' + cid + '&preview_format=pdf');
	$('#viewer').attr('src', "./generic/web/viewer.html？file=" + url);
</script>
// 请自己引用jquery

既然有编码，那么就一定要有解码来解析他，不过这个工作generic/web/viewer.js已经替我们做过了

就这样实现了我的需求辣！

参考

除此之外，我们也可以从后台获取PDF的数据流，然后通过pdf.js来渲染。
pdf.js渲染PDF文件的流程：Fetch pdf (url / buffer) ——> canvas ——> 渲染
如果要深入pdf的渲染，需要去研究pdf.js源代码。pdf.js可通过pdf文件的地址或pdf数据流获取pdf，具体实现是调用接口函数 PDFJs.getDoc(url/buffer)将pdf载入html，通过canvas处理, 然后渲染pdf文件。
详细问题大家可以参考：
PDF.JS初级使用
 pdf.js文件流方式实现在线展示pdf文件
 pdf.js

写在最后

明天就是五一小长假辣！抑制不住放假的喜悦哈哈哈！明天一早和男盆友赶早班飞机去北海涠洲岛，希望能enjoy呀！回来以后争取出个攻略哈哈哈！
最后推荐大家可以去东极岛，虽然去年去的那几天天气炒鸡不好，但是感觉是个民风淳朴风景漂亮的小岛，炒鸡棒哒！
放假嗨皮~~