您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要介绍了怎么使用vue-pdf插件实现pdf文档预览功能的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇怎么使用vue-pdf插件实现pdf文档预览功能文章都会有所收获,下面我们一起来看看吧。
1.多个pdf预览
2.获取页码,每个pdf文档实现分页预览功能
实现步骤如下:
在根目录下输入一下命令:
npm i pdfjs-dist@2.5.207 --save npm i vue-pdf@4.2.0 --save
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.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-pdf插件实现pdf文档预览功能”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“怎么使用vue-pdf插件实现pdf文档预览功能”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。