快捷導(dǎo)航

vue 使用 vue-pdf 實(shí)現(xiàn)pdf在線預(yù)覽的示例代碼

更新時(shí)間：2020年04月26日 09:00:35 作者：韓數(shù)

這篇文章主要介紹了vue 使用 vue-pdf 實(shí)現(xiàn)pdf在線預(yù)覽的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

背景

之前的demo增加了圖片預(yù)覽，于是今天下午追完番劇就突然想到能不能把pdf在線預(yù)覽也做了，說干就干，剛開始查了很多教程，我發(fā)現(xiàn)很多人都在說什么pdf.js這個(gè)庫(kù)，這當(dāng)然沒什么問題，pdf.js的確可以非常完美的實(shí)現(xiàn)pdf在線預(yù)覽的過程，但是感覺這樣直接進(jìn)去有點(diǎn)不太優(yōu)雅，于是找找看看有沒有什么現(xiàn)成的組件，發(fā)現(xiàn)有vue-pdf這個(gè)組件，雖然說它沒有原生那樣強(qiáng)大，比如不支持pdf文字復(fù)制，打印會(huì)亂碼，但是我感覺已經(jīng)足以滿足我的需求了。本篇筆記循序漸進(jìn)，從基礎(chǔ)的demo，到一個(gè)可用的程度，文末列出了大家在實(shí)際使用的過程中可能會(huì)遇到的問題和解決方案。

安裝：

這個(gè)沒有啥背景知識(shí)可講，我們直接跳到安裝環(huán)節(jié)，vue-pdf 和其他vue組件的安裝并無(wú)不同，打開命令行，敲入:

npm install --save vue-pdf

注意路徑。別在桌面調(diào)出來個(gè)終端安裝了，這種直接打回去重學(xué)Vue。

vue-pdf 初體驗(yàn)：

安裝完之后，使用vue-pdf非常簡(jiǎn)單，和其他的組件并沒有什么不同，上代碼：

首先我們需要引入這個(gè)組件：

<script>
import pdf from 'vue-pdf'
export default {
 components:{
   pdf
 },
 data(){
   return {
     url:"http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf",
   }
 }
</script>

然后在頁(yè)面使用vue-pdf,只需要添加標(biāo)簽：

<template>
<div>
 <pdf 
  ref="pdf"
  :src="url">
 </pdf>
</div>
</template>

重啟你的項(xiàng)目，訪問這個(gè)界面，你大概率會(huì)發(fā)現(xiàn)pdf已經(jīng)成功顯示在你的界面上了。這沒有任何問題，但是，正當(dāng)你準(zhǔn)備拿起一根煙，點(diǎn)上，伴著舒適的《美麗的梭羅河》，欣賞你成功的杰作的時(shí)候，你會(huì)發(fā)現(xiàn)，我擦，為啥只有一頁(yè)，當(dāng)玻璃杯碰在一起，滿世界都是夢(mèng)破碎的聲音。

所以，這只是初體驗(yàn)，如果你的pdf只有一頁(yè)，這樣寫當(dāng)然沒什么問題，但是當(dāng)我們呢pdf 有很多頁(yè)的時(shí)候，你會(huì)發(fā)現(xiàn)，這行不通了。所以，接下來，我們來看看怎么讓它顯示多頁(yè)。

vue-pdf 漸入佳境：

其實(shí)，想要顯示多頁(yè)也沒那么復(fù)雜，你每次就顯示一頁(yè)，我，直接v-for 循環(huán)，直接顯示完，簡(jiǎn)單粗暴。

頁(yè)面代碼:

<template>
 <div>
 <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
 },
 data(){
  return{
    url: '',
    numPages:1,
  }
  },
 mounted: function() {
  this.getNumPages("http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf")
  
 }, 
 methods: {
  getNumPages(url) {
  var loadingTask = pdf.createLoadingTask(url)
  loadingTask.then(pdf => {
   this.url = loadingTask
   this.numPages = pdf.numPages
  }).catch((err) => {
   console.error('pdf加載失敗')
  })
  },
 }
 }
</script>

各個(gè)屬性：

url ：pdf 文件的路徑，可以是本地路徑，也可以是在線路徑。
numPages ： pdf 文件總頁(yè)數(shù)。

getNumPages 計(jì)算總頁(yè)數(shù)，順便給url和numPages賦值。

唯一需要大家注意的是這句：

this.getNumPages("http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf")

注意啊，這句不一定非要寫到mounted里面，你想寫哪就寫哪，比如你前端請(qǐng)求后端，后端返回一個(gè)pdf 的url，在那里寫就行，寫在你需要的地方。

vue-pdf 輕車熟路：

很多人看到這，就這，就這？萬(wàn)一，我pdf有一千頁(yè)，我瀏覽器還不得裂開，我追求的是那種在微醺的下午，一頁(yè)一頁(yè)的翻看的感覺，你能給我嗎？

我不能，才怪，保證滿足你。

<template>
 <div>
 <div class="tools">
  <bk-button :theme="'default'" type="submit" :title="'基礎(chǔ)按鈕'" @click.stop="prePage" class="mr10"> 上一頁(yè)</bk-button>
  <bk-button :theme="'default'" type="submit" :title="'基礎(chǔ)按鈕'" @click.stop="nextPage" class="mr10"> 下一頁(yè)</bk-button>
  <div class="page">{{pageNum}}/{{pageTotalNum}} </div>
  <bk-button :theme="'default'" type="submit" :title="'基礎(chǔ)按鈕'" @click.stop="clock" class="mr10"> 順時(shí)針</bk-button>
  <bk-button :theme="'default'" type="submit" :title="'基礎(chǔ)按鈕'" @click.stop="counterClock" class="mr10"> 逆時(shí)針</bk-button>
 </div>
 <pdf ref="pdf" 
 :src="url" 
 :page="pageNum"
 :rotate="pageRotate" 
 @progress="loadedRatio = $event"
 @page-loaded="pageLoaded($event)" 
 @num-pages="pageTotalNum=$event" 
 @error="pdfError($event)" 
 @link-clicked="page = $event">
 </pdf>
 </div>
</template>

接下來，我們一一介紹這些都是個(gè)啥。

參數(shù)介紹：

page: 當(dāng)前顯示的頁(yè)數(shù)，比如第一頁(yè)page=1
rotate ：旋轉(zhuǎn)角度，比如0就是不旋轉(zhuǎn)，+90，-90 就是水平旋轉(zhuǎn)。
progress ：當(dāng)前頁(yè)面的加載進(jìn)度，范圍是0-1 ，等于1的時(shí)候代表當(dāng)前頁(yè)已經(jīng)完全加載完成了。
page-loaded ：頁(yè)面加載成功的回調(diào)函數(shù)，不咋能用到。
num-pages ：總頁(yè)數(shù)
error ：加載錯(cuò)誤的回調(diào)
link-clicked：?jiǎn)螜C(jī)pdf內(nèi)的鏈接會(huì)觸發(fā)。

其他：

print 這個(gè)是打印函數(shù)。注意：谷歌瀏覽器會(huì)出現(xiàn)亂碼，這個(gè)和字體有關(guān)系。

來，js代碼走一個(gè):

<script>
 import pdf from 'vue-pdf'
 export default {
 name: 'Home',
 components: {
  pdf
 },
 data() {
  return {
  url: "http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf",
  pageNum: 1,
  pageTotalNum: 1,
  pageRotate: 0,
  // 加載進(jìn)度
  loadedRatio: 0,
  curPageNum: 0,
  }
 },
 mounted: function() {},
 methods: {
      // 上一頁(yè)函數(shù)，
  prePage() {
  var page = this.pageNum
  page = page > 1 ? page - 1 : this.pageTotalNum
  this.pageNum = page
  },
      // 下一頁(yè)函數(shù)
  nextPage() {
  var page = this.pageNum
  page = page < this.pageTotalNum ? page + 1 : 1
  this.pageNum = page
  },
      // 頁(yè)面順時(shí)針翻轉(zhuǎn)90度。
  clock() {
  this.pageRotate += 90
  },
      // 頁(yè)面逆時(shí)針翻轉(zhuǎn)90度。
  counterClock() {
  this.pageRotate -= 90
  },
      // 頁(yè)面加載回調(diào)函數(shù)，其中e為當(dāng)前頁(yè)數(shù)
  pageLoaded(e) {
  this.curPageNum = e
  },
      // 其他的一些回調(diào)函數(shù)。
  pdfError(error) {
  console.error(error)
  },
 }
 }
</script>

其他騷操作：

// 打印全部
pdfPrintAll() {
 this.$refs.pdf.print()
 },
// 打印指定部分
pdfPrint() {
 this.$refs.pdf.print(100, [1, 2])
 },

具體樣式什么的我就不貼出來了，這些都不是重點(diǎn)，完全可以改成自己喜歡的。

成品展示：

其他問題以及解決方案：

跨域問題：
網(wǎng)上用pdf.js 很多都會(huì)遇到跨域問題，這個(gè)我今天實(shí)際應(yīng)用到自己的項(xiàng)目里面了，由于我服務(wù)端設(shè)置了跨域，所以沒有出現(xiàn)跨域的問題，如果出現(xiàn)跨域需要修改你后端的請(qǐng)求頭。

打印界面字符亂碼：
這個(gè)我倒是碰到了，谷歌瀏覽器打印的時(shí)候，預(yù)覽界面真的變成了真·方塊字，全是方塊。這個(gè)問題是因?yàn)槟鉷df中使用了自定義字體導(dǎo)致的，具體解決方案如下：

首先，找到這個(gè)文件：node_modules/vue-pdf/src/pdfjsWrapper.js

然后根據(jù)github上這個(gè)issue，其中紅色的是要?jiǎng)h掉的，綠色的是要加上去的，照著改就可以解決了。

地址： https://github.com/FranckFreiburger/vue-pdf/pull/130/commits/253f6186ff0676abf9277786087dda8d95dd8ea7

根據(jù)我的實(shí)際測(cè)試，是可以解決打印亂碼的問題的。

到此這篇關(guān)于vue 使用 vue-pdf 實(shí)現(xiàn)pdf在線預(yù)覽的示例代碼的文章就介紹到這了,更多相關(guān)vue pdf在線預(yù)覽內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: