前段时间做一个在移动端预览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
直接在编辑器中搜索这一行代码，注释掉就可以正常使用了！
初次使用，如果有什么错误、不当，或者更好的方法，欢迎在下面评论留言！！！
