前端實現(xiàn)pdf預覽功能的全過程(基于vue)

更新時間：2023年09月17日 11:38:36 作者：多多的小寶貝

這篇文章主要給大家介紹了關于前端實現(xiàn)pdf預覽功能的相關資料,前端實現(xiàn)預覽最好的效果還是PDF,不會出現(xiàn)一些文字錯亂和亂碼的問題,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

前言：

項目中之前pdf預覽是客戶端andrio實現(xiàn)的，現(xiàn)在需要前端H5自己實現(xiàn)預覽功能，項目是基于vue的H5項目，記錄一下pdf預覽功能實現(xiàn)的過程和問題

一、利用iframe實現(xiàn)pdf預覽

1、實現(xiàn)過程

將pdf路徑設置給iframe的src屬性

    <iframe :src="pdfUrl" marginWidth="0" marginHeight="0" scrolling="no" frameBorder="0" style="width: calc(100% + 17px); height: calc(100% + 17px)"></iframe>

create(){
//路由路徑上獲取pdf路徑參數(shù)
 var extension = this.$route.query.pdfSrc.split('.').pop().toLowerCase()
    console.log(extension, 'extensionextension')
    if (extension == 'pdf') {
      this.pdfSrc = `${this.$route.query.pdfSrc}#toolbar=0`
    } else {
      this.pdfSrc = 'https://view.officeapps.live.com/op/embed.aspx?src=' + this.$route.query.pdfSrc
    }
}

2、遇到的問題

電腦上測試正常，但是安卓端會出現(xiàn)空白頁和直接跳轉下載的現(xiàn)象，解決思路：客戶端同事推薦用pdf.js,然后在網上查找發(fā)現(xiàn)，vue有一個插件vue-pdf,是基于pdf.js封住的，因此決定采用插件vue-pdf實現(xiàn)

二、vue-pdf插件實現(xiàn)預覽

1、實現(xiàn)過程

下包

npm i vue-pdf

引入并使用

<template>
  <div class="pdf-container">
    <pdf v-for="item in numPages" :key="item" :src="pdfSrc" :page="item" ref="pdf"></pdf>
  </div>
</template>
<script>
import pdf from 'vue-pdf'
export default {
  data () {
    return {
      pdfSrc: '',
      numPages: null
    }
  },
  components: {
    pdf
  },
  computed: {},
  created () {
      var extension = this.$route.query.pdfSrc.split('.').pop().toLowerCase()
    if (extension == 'pdf') {
      this.pdfSrc = `${this.$route.query.pdfSrc}#toolbar=0`
    } else {
      this.pdfSrc = 'https://view.officeapps.live.com/op/embed.aspx?src=' + this.$route.query.pdfSrc
    }
    }
  },
  mounted () {
    this.getNumPages()
  },
  methods: {
    getNumPages () {
      const loadingTask = pdf.createLoadingTask(this.pdfSrc)
      loadingTask.promise.then(pdf => {
        this.numPages = pdf.numPages
        console.log(' this.numPages', this.numPages)
      }).catch(err => {
        debugger
        console.error('pdf 加載失敗', err)
      })
    }
  }
}
</script>

部署到測試線app中測試還是存在空白頁問題，于是換成插件pdfH5

三、pdfH5實現(xiàn)預覽

下包

npm i pdfh5

代碼實現(xiàn)

<template>
  <div class="pdf-container">
    <div id="pdf-content"></div>
    <iframe v-if="docType!='pdf'" :src="pdfUrl" marginWidth="0" marginHeight="0" scrolling="no" frameBorder="0" style="width: calc(100% + 17px); height: calc(100% + 17px)"></iframe>
  </div>
</template>
<script>
import Pdfh5 from 'pdfh5'
import 'pdfh5/css/pdfh5.css'
export default {
  name: 'Pdfh5',
  data () {
    return {
      docType: '',
      pdfh5: null,
      // 可引入網絡文件或者本地文件
      pdfUrl: 'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf' // 如果引入本地pdf文件，需要將pdf放在public文件夾下，引用時使用絕對路徑（/：表示public文件夾）
    }
  },
  mounted () {
    this.docType = this.$route.query.pdfSrc.split('.').pop().toLowerCase()
    if (this.docType == 'pdf') {
      this.initPdf()
    } else {
      this.pdfUrl = 'https://view.officeapps.live.com/op/embed.aspx?src=' + this.$route.query.pdfSrc
    }
  },
  methods: {
    initPdf () {
      // pdfh5實例化時傳兩個參數(shù)：selector選擇器，options配置項參數(shù)，會返回一個pdfh5實例對象，可以用來操作pdf，監(jiān)聽相關事件
      // pdfh5 = new Pdfh5(selector, options) goto初始到第幾頁，logo設置每一頁pdf上的水印
      this.pdfh5 = new Pdfh5('#pdf-content', {
        pdfurl: this.$route.query.pdfSrc,
        goto: 1
        // 設置每一頁pdf上的水印
        // logo: { src: require('@/assets/images/bus/icon_head@2x.png'), x: 420, y: 700, width: 120, height: 120 }
      })
      this.pdfh5.scrollEnable(true) // 允許pdf滾動
      // 監(jiān)聽pdf準備開始渲染，此時可以拿到pdf總頁數(shù)
      this.pdfh5.on('ready', function () {
        console.log('總頁數(shù):' + this.totalNum)
      })
      // 監(jiān)聽pdf加載完成事件，加載失敗、渲染成功都會觸發(fā)
      this.pdfh5.on('complete', (status, msg, time) => {
        console.log('狀態(tài):' + status + '，信息:' + msg + '，耗時:' + time + '毫秒')
      })
    }
  }
}
</script>
<style  scoped>
.pdfjs {
  height: 100vh !important;
}
.pdf-container {
  width: 100%;
  height: 100%;
}
</style>

最終測試，該方案可以。