vue-pdf實現pdf檔案線上預覽

阿新 • • 發佈：2020-06-29

1. 前言

PDF檔案線上預覽的功能相信大家都是有遇到過的,但在我平時的專案中,公司提供了相應的外掛,但是在h5等其他專案中,我們還是隻能靠自己呀! 今天就大概說一下 vue-pdf 這個元件,大部分的需求還是可以滿足的

2. 安裝

npm install --save vue-pdf
複製程式碼

3. pdf 頁面顯示

3.1 code

<template>
    <div>
      <pdf 
        ref="pdf"
        :src="url"
      >
      </pdf>
    </div>
</template>
複製程式碼

<script>
import pdf from 'vue-pdf'
export default {
  components:{
      pdf
  },data(){
      return {
          url:"http://image.cache.timepack.cn/nodejs.pdf",}
  }
</script>
複製程式碼

3.2 展示

這個時候,pdf檔案已經顯示在頁面上了,但是我們可以發現,這僅僅顯示了pdf 檔案的第一頁

4. pdf 顯示多頁

4.1 code

<template>
  <div>
    <pdf
      ref="pdf" 

      v-for="i in numPages" 
      :key="i"  
      :src="url" 
      :page="i"
      ></pdf>
  </div>
</template>
複製程式碼

<script>
import pdf from 'vue-pdf'
export default {
  components:{
      pdf
  },numPages: null,// pdf 總頁數
      }
  },mounted() {
      this.getNumPages()
  },methods: {
    # 計算pdf頁碼總數 

    getNumPages() {
      let loadingTask = pdf.createLoadingTask(this.url)
      loadingTask.promise.then(pdf => {
        this.numPages = pdf.numPages
      }).catch(err => {
        console.error('pdf 載入失敗',err);
      })
    },}
</script>
複製程式碼

4.2 展示

這時候我們可以通過滑動預覽pdf的內容,但是這種方式是一下子把pdf的內容都加載出來,頁數一多,瀏覽器直接卡在載入的狀態,體驗感太差,所以我們可以考慮按頁載入

5. pdf 按頁預覽

5.1 code

<template>
  <div>
    <el-button-group>
      <el-button type="primary" icon="el-icon-arrow-left" size="mini" @click="prePage">上一頁</el-button>
      <el-button type="primary" size="mini" @click="nextPage">下一頁<i class="el-icon-arrow-right el-icon--right"></i></el-button>
    </el-button-group>
    <div style="marginTop: 10px; color: #409EFF">{{ pageNum }} / {{ pageTotalNum }}</div>
    <pdf
      :page="pageNum"
      :src="url"
      @progress="loadedRatio = $event"
      @num-pages="pageTotalNum=$event" 
      ></pdf>
  </div>
</template>
複製程式碼

<script>
import pdf from 'vue-pdf'

export default {
  name: 'Pdf',components: {
    pdf,},data() {
    return {
      url: 'http://image.cache.timepack.cn/nodejs.pdf',pageNum: 1,pageTotalNum: 1,# 總頁數
      loadedRatio: 0,# 當前頁面的載入進度，範圍是0-1 ，等於1的時候代表當前頁已經完全載入完成了
    }
  },methods: {
    // 上一頁
    prePage() {
      let page = this.pageNum
      page = page > 1 ? page - 1 : this.pageTotalNum
      this.pageNum = page
    },// 下一頁
    nextPage() {
      let page = this.pageNum
      page = page < this.pageTotalNum ? page + 1 : 1
      this.pageNum = page
    }
  }
}
</script>
複製程式碼