vue项目在线预览pdf

vue项目中在线预览pdf

1.在这里我用到了pdf.js插件来实现在线预览pdf的效果（pdf.js下载地址”http://mozilla.github.io/pdf.js/“）

2.下载好pdf.js插件以后我们将插接放在vue根目录静态资源文件夹下（vue3.0以前为static、vue3.0以后为public）

3.放好之后我们就开始使用了，其实这个使用起来很简单的，这里我用的是iframe标签来嵌套的，我们在iframe标签的src路径为pdf.js下的web文件夹下面的viewer.html，然后我们在后面跟一个参数file 这是我们pdf文件的路径。如"pdfjs/web/viewer.html?file=aaa/pdf.pdf"

<iframe
      :src="`pdfjs/web/viewer.html?file=${pdf}`"
      width="100%"
      :height="height2"
      class="iframe"
    ></iframe>

4.这里我们就可以运行了，但是我们发现这里会因为pdf.js不支持跨域而报 “file origin does not match viewer” 的错误。这里我们的解决办法就比较简单了，我们打开web文件夹下面的viewer.js文件搜索 “file origin does not match viewer” 找到那句话注释掉就好了（大概在1900行左右）

if (origin !== viewerOrigin && protocol !== 'blob:') {
            // throw new Error('file origin does not match viewer\'s');
          }