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就行了

<template>
  <div>
    <pdf v-for="item in numPages" :key="item" :src="src" :page="item" />
  </div>
</template>

<script>
import pdf from 'vue-pdf'
export default {
  components: {
    pdf
  },
  data() {
    return {
      numPages: '',
      src: '',
      pdfUrl1:
        'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf',
    }
  },
  mounted() {
    this.loadPdf(this.pdfUrl1)
  },
  methods: {
    // pdf加载时
    loadPdf(url) {
      this.src = pdf.createLoadingTask(url)
      this.src.promise.then((pdf) => {
        this.numPages = pdf.numPages // 这里拿到当前pdf总页数
      })
    },

  },
}
</script>

上面的方法是能实现pdf展示分页的功能的，但如果载入的pdf中有中文，可能会显示不出来或者乱码

解决方案也比较简单，在项目中引入“CMapReaderFactory.js”，引入方式如下：

import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'

然后修改pdf链接的createLoadingTask方法，例如：

this.src= pdf.createLoadingTask({ url: url, CMapReaderFactory })

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