Vue-pdf實現(xiàn)在線預覽PDF文件
更新時間：2021年05月20日 08:38:48 作者：typ1805
這篇文章主要為大家詳細介紹了Vue-pdf實現(xiàn)在線預覽PDF文件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
前言
在大多數(shù)項目中都會遇到在線預覽PDF文件，項目使用的是element ui，使用vue-pdf實現(xiàn)。
安裝依賴
npm install --save vue-pdf
相關參數(shù)
參數(shù)介紹：
- url ：pdf 文件的路徑，可以是本地路徑，也可以是在線路徑。
- 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)亂碼，這個和字體有關系。
實現(xiàn)
<template>
<div>
<el-row>
<el-button @click="onPreview" size="small">預覽</el-button>
</el-row>
<el-dialog title="預覽合同附件" :visible.sync="viewVisible" center width="60%" @close='closePreview'>
<el-row :gutter="20">
<span>共{{pageCount}}頁， 當前第 {{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>
效果
注意點
1、URL
url為文件地址路徑
this.src = pdf.createLoadingTask({
url: 'http://localhost:8082/file/demo.pdf',
});
2、設置請求頭
可以通過httpHeaders來設置token等參數(shù)
httpHeaders: {Authorization:'Bearer '+ this.token}
3、src
這點比較重要，網(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)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue中data和data()的區(qū)別說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
Vue3使用Proxy實現(xiàn)數(shù)據(jù)監(jiān)聽的原因分析
在本篇文章里小編給大家整理的是一篇關于Vue3使用Proxy實現(xiàn)數(shù)據(jù)監(jiān)聽的原因分析內(nèi)容，有需要的朋友們可以跟著學習參考下。2021-11-11
小編給大家整理了關于vue移動端日期選擇組件的知識點總結(jié)，希望能夠給讀者帶來幫助，一起學習參考下。2018-02-02
Vue-cli創(chuàng)建項目從單頁面到多頁面的方法
本篇文章主要介紹了Vue-cli創(chuàng)建項目從單頁面到多頁面的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
最近做項目遇到一個需求，需要制作一個定制化的日歷組件，本文主要介紹了從零寫vue日歷組件，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了vue實現(xiàn)點擊當前標簽高亮效果的思路詳解，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友參考下吧2018-06-06
vue中axios給后端傳遞參數(shù)出現(xiàn)等于號和雙引號的問題及解決方法
這篇文章主要介紹了vue中axios給后端傳遞參數(shù)出現(xiàn)等于號和雙引號要怎么解決,項目場景我是傳遞一個string字符給后端時候報錯，隨手把這個問題記錄下來了，需要的朋友可以參考下解決方案2022-11-11
這篇文章主要介紹了vuex使用及持久化方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了vuex5中的Pinia插件機制，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要為大家介紹了petite?vue的使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11