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 })
修改后就可以正常展示中文了
