pdf预览，在项目中是很常见的需求，在PC端web项目中，我们可以使用window.open(url)直接打开pdf进行预览，那么移动端虽然我们也可以使用此方法，但是这是新开了一个webview页面，里面的内容也不是我们可以控制的
安装插件 vue-pdf
1 npm install --save vue-pdf
通常pdf都是有多页的，当然插件也是支持多页展示的，移动端通过上下滑动来查看pdf
利用下面的方法可以实现移动端预览pdf滚动，记住，加载pdf一定要在mounted()里，否则pdf的方法会报错
这里的 pdfUrl1 我们利用的是线上的pdf地址，在实际的开发过程中我们要先通过后台接口拿到文件（url形式或者是文件流的形式），将文件流传到paf的方法加载pdf就行了
1 <template>
2 <div>
4 <pdf v-for="item in numPages" :key="item" :src="src" :page="item" />
5 </div>
6 </template>
7
8 <script>
9 import pdf from 'vue-pdf'
12 export default {
13 components: {
15 pdf
16 },
17 data() {
18 return {
19 numPages: '',
20 src: '',
21 pdfUrl1:
22 'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf',
23 }
24 },
25 mounted() {
26 this.loadPdf(this.pdfUrl1)
27 },
28 methods: {
29 // pdf加载时
30 loadPdf(url) {
31 this.src = pdf.createLoadingTask(url)
32 this.src.promise.then((pdf) => {
33 this.numPages = pdf.numPages // 这里拿到当前pdf总页数
34 })
35 },
36
37 },
38 }
39 </script>
上面的方法是能实现pdf展示分页的功能的，但如果载入的pdf中有中文，可能会显示不出来或者乱码
解决方案也比较简单，在项目中引入“CMapReaderFactory.js”，引入方式如下：
import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'
然后修改pdf链接的createLoadingTask方法，例如：
this.src= pdf.createLoadingTask({ url: url, CMapReaderFactory })
修改后就可以正常展示中文了
