vue-pdf插件實現pdf文檔預覽方式(自動分頁預覽)
更新時間：2023年03月27日 09:20:52 作者：yehaocheng520
這篇文章主要介紹了vue-pdf插件實現pdf文檔預覽方式(自動分頁預覽)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue-pdf插件的使用
使用vue-pdf插件實現如下效果圖：
實現功能
- 1.多個pdf預覽
- 2.獲取頁碼，每個pdf文檔實現分頁預覽功能
實現步驟如下：
1.npm安裝
在根目錄下輸入一下命令：
npm i pdfjs-dist@2.5.207 --save npm i vue-pdf@4.2.0 --save
2.全局注冊或者局部注冊(我這邊是局部注冊)——封裝一個pdf預覽組件
2.1 template組件內容如下：
<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內容如下：
<script>
import pdf from 'vue-pdf';
export default {
name: 'pdfPreview',
props: {
url: {
default: '',
type: Array,
},
},
components: {
pdf,
},
data() {
return {
src: '', // 預覽地址
pageNum: 1, // 當前頁碼
pageTotalNum: 1, // 總頁數
Num: 0,
NumA: 0, //總個數
Numnow: 1, //當前個數
vuePdf: null,
};
},
mounted() {
// 有時PDF文件地址會出現跨域的情況,這里最好處理一下
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);
},
// 上一頁函數，
prePage() {
var page = this.pageNum;
page = page > 1 ? page - 1 : this.pageTotalNum;
this.pageNum = page;
},
// 下一頁函數
nextPage() {
var page = this.pageNum;
page = page < this.pageTotalNum ? page + 1 : 1;
this.pageNum = page;
},
// 頁面加載回調函數，其中e為當前頁數
pageLoaded(e) {
this.curPageNum = e;
},
// 拋出錯誤的回調函數。
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內容如下：
<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';//路徑根據實際情況調整
3.2 注冊組件
components: {PdfPreview}3.3 組件的使用
<PdfPreview :url="specificationFiles"></PdfPreview>
上面中的url的參數內容如下：
specificationFiles:[
{fileName:'產品手冊1',fileSrc:'xxxx'},
{fileName:'產品手冊2',fileSrc:'xxxx'},
]
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
今天小編就為大家分享一篇vue-cli webpack 引入swiper的操作方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要為大家詳細介紹了vue實現經典選項卡功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
這篇文章主要介紹了vue input框的禁用和可輸入問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue實現輸入框的模糊查詢的示例代碼（節(jié)流函數的應用場景）
這篇文章主要介紹了vue實現輸入框的模糊查詢的示例代碼（節(jié)流函數的應用場景），文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-09-09
這篇文章主要為大家詳細介紹了Vue實現根據hash高亮選項卡，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
下面小編就為大家分享一篇解決vue中對象屬性改變視圖不更新的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
這篇文章主要介紹了VUE+Canvas實現財神爺接元寶小游戲,需要的朋友可以參考下本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧2021-04-04
這篇文章主要介紹了vue中實現點擊空白區(qū)域關閉彈窗的兩種方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
詳解從Vue.js源碼看異步更新DOM策略及nextTick
本篇文章主要介紹了從Vue.js源碼看異步更新DOM策略及nextTick，具有一定的參考價值，感興趣的小伙伴們可以參考一2017-10-10
vue3中emit('update:modelValue')使用簡單示例
這篇文章主要給大家介紹了關于vue3中emit('update:modelValue')使用的相關資料,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2022-09-09