移动端预览PDF，pdf.js预览PDF文件流格式

 

一开始使用了vue-pdf效果并不理想，满足不了要求还出现兼容问题，

PDF.js似乎是一个完美的解决方案,号称兼容各种浏览器.快速且高效.界面按钮可以配置,而且也比原生iframe框架好看一些,但是一轮的使用下来,确确实实躺了不少的坑,特此记录一下全过程,希望以后使用的时候注意一点.

以下是我使用过程中碰到的问题：

1.跨域问题

2.本地开发无法预览问题

3.获取PDF文件流的请求头问题。

 

下载pdf.js官网地址：https://mozilla.github.io/pdf.js/

下载后解压。

 

下面是完整的使用过程：

1.把pdf.js放在项目根目录的public文件目录下，注意：要是没有这个文件可以放在static里效果都一样

2.添加iframe标签

<iframe :src="pdfUrl" frameborder="0" class="pdf-window"></iframe>

3.js部分：

getUrl() {

　　const host = window.location.host;

　　const url = `${window.location.protocol}//${host}/ + 接口地址`; //  (可拼接参数)

　　this.pdfUrl = `${window.location.protocol}//${host}/nts-pt/pdfjs/web/viewer.html?file=${encodeURLComponent(url)}`; // 当前环境下调起pdfjs控件

}

说白了上面代码 url 就是后端接口地址（返回pdf文件流）

可以通过`${window.location.protocol}//${host}/nts-pt/pdfjs/web/viewer.html`或`${window.location.protocol}//${host}/nts-pt/pdfjs/web/compressed.tracemonkey-pldi-09.pdf'直接在浏览器打开查看是否正常显示默认pdf

如果本地可以连接测试环境地址那就最好了，可以直接测试预览效果

如果无法连接测试环境，可以在本地试下pdf.js是否正常使用，测试方法如下：

把 this.pdfUrl = 'http//localhost:8080/pdfjs/web/compressed.tracemonkey-pldi-09.pdf'

这种方法是可以直接打开本地f的pdf（compressed.tracemonkey-pldi-09.pdf）。能打开说明pdf正常使用，

 

4.注意：必须要了解清楚接口是否需要传token值

如果需要，配置的地方是在pdfjs里面build的pdf.js里找到createPDFNetworkStream

大概在1960行左右，

把里面的httpHeaders添加你需要的参数就可以了。