Vue-pdf實(shí)現(xiàn)在線預(yù)覽PDF文件
更新時(shí)間：2021年05月20日 08:38:48 作者：typ1805
這篇文章主要為大家詳細(xì)介紹了Vue-pdf實(shí)現(xiàn)在線預(yù)覽PDF文件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
前言
在大多數(shù)項(xiàng)目中都會(huì)遇到在線預(yù)覽PDF文件，項(xiàng)目使用的是element ui，使用vue-pdf實(shí)現(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的時(shí)候代表當(dāng)前頁已經(jīng)完全加載完成了。
- page-loaded ：頁面加載成功的回調(diào)函數(shù)，不咋能用到。
- num-pages ：總頁數(shù)
- error ：加載錯(cuò)誤的回調(diào)
- link-clicked：單機(jī)pdf內(nèi)的鏈接會(huì)觸發(fā)。
- print 這個(gè)是打印函數(shù)。 注意：谷歌瀏覽器會(huì)出現(xiàn)亂碼，這個(gè)和字體有關(guān)系。
實(shí)現(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;
})
會(huì)報(bào)錯(cuò) 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)文章
這篇文章主要介紹了vue中data和data()的區(qū)別說明，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
Vue3使用Proxy實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽的原因分析
在本篇文章里小編給大家整理的是一篇關(guān)于Vue3使用Proxy實(shí)現(xiàn)數(shù)據(jù)監(jiān)聽的原因分析內(nèi)容，有需要的朋友們可以跟著學(xué)習(xí)參考下。2021-11-11
小編給大家整理了關(guān)于vue移動(dòng)端日期選擇組件的知識(shí)點(diǎn)總結(jié)，希望能夠給讀者帶來幫助，一起學(xué)習(xí)參考下。2018-02-02
Vue-cli創(chuàng)建項(xiàng)目從單頁面到多頁面的方法
本篇文章主要介紹了Vue-cli創(chuàng)建項(xiàng)目從單頁面到多頁面的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
最近做項(xiàng)目遇到一個(gè)需求，需要制作一個(gè)定制化的日歷組件，本文主要介紹了從零寫vue日歷組件，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue實(shí)現(xiàn)點(diǎn)擊當(dāng)前標(biāo)簽高亮效果【推薦】
這篇文章主要介紹了vue實(shí)現(xiàn)點(diǎn)擊當(dāng)前標(biāo)簽高亮效果的思路詳解，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-06-06
vue中axios給后端傳遞參數(shù)出現(xiàn)等于號(hào)和雙引號(hào)的問題及解決方法
這篇文章主要介紹了vue中axios給后端傳遞參數(shù)出現(xiàn)等于號(hào)和雙引號(hào)要怎么解決,項(xiàng)目場景我是傳遞一個(gè)string字符給后端時(shí)候報(bào)錯(cuò)，隨手把這個(gè)問題記錄下來了，需要的朋友可以參考下解決方案2022-11-11
這篇文章主要介紹了vuex使用及持久化方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
這篇文章主要介紹了vuex5中的Pinia插件機(jī)制，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要為大家介紹了petite?vue的使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11