Vue-pdf實現(xiàn)在線預(yù)覽PDF文件
更新時間：2021年05月20日 08:38:48 作者：typ1805
這篇文章主要為大家詳細(xì)介紹了Vue-pdf實現(xiàn)在線預(yù)覽PDF文件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
前言
在大多數(shù)項目中都會遇到在線預(yù)覽PDF文件，項目使用的是element ui，使用vue-pdf實現(xiàn)。
安裝依賴
npm install --save vue-pdf
相關(guān)參數(shù)
參數(shù)介紹：
- url ：pdf 文件的路徑，可以是本地路徑，也可以是在線路徑。
- page: 當(dāng)前顯示的頁數(shù)，比如第一頁page=1
- rotate ： 旋轉(zhuǎn)角度，比如0就是不旋轉(zhuǎn)，+90，-90 就是水平旋轉(zhuǎn)。
- progress ：當(dāng)前頁面的加載進(jìn)度，范圍是0-1 ，等于1的時候代表當(dāng)前頁已經(jīng)完全加載完成了。
- page-loaded ：頁面加載成功的回調(diào)函數(shù)，不咋能用到。
- num-pages ：總頁數(shù)
- error ：加載錯誤的回調(diào)
- link-clicked：單機(jī)pdf內(nèi)的鏈接會觸發(fā)。
- print 這個是打印函數(shù)。 注意：谷歌瀏覽器會出現(xiàn)亂碼，這個和字體有關(guān)系。
實現(xiàn)
<template>
<div>
<el-row>
<el-button @click="onPreview" size="small">預(yù)覽</el-button>
</el-row>
<el-dialog title="預(yù)覽合同附件" :visible.sync="viewVisible" center width="60%" @close='closePreview'>
<el-row :gutter="20">
<span>共{{pageCount}}頁， 當(dāng)前第 {{pdfPage}} 頁 </span>
<el-button type="text" size="mini" @click.stop="previousPage">上一頁</el-button>
<el-button type="text" size="mini" @click.stop="nextPage">下一頁</el-button>
</el-row>
<div>
<pdf :src="src" :page="pdfPage" @num-pages="pageCount = $event" @page-loaded="pdfPage = $event" style="display: inline-block; width: 100%"></pdf>
</div>
</el-dialog>
</div>
</template>
<script>
import pdf from 'vue-pdf'
import store from '@/store/'
export default {
components:{
pdf
},
data(){
return {
viewVisible: false,
src: null,
pdfPage : 1,
pageCount: 0,
token: store.getters.access_token,
}
},
methods:{
onPreview(){
this.src = pdf.createLoadingTask({
url: 'http://localhost:8082/file/demo.pdf',
httpHeaders: {Authorization:'Bearer '+ this.token}
});
this.src.promise.then(pdf => {
this.viewVisible = true;
});
},
closePreview(){
this.pdfPage = 1;
},
previousPage(){
let p = this.pdfPage
p = p > 1 ? p-1 : this.pageCount
this.pdfPage = p
},
nextPage(){
let p = this.pdfPage
p = p < this.pageCount ? p+1 : 1
this.pdfPage = p
}
}
}
</script>
效果
注意點(diǎn)
1、URL
url為文件地址路徑
this.src = pdf.createLoadingTask({
url: 'http://localhost:8082/file/demo.pdf',
});
2、設(shè)置請求頭
可以通過httpHeaders來設(shè)置token等參數(shù)
httpHeaders: {Authorization:'Bearer '+ this.token}
3、src
這點(diǎn)比較重要，網(wǎng)上很多帖子都是這樣的
this.src.then(pdf => {
this.viewVisible = true;
})
會報錯 TypeError: this.src.then is not a function
TypeError: this.src.then is not a function
at VueComponent.onPreview (index.vue?6ced:241)
at click (index.vue?aaff:261)
at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
at VueComponent.invoker (vue.runtime.esm.js?2b0e:2179)
at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
at VueComponent.Vue.$emit (vue.runtime.esm.js?2b0e:3888)
at VueComponent.handleClick (element-ui.common.js?5c96:9413)
at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
at HTMLButtonElement.invoker (vue.runtime.esm.js?2b0e:2179)
at HTMLButtonElement.original._wrapper (vue.runtime.esm.js?2b0e:6917)
正確的是這樣的
this.src.promise.then(pdf => {
this.viewVisible = true;
});
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vuex 使用 v-model 配合 state的方法，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11
這篇文章主要介紹了vue中組件如何使用vue-quill-editor問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
vue-router路由跳轉(zhuǎn)問題 replace
這篇文章主要介紹了vue-router路由跳轉(zhuǎn)問題 replace，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了基于Vue.js的移動組件庫cube-ui，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)動態(tài)進(jìn)度條效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
關(guān)于vue跳轉(zhuǎn)后頁面置頂?shù)膯栴}
這篇文章主要介紹了關(guān)于vue跳轉(zhuǎn)后頁面置頂?shù)膯栴}，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05
今天小編就為大家分享一篇vue加載完成后的回調(diào)函數(shù)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue.js 實現(xiàn)微信公眾號菜單編輯器功能(一)
最近vue.js 非?；馃幔【幰渤脵C(jī)學(xué)習(xí)了下vuejs的一些基礎(chǔ)知識，于是嘗試做一個像微信平臺里的菜單編輯器功能，下面腳本之家小編把vue.js 微信公眾號菜單編輯器功能的實現(xiàn)代碼分享給大家，需要的朋友參考下2018-05-05
vue如何使用el-table遍歷循環(huán)表頭和表體數(shù)據(jù)
這篇文章主要介紹了vue如何使用el-table遍歷循環(huán)表頭和表體數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue中使用Ueditor的方法，本文通過實例給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08