admin管理员组文章数量:1648974
vue-pdf插件实现pdf文档预览
- `vue-pdf`插件的使用——基础积累
- 实现功能:1.多个pdf预览,2.获取页码,每个pdf文档实现分页预览功能
- 1.`npm`安装
- 2.全局注册或者局部注册(我这边是局部注册)——封装一个pdf预览组件
- 2.1 `template`组件内容如下:
- 2.2 `js`内容如下:
- 2.3 `css`内容如下:
- 3.pdf预览组件的使用
- 3.1 引入pdf预览组件
- 3.2 注册组件
- 3.3 组件的使用
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'},
]
感谢大家的支持!!!
版权声明:本文标题:vue-pdf插件实现pdf文档预览(自动分页预览)——基础积累 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1729504452a1203465.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论