1.下载pdf.js
https://mozilla.github.io/pdf.js/
2.创建文件夹
在public里创建pdfjs文件夹,下载的包解压之后,把build和web拉进pdfjs文件夹
3.提供pdf的url
①如果后端返回的是url进行以下操作。但可能会因为跨域导致报错。
本页镶嵌
//encodeURIComponent可以避免pdfjs识别错file=xxx?id=xx类型地址的file参数,但可以自动解码,不需要自己解码
<iframe
:src="`/pdfjs/web/viewer.html?file=${encodeURIComponent(this.pdfUrl)}`"
frameborder="0"
class="pdf-window">
></iframe>
新页面打开
function(){
window.open(`/pdfjs/web/viewer.html?file=${encodeURIComponent(this.pdfUrl)}`)
}
②如果是文件流,把他转成url,可以参考上篇文章
https://blog.csdn.net/q249859693/article/details/131457499?spm=1001.2014.3001.5502
4、隐藏下载、打印
你创建的pdfjs文件夹中web中
①viewer.html文件搜索id=“download”
在下图位置添加 style=“display:none”
download(下载)
print(打印)
②viewer.js文件搜索 eventBus._on(“download”, webViewerDownload);
在下图位置,把这两行代码注释
5、报错
①跨域
很多人说把viewer.js中以下代码注释,但我试着没有生效
if (fileOrigin !== viewerOrigin) {
throw new Error("file origin does not match viewer's");
}
可以加代理
pdf地址为http://xxx/…
vue.config,js中
proxy: {
'/pdf': {
target: 'https://xxx',
pathRewrite: { '^/pdf': '' },
ws: false,
changeOrigin: true
}
}
修改url
const url = pdfurl.replace('http://xxx/', location.origin + '/pdf/')
window.open(`/pdfjs/web/viewer.html?file=${encodeURIComponent(url)}`)
② 文件已损坏或者加密
③403
可能是token原因或者其他原因,那一定把pdfUrl在浏览器打开也不能看,如果下载下来可以打开,可以用下载接口返回的url或返回的流转成url,我就是这样的问题。那样也不用跨域了