项目中需要预览pdf文件,并兼容IE11,对于谷歌等浏览器,使用iframe即可:
<iframe src="pdfpath" />
由于要 兼容IE11,使用了pdf.js。
pdf.js中包含两部分。
build下是pdf.js的核心库,其中pdf.worker.js是pdf.js的核心代码,pdf.js是以后pdf.worker.js为基础后封装的提供给外部使用的API。
web下的view.html是pdf.js自己封装的一套包含皮肤、各类功能的viwer。如果项目没有特殊需求,一般使用view.html就可以了。
pdf.js的原理是将文件渲染在canvas上展示,如果项目需要做得比较精致,特殊需求较多,可自行根据官网的文档自己封装自己的view。本次我直接使用官网自带的view.html。
使用方法非常简单,给view.html添加file参数
<iframe src="viewer.html?file=pdfpath" />
其中pdfpath为你的Pdf文件地址,并需要进行encodeURI编码(针对可能会出现中文、?等特殊符号情况);
项目中遇到的问题
- 我的pdfpath是一个提供文件流的绝对地址,形如:http:xxx/xxx?token=xxx;其中包含了问号,一开始没有进行encodeURI,导致问号后面的token参数没有被检测到。
- pdf.js默认对下载链接的请求是断点续传,即利用content-range来分次获取文件byte,但是我们的后台不支持,一直报错HTTP/206 “Partial Content”。查看源码后,发现源码中有:
其中globalSettings就是全局PDF.JS变量。根据代码逻辑,在view.html,设置禁用pdf.js的range请求即可:
PDFJS.disableRange = true;
- pdj.js自带皮肤有许多工具栏,如果不需要该工具,则在viewer.html中找到该button,添加class="hidden"即可。如取消下载按钮:
<button id="download" class="hidden toolbarButton download hiddenMediumView" title="Download" tabindex="34" data-l10n-id="download">
<span data-l10n-id="download_label">Download</span>
</button>
- 因pdf.js是利用ajax发送get请求来获取文件流的,所以请求的pdf文件路径不能跨域(暂未了解解决方法)
最后做出来的效果如下: