一开始使用了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直接在浏览器打开查看是否正常显示默认pdf
如果本地可以连接测试环境地址那就最好了,可以直接测试预览效果
如果无法连接测试环境,可以在本地试下pdf.js是否正常使用,测试方法如下:
把 this.pdfUrl = 'http//localhost:8080/pdfjs/web/viewer.html'
这种方法是可以直接打开本地默认pdf的(compressed.tracemonkey-pldi-09.pdf)。能打开说明pdf正常使用,
4.注意:必须要了解清楚接口是否需要传token值
如果需要,配置的地方是在pdfjs里面build的pdf.js里找到createPDFNetworkStream
大概在1960行左右,
把里面的httpHeaders添加你需要的参数就可以了。
标签:预览,js,host,pdf,PDF,pdfjs From: https://www.cnblogs.com/zxm1993/p/17464907.html