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)}`)

② 文件已损坏或者加密