使用pdf.js中遇到的问题

项目中需要预览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编码（针对可能会出现中文、？等特殊符号情况）；

项目中遇到的问题

1. 我的pdfpath是一个提供文件流的绝对地址，形如:http:xxx/xxx?token=xxx；其中包含了问号，一开始没有进行encodeURI，导致问号后面的token参数没有被检测到。
2. pdf.js默认对下载链接的请求是断点续传，即利用content-range来分次获取文件byte，但是我们的后台不支持，一直报错HTTP/206 “Partial Content”。查看源码后，发现源码中有：

   

其中globalSettings就是全局PDF.JS变量。根据代码逻辑，在view.html，设置禁用pdf.js的range请求即可：

PDFJS.disableRange = true;
           

1. 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>
           

1. 因pdf.js是利用ajax发送get请求来获取文件流的，所以请求的pdf文件路径不能跨域(暂未了解解决方法)

最后做出来的效果如下：