vue3引入pdfjs-dist5.x预览器viewer报错问题解决及pdfjs-dist5.x使用教程

1 前言

最近在做pdf在预览的功能，pdfjs-dist插件使用了一下感觉还可以，具体就不用介绍了，能看到这篇文档的小伙伴想必都是研究过pdfjs-dist（官方文档：github.com/mozilla/pdf…）的。 我是在引入pdfjs-dist 5.2.133遇到的报错，下面开始 show time:

2 报错复现

报错内容：

app.js:2498 Uncaught (in promise) Error: file origin does not match viewer's at validateFileURL (app.js:2498:10) at Object.run (app.js:960:28)

app.js:1507 加载 PDF 时发生错误。

PDF.js v5.2.133 (build: 4f7761353) Message: file origin does not match viewer's

3 报错解决

首先确认咱穿过来的这个url地址是放在浏览器里面是可以直接下载pdf（接口没啥问题）的，这里url被转码了，不过没关系，用我们转码之前的pdf的url测试就可以了

我转码之前的pdf url是：http://127.0.0.1:7501/api/v1/user/getPdfFile?file=8c424181bb74b34199b0f02bc3b2b012.pdf

重点：

更改pdfjs-dist的源码，因为里面有跨域相关的校验，咱前端不要这个

将下面这段咔咔注释掉，就OK了！

正常展示效果如下：

有的博客说，要在这里加一句file = decodeURIComponent(file) ，不过我试了加不加都不影响，估计是版本问题吧

4 pdfjs-dist5.x完整引用代码

关键代码如下：

pdf预览器离线包下载：mozilla.github.io/pdf.js/gett…

关键代码块：

 let currentFileUrl = ref('')
​
 currentFileUrl.value = encodeURIComponent(
    `http://127.0.0.1:7501/api/v1/user/getPdfFile?file=8c424181bb74b34199b0f02bc3b2b012.pdf`
 )
​
 <iframe
         style="height: 100%; width: 100%"
         :src="`./lib/pdfjs-5.2.133-legacy-dist/web/viewer.html?file=${currentFileUrl}`"
         >
</iframe>

5 参考

• pdf.js引用时报错：file origin does not match viewer‘s

  blog.csdn.net/Miraitowat/…