vue 使用 vue-pdf 實現(xiàn)pdf在線預(yù)覽的示例代碼
背景
之前的demo增加了圖片預(yù)覽，于是今天下午追完番劇就突然想到能不能把pdf在線預(yù)覽也做了，說干就干，剛開始查了很多教程，我發(fā)現(xiàn)很多人都在說什么pdf.js這個庫，這當然沒什么問題，pdf.js的確可以非常完美的實現(xiàn)pdf在線預(yù)覽的過程，但是感覺這樣直接進去有點不太優(yōu)雅，于是找找看看有沒有什么現(xiàn)成的組件，發(fā)現(xiàn)有vue-pdf這個組件，雖然說它沒有原生那樣強大，比如不支持pdf文字復(fù)制，打印會亂碼，但是我感覺已經(jīng)足以滿足我的需求了。本篇筆記循序漸進，從基礎(chǔ)的demo，到一個可用的程度，文末列出了大家在實際使用的過程中可能會遇到的問題和解決方案。
安裝：
這個沒有啥背景知識可講，我們直接跳到安裝環(huán)節(jié)，vue-pdf 和其他vue組件的安裝并無不同，打開命令行，敲入:
npm install --save vue-pdf
注意路徑。別在桌面調(diào)出來個終端安裝了，這種直接打回去重學Vue。
vue-pdf 初體驗：
安裝完之后，使用vue-pdf非常簡單，和其他的組件并沒有什么不同，上代碼：
首先我們需要引入這個組件：
<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>
然后在頁面使用vue-pdf,只需要添加標簽：
<template> <div> <pdf ref="pdf" :src="url"> </pdf> </div> </template>
重啟你的項目，訪問這個界面，你大概率會發(fā)現(xiàn)pdf已經(jīng)成功顯示在你的界面上了。這沒有任何問題，但是，正當你準備拿起一根煙，點上，伴著舒適的《美麗的梭羅河》，欣賞你成功的杰作的時候，你會發(fā)現(xiàn)，我擦，為啥只有一頁，當玻璃杯碰在一起，滿世界都是夢破碎的聲音。
所以，這只是初體驗，如果你的pdf只有一頁，這樣寫當然沒什么問題，但是當我們呢pdf 有很多頁的時候，你會發(fā)現(xiàn)，這行不通了。所以，接下來，我們來看看怎么讓它顯示多頁。
vue-pdf 漸入佳境：
其實，想要顯示多頁也沒那么復(fù)雜，你每次就顯示一頁，我，直接v-for 循環(huán)，直接顯示完，簡單粗暴。
頁面代碼:
<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>
各個屬性：
- url ：pdf 文件的路徑，可以是本地路徑，也可以是在線路徑。
- numPages ： pdf 文件總頁數(shù)。
getNumPages 計算總頁數(shù)，順便給url和numPages賦值。
唯一需要大家注意的是這句：
this.getNumPages("http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf")
注意啊，這句不一定非要寫到mounted里面，你想寫哪就寫哪，比如你前端請求后端，后端返回一個pdf 的url，在那里寫就行，寫在你需要的地方。
vue-pdf 輕車熟路：
很多人看到這，就這，就這？萬一，我pdf有一千頁，我瀏覽器還不得裂開，我追求的是那種在微醺的下午，一頁一頁的翻看的感覺，你能給我嗎？
我不能，才怪，保證滿足你。
<template>
<div>
<div class="tools">
<bk-button :theme="'default'" type="submit" :title="'基礎(chǔ)按鈕'" @click.stop="prePage" class="mr10"> 上一頁</bk-button>
<bk-button :theme="'default'" type="submit" :title="'基礎(chǔ)按鈕'" @click.stop="nextPage" class="mr10"> 下一頁</bk-button>
<div class="page">{{pageNum}}/{{pageTotalNum}} </div>
<bk-button :theme="'default'" type="submit" :title="'基礎(chǔ)按鈕'" @click.stop="clock" class="mr10"> 順時針</bk-button>
<bk-button :theme="'default'" type="submit" :title="'基礎(chǔ)按鈕'" @click.stop="counterClock" class="mr10"> 逆時針</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>
接下來，我們一一介紹這些都是個啥。
參數(shù)介紹：
- page: 當前顯示的頁數(shù)，比如第一頁page=1
- rotate ： 旋轉(zhuǎn)角度，比如0就是不旋轉(zhuǎn)，+90，-90 就是水平旋轉(zhuǎn)。
- progress ：當前頁面的加載進度，范圍是0-1 ，等于1的時候代表當前頁已經(jīng)完全加載完成了。
- page-loaded ：頁面加載成功的回調(diào)函數(shù)，不咋能用到。
- num-pages ：總頁數(shù)
- error ：加載錯誤的回調(diào)
- link-clicked：單機pdf內(nèi)的鏈接會觸發(fā)。
其他：
- print 這個是打印函數(shù)。 注意：谷歌瀏覽器會出現(xiàn)亂碼，這個和字體有關(guān)系。
來，js代碼走一個:
<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,
// 加載進度
loadedRatio: 0,
curPageNum: 0,
}
},
mounted: function() {},
methods: {
// 上一頁函數(shù)，
prePage() {
var page = this.pageNum
page = page > 1 ? page - 1 : this.pageTotalNum
this.pageNum = page
},
// 下一頁函數(shù)
nextPage() {
var page = this.pageNum
page = page < this.pageTotalNum ? page + 1 : 1
this.pageNum = page
},
// 頁面順時針翻轉(zhuǎn)90度。
clock() {
this.pageRotate += 90
},
// 頁面逆時針翻轉(zhuǎn)90度。
counterClock() {
this.pageRotate -= 90
},
// 頁面加載回調(diào)函數(shù)，其中e為當前頁數(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])
},
具體樣式什么的我就不貼出來了，這些都不是重點，完全可以改成自己喜歡的。
成品展示：
其他問題以及解決方案：
跨域問題：
網(wǎng)上用pdf.js 很多都會遇到跨域問題，這個我今天實際應(yīng)用到自己的項目里面了，由于我服務(wù)端設(shè)置了跨域，所以沒有出現(xiàn)跨域的問題，如果出現(xiàn)跨域需要修改你后端的請求頭。
打印界面字符亂碼：
這個我倒是碰到了，谷歌瀏覽器打印的時候，預(yù)覽界面真的變成了 真·方塊字 ，全是方塊。這個問題是因為你pdf中使用了自定義字體導(dǎo)致的，具體解決方案如下：
首先，找到這個文件：node_modules/vue-pdf/src/pdfjsWrapper.js
然后根據(jù)github上這個issue，其中紅色的是要刪掉的，綠色的是要加上去的，照著改就可以解決了。
根據(jù)我的實際測試，是可以解決打印亂碼的問題的。
到此這篇關(guān)于vue 使用 vue-pdf 實現(xiàn)pdf在線預(yù)覽的示例代碼的文章就介紹到這了,更多相關(guān)vue pdf在線預(yù)覽內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue項目搭建以及全家桶的使用詳細教程(小結(jié))，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要介紹了vue echarts實現(xiàn)綁定事件和解綁事件方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
vue3中echarts的tooltip組件不顯示問題及解決
這篇文章主要介紹了vue3中echarts的tooltip組件不顯示問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,適合用于構(gòu)建單頁面應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于vue中vue-router安裝與配置方法的相關(guān)資料,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue-cli3配置與跨域處理方法，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
Vue如何獲取new Date().getTime()時間戳
在Web開發(fā)中,前端使用Vue.js獲取的是毫秒級時間戳,而PHP后端則是秒級時間戳,處理此類問題時,需要將PHP的時間戳乘以1000轉(zhuǎn)換為毫秒級,以保證數(shù)據(jù)的一致性和正確的邏輯判斷2024-10-10
這篇文章主要為大家詳細介紹了Vue3自定義drag指令的相關(guān)知識,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以跟隨小編一起學習一下2023-12-12
這篇文章主要為大家詳細介紹了vue實現(xiàn)分頁欄效果，分頁欄設(shè)計的步驟與實現(xiàn)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-06-06
頁面在鼠標懸停(不動)n秒之后,頁面進行相應(yīng)的事件,下面這篇文章主要給大家介紹了關(guān)于vue鼠標懸停事件監(jiān)聽的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-09-09
vue3項目中配置sass,vite報錯Undefined mixin問題
這篇文章主要介紹了vue3項目中配置sass,vite報錯Undefined mixin問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02