vue3+element plus+minio+pdfjs-dist 实现pdf文件上传回显

在 Vue 3 项目中使用 PDF.js（pdfjs-dist）可以帮助在应用中渲染和显示 PDF 文件。

本篇主要是想总结一下我踩过的坑，文章结尾会附上完整代码，话不多说先上图展示效果。

 环境问题

首先，安装 pdfjs-dist:

npm install pdfjs-dist

接下来搭建基础界面，测试上传组件，使用的是el-upload组件

然后就开始遇到问题了

问题1：我明明就上传了一个文件，但会显示两条上传结果

原因：el-upload 组件已经在上传完成后自动将文件添加到 fileList 中，而在 customUpload 方法（是我自定义的上传图片的方法）中又手动向 fileList 中添加了一条记录，导致同一个文件被添加了两次。

解决：完全手动管理 fileList，让 el-upload 不管理文件列表，因为我还要存储文件上传之后返回的url，所以干脆我一次性把文件信息全部收集好在去存储。所以我就把v-model:file-list这部分去掉，变成了以下这个样子。然后在customUpload 方法中组装并添加数据即可。

     上传 PDF 文件

问题2：el-dialog对话框不显示

解决：el-dialog对话框不显示

问题3：PDF.js Worker 未正确加载

解决：这个问题很重要，重点关注！

GlobalWorkerOptions.workerSrc = '../../node_modules/pdfjs-dist/build/pdf.worker.mjs';

到这一步基本页面搭建完成，就可以展示pdf了，感兴趣的伙伴可以去看官方文档给的示例，这里附上直达链接https://github.com/mozilla/pdf.js/blob/master/examples/learning/helloworld.html

添加翻页功能

官方文档示例链接：https://github.com/mozilla/pdf.js/blob/master/examples/learning/prevnext.html

问题4：PdfViewer.vue: TypeError: Cannot read from private field

解决：参考下面这个博客，翻源码研究的挺深的

https://blog.csdn.net/weixin_42960907/article/details/127366807?fromshare=blogdetail&sharetype=blogdetail&sharerId=127366807&sharerefer=PC&sharesource=m0_50360661&sharefrom=from_link

总结一下，就是把pdfDoc变量变成非响应式，用到pdfDoc的地方把.value去掉