vue移动端预览 pdf 文件

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 })

修改后就可以正常展示中文了