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

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

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

實(shí)現(xiàn)效果

pdf文件樣式

實(shí)現(xiàn)步驟

一：安裝依賴(lài)

npm i --save vue-pdf

二：頁(yè)面使用 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">
        <!-- // 上一頁(yè) -->
        <van-tag color="#7232dd" plain @click="changePdfPage(0)">上一頁(yè)</van-tag>
        {{currentPage}} / {{pageCount}}
        <!-- // 下一頁(yè) -->
        <van-tag color="#7232dd" @click="changePdfPage(1)">下一頁(yè)</van-tag>
      </p>
      <!--
      自己引入就可以使用,這里我的需求是做了分頁(yè)功能,如果不需要分頁(yè)功能,只要src就可以了
      src：需要展示的PDF地址
      currentPage：當(dāng)前展示的PDF頁(yè)碼
      PDF文件總頁(yè)碼
      一開(kāi)始加載的頁(yè)面
      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文件頁(yè)碼
      pageCount: 0, // pdf文件總頁(yè)數(shù)
      fileType: 'pdf', // 文件類(lèi)型
      src: pdfUrl, // pdf文件地址
    }
  },
  created () {
   // 有時(shí)PDF文件地址會(huì)出現(xiàn)跨域的情況,這里最好處理一下
　　　this.src = pdf.createLoadingTask(this.src)
  },
   methods: {
   // 改變PDF頁(yè)碼,val傳過(guò)來(lái)區(qū)分上一頁(yè)下一頁(yè)的值,0上一頁(yè),1下一頁(yè)
      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加載時(shí)
      loadPdfHandler (e) {
        this.currentPage = 1 // 加載的時(shí)候先加載第一頁(yè)
      }
  }
}

三：可能問(wèn)題

問(wèn)題原因：

缺少解析pdf所需loader

問(wèn)題解決：

1:下載依賴(lài)

file-loader：file-loader可以用來(lái)幫助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();
	}
}