vue-pdf
vue-pdf的安装
支持兼容到 IE11
npm install --save vue-pdf@4.2.0
封装组件
由于该组件在我开发的项目中使用的地方比较多,是一个通用型组件,所以这里对它进行封装;
注意:本项目使用的UI库是element UI
pdfPreview.vue
代码如下:
<!--
@anthor: mrdeng Lei,
@description: pdf文件在线预览--本地开发预览在线文件会出现跨域问题,需要将浏览器配置跨域处理即可,发布到线上后跨域问题就不会存在了,目前该版本兼容谷歌,火狐,IE11等现代浏览器
@date: 2021/1/1,
@remark:
-->
<!--
引用示例:
<pdfPreview :pdfUrl="pdfUrl" :doctype="docType" ref="pdf" />
pdfUrl:pdf在线地址 例如:http://125.35.91.158:8099/group1/M00/02/AF/wKgAplxrloqAdR6NAAcOcVILFv0518.pdf
s
doctype(String):文件类型 默认pdf
-->
<template>
<div class="pre_lump" v-if="dialogVisible">
<div class="choice_box">
<div class="clearfix top_tips">
<p class="fl tips">预览</p>
<p @click="Visible()" class="close fr">
<i class="el-icon-close"></i>
</p>
</div>
<div class="form-data">
<div class="pdf" id="example">
<pdf
ref="pdf"
v-if="pdfSrc"
:src="pdfSrc"
:page="currentPage"
@num-pages="pageCount = $event"
@page-loaded="currentPage = $event"
@loaded="loadPdfHandler"
>
</pdf>
</div>
</div>
<div class="pagination">
<p class="arrow2" v-if="pdfSrc">
<el-button
type="primary"
size="mini"
@click="changePdfPage(0)"
:disabled="currentPage == 1"
>上一页</el-button
>
{{ currentPage }} / {{ pageCount }}
<el-button
type="primary"
size="mini"
@click="changePdfPage(1)"
:disabled="currentPage == pageCount"
>下一页</el-button
>
</p>
</div>
<div class="bot_bottom_bot">
<el-button size="small" type="primary" @click="dialogVisible = false"
>返回</el-button
>
</div>
</div>
</div>
</template>
<script>
import pdf from "vue-pdf";
export default {
name: "pdfPreview",
components: {
pdf
},
props: {
// pdf地址
pdfUrl: {
type: String,
default: "http://125.35.91.158:8099/group1/M00/02/AF/wKgAplxrloqAdR6NAAcOcVILFv0518.pdf"
},
// 文件类型
doctype: {
type: String,
default: "pdf"
}
},
data() {
return {
dialogVisible: false,
typeValue: "", //文件类型
pdfSrc: "",
currentPage: 0, // pdf文件页码
pageCount: 0, // pdf文件总页数
numPages: 1,
activeIndex: 0,
acceptFileType: ["pdf"]
};
},
watch: {
pdfUrl(val) {
console.log("pdfSrc", val);
this.pdfSrc = val;
},
doctype(typeval) {
if (!this.acceptFileType.includes(typeval)) {
this.$message.error(`只能预览${this.acceptFileType[0]}类型的文件`);
return false;
}
this.typeValue = typeval;
}
},
mounted() {
this.pdfSrc = "";
this.pdfSrc = this.pdfUrl;
},
methods: {
Visible() {
this.dialogVisible = !this.dialogVisible;
},
// 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
changePdfPage(val) {
if (val === 0 && this.currentPage > 1) {
this.currentPage--;
}
if (val === 1 && this.currentPage < this.pageCount) {
this.currentPage++;
}
},
// pdf加载时
loadPdfHandler(e) {
this.currentPage = 1; // 加载的时候先加载第一页
}
}
};
</script>
<style lang="scss" scoped>
/* 弹窗的外层样式 */
.pre_lump {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.6);
z-index: 1111;
}
.pre_lump .choice_box {
position: absolute;
width: 60%;
min-width: 850px;
height: 90%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #ffffff;
border-radius: 2px;
}
#example {
width: 100%;
height: 100%;
}
.top_tips {
margin: 0 20px;
height: 54px;
line-height: 54px;
border-bottom: 1px solid rgb(233, 233, 233);
}
.top_tips .tips {
font-size: 18px;
font-weight: 500;
color: #333333;
}
.top_tips i {
font-size: 18px;
color: #333333;
}
.bot_bottom_bot {
position: absolute;
right: 2%;
bottom: 3%;
border-top: 1px solid rgb(233, 233, 233);
}
.form-data {
width: 100%;
padding: 0 20px;
box-sizing: border-box;
height: calc(90% - 60px);
margin: 15px auto;
overflow-y: auto;
}
.pagination {
position: absolute;
left: 50%;
bottom: 10%;
transform: translate(-50%, 0%);
}
.pagination .arrow2 span {
cursor: pointer;
display: inline-block;
background-color: #e53935;
color: #fff;
padding: 4px 6px;
font-size: 12px;
border-radius: 6px;
}
.close {
width: 34px;
height: 34px;
margin: 10px 0;
display: flex;
cursor: pointer;
align-items: center;
justify-content: center;
}
.close .el-icon-close {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.el-icon-close:hover {
color: red;
background-color: #f0f0f0;
border-radius: 50%;
}
</style>
自己的页面中引用
<template>
<div class="hello">
<pdfPreview :pdfUrl="pdfUrl" doctype="pdf" ref="pdf" />
<el-link
class="link"
type="success"
@click="preview('http://125.35.91.158:8099/group1/M00/02/AF/wKgAplxrloqAdR6NAAcOcVILFv0518.pdf') "
>预览
</el-link>
</div>
</template>
<script>
import pdfPreview from "@/components/pdfPreview";
export default {
name: 'HelloWorld',
components: {
pdfPreview
},
data () {
return {
pdfUrl: "http://125.35.91.158:8099/group1/M00/02/AF/wKgAplxrloqAdR6NAAcOcVILFv0518.pdf", //预览url
}
},
mounted(){
},
methods:{
// 预览
preview(url) {
this.pdfUrl= url;
this.$refs.pdf.Visible();
},
}
}
</script>
如果有电子签章 是显示不出来的
需要改动源码 注释掉type判断
效果如下 这样章就出现了~~~
本文参考:https://www.cnblogs.com/chen-yi-yi/p/11504861.html