怎么使用vue-pdf插件实现pdf文档预览功能

这篇文章主要介绍了怎么使用vue-pdf插件实现pdf文档预览功能的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇怎么使用vue-pdf插件实现pdf文档预览功能文章都会有所收获，下面我们一起来看看吧。

vue-pdf插件的使用

实现功能

• 1.多个pdf预览

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

实现步骤如下：

1.npm安装

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

npmipdfjs-dist@2.5.207--savenpmivue-pdf@4.2.0--save

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

2.1 template组件内容如下：

<template><divclass="pdf-preview"><divclass="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><spanclass="page">{{Numnow}}/{{NumA}}</span></div><divclass="fenye"><el-button@click="downPDF"class="mr10down">下载</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><divclass="tools"><divclass="fenye"><el-button@click="prePage"class="mr10">上一页</el-button><el-button@click="nextPage"class="mr10">下一页</el-button><spanclass="page">{{pageNum}}/{{pageTotalNum}}</span></div></div></div></template>

2.2 js内容如下：

<script>importpdffrom'vue-pdf';exportdefault{name:'pdfPreview',props:{url:{default:'',type:Array,},},&nbspponents:{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;varurl=this.url[this.Num].fileSrc;this.src=pdf.createLoadingTask(url);});},methods:{last(){this.Numnow--;this.Num--;varurl=this.url[this.Num].fileSrc;this.src=pdf.createLoadingTask(url);},next(){this.Numnow++;this.Num++;varurl=this.url[this.Num].fileSrc;this.src=pdf.createLoadingTask(url);},//上一页函数，prePage(){varpage=this.pageNum;page=page>1?page-1:this.pageTotalNum;this.pageNum=page;},//下一页函数nextPage(){varpage=this.pageNum;page=page<this.pageTotalNum?page+1:1;this.pageNum=page;},//页面加载回调函数，其中e为当前页数pageLoaded(e){this.curPageNum=e;},//抛出错误的回调函数。pdfError(error){console.error(error);},downPDF(){//下载pdfvarurl=this.url[this.Num].fileSrc;vartempLink=document.createElement('a');tempLink.style.display='none';//tempLink.href=url;window.open(url);tempLink.setAttribute('download','XXX.pdf');if(typeoftempLink.download==='undefined'){tempLink.setAttribute('target','_blank');}document.body.appendChild(tempLink);tempLink.click();document.body.removeChild(tempLink);},},};</script>

2.3 css内容如下：

<stylelang="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预览组件

importPdfPreviewfrom'@ponents/PdfPreview';//路径根据实际情况调整

3.2 注册组件

<pre ponents:{PdfPreview}

3.3 组件的使用

<PdfPreview:url="specificationFiles"></PdfPreview>

上面中的url的参数内容如下：

specificationFiles:[{fileName:'产品手册1',fileSrc:'xxxx'},{fileName:'产品手册2',fileSrc:'xxxx'},]

关于“怎么使用vue-pdf插件实现pdf文档预览功能”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“怎么使用vue-pdf插件实现pdf文档预览功能”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注主机评测网行业资讯频道。

上一篇：Python怎么使用shutil操作文件和subprocess运行子程序

下一篇：python自带help功能如何使用

---