Vue Cli项目使用PDF.js实现移动端在线预览pdf

Question

在项目中需要实现移动端H5页面预览PDF文件，文件是在服务器上，我看了很多使用PDF.JS的教程，对于在vue项目中都是让把官网上下载下来的文件放在static文件夹下，然后在页面中使用

<iframe :src="'/static/pdf/web/viewer.html?file=' + pdf" frameborder="0"></iframe>

来预览pdf，但是我使用的cli创建项目，没有static文件夹，我尝试了将源文件放在public文件夹中，还有在创建一个static文件夹，但是预览出来的都是我的整个项目，也就是iframe中的url没有指向pdf.js的viewer.html，而是指向了我的整个项目文件

请问应该怎么使用pdf.js呢？我这里是哪里出了错？

Answer 1

你可以试试这个pdfjs-dist依赖
直接使用依赖，然后页面引用就可以了

Answer 2

将pdf文件放在public文件夹 再用 './xxxx.pdf' 调用应该是可以的

别忘了建 vue.config.js 文件 将 publicPath 的值设置为 './'

Answer 3

没有找到 这个 /static/pdf/web/viewer.html, 你 build 一下看是否有这个文件

Answer 4

请问问题解决了么？