vue开发h5页面如何使用pdf.js实现预览pdf

需求背景：使用vue2开发h5项目时，功能存在移动端预览pdf功能，使用pdfh5插件，机型兼容性较差，时不时的会有乱码、字体消失、字体重叠等bug，有次应该是pdfh5中午维护，且页面没有使用路由懒加载，直接导致整个项目崩溃，发生严重的生产事故，因此将所有的pdfh5插件换成pdf.js

注： 可能很多小伙伴和我一样，刚开始也不会用pdf.js，百度上一搜也都是直接使用，没有像详细的过程，今天将详细过程附上，希望对小白或还不会使用的小伙伴有帮助，会使用的大佬也请多多指教

1、下载过程

首先下载pdf.js。（以下是我的下载的过程）
https://gitcode.gitcode.host/docs-cn/pdf.js-docs-cn/print.html

由以上两部操作，往下可以下载自己想要的版本，因为是vue2所以我选在的版本是2.6105，如不需要也可以直接点击下载。


切换分页找到自己想要的版本：

跟着以上步骤就可以选择自己需要的pdf.js版本， 下载完成之后，解压会得到以下的文件

此时就可以正常的使用了

2、使用

使用vue开发的项目，我们需要把解压出来的build, web, LICEENSE放到public文件下面

然后新建一个页面， 如下：
使用iframe标签，src=“/web/viewer.html”， src的值为解压的web文件中的viewer.html， 此时会默认展示一个pdf，如图

此时要预览自己的pdf,则将文件链接传给pdf.js

上面没有pdf时src=“/web/viewer.html”, 当有pdf时，src=“/web/viewer.html?file=url”, url是你的pdf链接
当你只有文件流或者base64的pdf时，请将pdf转为临时地址还过去，就可以显示

最终效果如下

注： 如遇上什么问题，请留言，可能也是遇到过的问题

问题1：

有小伙伴遇到这样的问题，如图所示有链接却不显示

前提： 本地调试
不显示的原因：
1、应该是跨域的问题，本地服务的域名与pdf的域名不一致导致的跨域
2、本地连接携带域名是报错， 如图

解决方法：1.解决跨域请求时使用的代理，如vue解决请求跨域的方法 2.配置代理后，在本地调试时去掉域名

proxy: {
      "^/api": {
        target: "https://s6.aconvert.com",
        changeOrigin: true,
        pathRewrite: {
          "/api": "",
        },
      },
    },
// iframe的src为 /cloud/html5/CSPF_MOBILE/BIG_STATIC_RESOURCE/pdf/pdfjs_dist/web/viewer.html?file=/convert/p3r68-cdx67/as0xr-zy3oo.pdf

### 注意：pdf链接的域名应该和项目部署后，访问页面的域名是一致的，要不然存在跨域问题