vue用pdf.js实现对pdf浏览，并隐藏下载、打印_vue pdfjs

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>
1
2
3
4
5
6

新页面打开

function(){
	window.open(`/pdfjs/web/viewer.html?file=${encodeURIComponent(this.pdfUrl)}`)
}
1
2
3

②如果是文件流，把他转成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");
 }
1
2
3

可以加代理

pdf地址为http://xxx/…
vue.config,js中

 proxy: {
    '/pdf': {
        target: 'https://xxx',
        pathRewrite: { '^/pdf': '' },
        ws: false,
        changeOrigin: true
      }
}
1
2
3
4
5
6
7
8

修改url

const url = pdfurl.replace('http://xxx/', location.origin + '/pdf/')
window.open(`/pdfjs/web/viewer.html?file=${encodeURIComponent(url)}`)
1
2

② 文件已损坏或者加密

③403

可能是token原因或者其他原因，那一定把pdfUrl在浏览器打开也不能看，如果下载下来可以打开，可以用下载接口返回的url或返回的流转成url，我就是这样的问题。那样也不用跨域了