vue-pdf插件實現(xiàn)pdf文檔預覽方式(自動分頁預覽)
更新時間：2023年03月27日 09:20:52 作者：yehaocheng520
這篇文章主要介紹了vue-pdf插件實現(xiàn)pdf文檔預覽方式(自動分頁預覽)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue-pdf插件的使用
使用vue-pdf插件實現(xiàn)如下效果圖：
實現(xiàn)功能
- 1.多個pdf預覽
- 2.獲取頁碼，每個pdf文檔實現(xiàn)分頁預覽功能
實現(xiàn)步驟如下：
1.npm安裝
在根目錄下輸入一下命令：
npm i pdfjs-dist@2.5.207 --save npm i vue-pdf@4.2.0 --save
2.全局注冊或者局部注冊(我這邊是局部注冊)——封裝一個pdf預覽組件
2.1 template組件內(nèi)容如下：
<template>
<div class="pdf-preview">
<div class="head">
<div>
<el-button @click="last" class="mr10" :disabled="Num == 0">
上一個</el-button
>
<el-button @click="next" class="mr10" :disabled="Num == url.length - 1">
下一個</el-button
>
<span class="page">{{ Numnow }}/{{ NumA }}</span>
</div>
<div class="fenye">
<el-button @click="downPDF" class="mr10 down">下載</el-button>
</div>
</div>
<pdf
ref="pdf"
:src="src"
:page="pageNum"
@page-loaded="pageLoaded($event)"
@num-pages="pageTotalNum = $event"
@error="pdfError($event)"
@link-clicked="page = $event"
>
</pdf>
<div class="tools">
<div class="fenye">
<el-button @click="prePage" class="mr10"> 上一頁</el-button>
<el-button @click="nextPage" class="mr10"> 下一頁</el-button>
<span class="page">{{ pageNum }}/{{ pageTotalNum }}</span>
</div>
</div>
</div>
</template>
2.2 js內(nèi)容如下：
<script>
import pdf from 'vue-pdf';
export default {
name: 'pdfPreview',
props: {
url: {
default: '',
type: Array,
},
},
components: {
pdf,
},
data() {
return {
src: '', // 預覽地址
pageNum: 1, // 當前頁碼
pageTotalNum: 1, // 總頁數(shù)
Num: 0,
NumA: 0, //總個數(shù)
Numnow: 1, //當前個數(shù)
vuePdf: null,
};
},
mounted() {
// 有時PDF文件地址會出現(xiàn)跨域的情況,這里最好處理一下
this.$nextTick(() => {
this.NumA = this.url.length;
var url = this.url[this.Num].fileSrc;
this.src = pdf.createLoadingTask(url);
});
},
methods: {
last() {
this.Numnow--;
this.Num--;
var url = this.url[this.Num].fileSrc;
this.src = pdf.createLoadingTask(url);
},
next() {
this.Numnow++;
this.Num++;
var url = this.url[this.Num].fileSrc;
this.src = pdf.createLoadingTask(url);
},
// 上一頁函數(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;
},
// 頁面加載回調(diào)函數(shù)，其中e為當前頁數(shù)
pageLoaded(e) {
this.curPageNum = e;
},
// 拋出錯誤的回調(diào)函數(shù)。
pdfError(error) {
console.error(error);
},
downPDF() {
// 下載 pdf
var url = this.url[this.Num].fileSrc;
var tempLink = document.createElement('a');
tempLink.style.display = 'none';
// tempLink.href = url;
window.open(url);
tempLink.setAttribute('download', 'XXX.pdf');
if (typeof tempLink.download === 'undefined') {
tempLink.setAttribute('target', '_blank');
}
document.body.appendChild(tempLink);
tempLink.click();
document.body.removeChild(tempLink);
},
},
};
</script>
2.3 css內(nèi)容如下：
<style lang="scss" scoped>
.pdf-preview {
.head {
margin-bottom: 10px;
display: flex;
justify-content: space-between;
}
.tools {
display: flex;
justify-content: space-between;
.fenye {
margin-top: 20px;
}
}
.page {
margin-left: 10px;
}
}
</style>
3.pdf預覽組件的使用
3.1 引入pdf預覽組件
import PdfPreview from '@/components/PdfPreview';//路徑根據(jù)實際情況調(diào)整
3.2 注冊組件
components: {PdfPreview}3.3 組件的使用
<PdfPreview :url="specificationFiles"></PdfPreview>
上面中的url的參數(shù)內(nèi)容如下：
specificationFiles:[
{fileName:'產(chǎn)品手冊1',fileSrc:'xxxx'},
{fileName:'產(chǎn)品手冊2',fileSrc:'xxxx'},
]
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了Vue.js仿微信聊天窗口展示組件功能,需要的朋友可以參考下2017-08-08
現(xiàn)在vue項目基本上都是使用axios進行請求操作,下面這篇文章主要給大家介紹了關(guān)于Vue與Axios的傳參方式的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-08-08
這篇文章主要介紹了Antd下拉選擇,自動匹配功能的實現(xiàn)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue3中直接對reactive聲明的變量本身進行賦值是無效的,本文主要介紹了vue3的reactive賦值問題解決,具有一定的參考價值,感興趣的可以了解一下2024-03-03
本文通過一段簡單的代碼給大家介紹了基于純vue實現(xiàn)側(cè)邊菜單欄手風琴效果，代碼很簡單，感興趣的朋友跟隨腳本之家小編一起看看吧2018-05-05
這篇文章主要介紹了Vue中引入使用patch-package為依賴打補丁問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
vue-cli webpack模板項目搭建及打包時路徑問題的解決方法
這篇文章主要介紹了vue-cli webpack模板項目搭建以及打包時路徑問題的解決方法,需要的朋友可以參考下2018-02-02
這篇文章主要介紹了Vue中key的原理以及diff算法,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-04-04
vue3中使用@vueuse/core中的圖片懶加載案例詳解
這篇文章主要介紹了vue3中使用@vueuse/core中的圖片懶加載案例,本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2023-03-03
這篇文章主要為大家詳細介紹了Vue3中使用dataV報錯問題的解決方法,文中的示例代碼講解詳細,具有一定的學習價值,感興趣的小伙伴可以跟隨小編一起學習一下2023-11-11