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'},]
感谢大家的支持!!!