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

总结

作者:yehaocheng520原文地址:https://yehaocheng520.blog.csdn.net/article/details/127983220

%s 个评论

要回复文章请先登录注册