vue-pdf插件的使用——基础积累

使用vue-pdf插件实现如下效果图：

实现功能：1.多个pdf预览，2.获取页码，每个pdf文档实现分页预览功能

实现步骤如下：

1.npm安装

在根目录下输入一下命令:

npm i pdfjs-dist@2.5.207 --savenpm i vue-pdf@4.2.0 --save

2.全局注册或者局部注册（我这边是局部注册）——封装一个pdf预览组件

2.1template组件内容如下：

<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><pdfref="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.2js内容如下：

<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() {// 下载 pdfvar 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.3css内容如下：

<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'},]

感谢大家的支持！！！