vue2.0如何借用vue-pdf實現(xiàn)在線預(yù)覽pdf文件

更新時間：2024年03月21日 11:31:03 作者：hyduan200

這篇文章主要介紹了vue2.0如何借用vue-pdf實現(xiàn)在線預(yù)覽pdf文件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

實現(xiàn)效果

pdf文件樣式

實現(xiàn)步驟

一：安裝依賴

npm i --save vue-pdf

二：頁面使用 vue文件中

<template>
  <div class="read">
    <van-nav-bar
      title="預(yù)覽"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="pdf" v-show="fileType === 'pdf'">
      <p class="arrow" style="text-align:center">
        <!-- // 上一頁 -->
        <van-tag color="#7232dd" plain @click="changePdfPage(0)">上一頁</van-tag>
        {{currentPage}} / {{pageCount}}
        <!-- // 下一頁 -->
        <van-tag color="#7232dd" @click="changePdfPage(1)">下一頁</van-tag>
      </p>
      <!--
      自己引入就可以使用,這里我的需求是做了分頁功能,如果不需要分頁功能,只要src就可以了
      src：需要展示的PDF地址
      currentPage：當(dāng)前展示的PDF頁碼
      PDF文件總頁碼
      一開始加載的頁面
      loadPdfHandler：加載事件
      -->
      <pdf
        :src="src"  
        :page="currentPage" 
        @num-pages="pageCount=$event" 
        @page-loaded="currentPage=$event" 
        @loaded="loadPdfHandler">
      </pdf>
    </div>
  </div>
</template>

js文件中

// 引入組件
import pdf from 'vue-pdf'
// 引入文件
import pdfUrl from './example.pdf'
export default {
  components: {
    pdf
  },
  data () {
    return {
      currentPage: 0, // pdf文件頁碼
      pageCount: 0, // pdf文件總頁數(shù)
      fileType: 'pdf', // 文件類型
      src: pdfUrl, // pdf文件地址
    }
  },
  created () {
   // 有時PDF文件地址會出現(xiàn)跨域的情況,這里最好處理一下
　　　this.src = pdf.createLoadingTask(this.src)
  },
   methods: {
   // 改變PDF頁碼,val傳過來區(qū)分上一頁下一頁的值,0上一頁,1下一頁
      changePdfPage (val) {
        // console.log(val)
        if (val === 0 && this.currentPage > 1) {
          this.currentPage--
          // console.log(this.currentPage)
        }
        if (val === 1 && this.currentPage < this.pageCount) {
          this.currentPage++
          // console.log(this.currentPage)
        }
      },
      // pdf加載時
      loadPdfHandler (e) {
        this.currentPage = 1 // 加載的時候先加載第一頁
      }
  }
}

三：可能問題

問題原因：

缺少解析pdf所需loader

問題解決：

1:下載依賴

file-loader：file-loader可以用來幫助webpack打包處理一系列的文件；
比如：.png 、 .jpg 、.jepg等格式的圖片，pdf格式的文件等等

npm install --save-dev file-loader
or
cnpm install --save-dev file-loader

2:配置vue.config.js文件

module.exports = {
	// webpack配置
	chainWebpack: config => { 
	  config.module
	  .rule('pdf')
	  .test(/\.pdf$/)
	  .use('file')
	    .loader('file-loader')
	    .end();
	}
}