移动端在vue-cli中使用pdf.js

前段时间做一个在移动端预览PDF文件的一个功能，初次做这项功能的我只能大量的百度，经过一番曲折之后，所幸是做出来了，分享一下自己的心得，避免忘了

先将pdf整个文件夹下载下来
https://mozilla.github.io/pdf.js/

接下来将PDF整个文件夹放在static文件夹下
注意：不要放到src文件夹中

结构图.png

将PDF文件夹下的viewer.html用ifrme引入

<template>
  <iframe
  class="file"
  width="100%"
  src="./static/PDF/web/viewer.html"
  frameborder="0"></iframe>
</template>

在移动端中一般会有一个带有返回按钮的header，添加下面的css

<style scoped>
  .file{
    display: block;
    margin-top: 44px;
    height: calc(100vh - 44px);
  }
</style>

我这里引入了px2rem-loader，这里就不做解释了
这个时候默认打开的是compressed.tracemonkey-pldi-09.pdf，所以要改一下

<template>
  <iframe
  class="file"
  width="100%"
  :src="'./static/PDF/web/viewer.html?file=' + *****"
  frameborder="0"></iframe>
</template>

在src路径后面添加file参数，*****处可以用三种方法引入：
1）用相对路径的方式引入，但是这样就只能打开文件夹中有的PDF文件，并且会导致文件变大

:src="'./static/PDF/web/viewer.html?file=' + encodeURIComponent(相对路径)"

2）后台将PDF文件转成base64返回给前端，前端在*****处添加“data:application/pdf;base64,”，将后台传的base64拼接都后面

:src="'./static/PDF/web/viewer.html?file=data:application/pdf;base64,' + response"

3）后台返回文件流，将请求文件流地址拼接到*****处

:src="'./static/PDF/web/viewer.html?file=' + encodeURIComponent(URL)"

但是pdf.js是不允许跨域请求的，并不能将PDF文件显示出来，并且还会报错，所以要改一下viewer.js文件

跨域报错.png

直接在编辑器中搜索这一行代码，注释掉就可以正常使用了！

初次使用，如果有什么错误、不当，或者更好的方法，欢迎在下面评论留言！！！