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

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