1.使用PDF.js预览PDF
(1)下载文件 http://mozilla.github.io/pdf.js/getting_started/#download 稳定版就好
(2) 下载后的文件格式
(3)因为PDF.js默认不跨域,所以想用路径预览的,首先要解决跨域问题,我这里是把这个文件放进Api服务器的路径下,让他不跨域。
(4)然后建一个vue页面 let ht 是你访问 PDF.js中web -> viewer.html 的路径 (在服务器中) let op 是你要预览PDF的路径,这里用encodeURIComponent处理下
<template>
<div class="Tem">
<iframe :src="pdfUrl" frameborder="0" style="width: 100%; height: 100%"></iframe>
</div>
</template>
<script>
export default {
data(){
return {
pdfUrl:''
}
},
created() {
let ht = ''
let op = ''
this.pdfUrl = ht+'?file='+ encodeURIComponent(op)
},
mounted(){
},
methods:{
},
}
</script>
<style scoped lang="scss">
.Tem{
width: 100%;
height: 100%;
}
</style>
(5)到这一步基本就能看到效果了,这里有个坑,因为源码中,会自动过滤一下电子签章,硬章之类的,所以想要显示这些的同学
a.找到PDF.JS --> build --> pdf.worker.js
注释掉代码中这个判断,不同版本可能判断条件不同,但大致条件都差不多
if (data.fieldType === 'Sig') {
_this2.setFlags(_util.AnnotationFlag.HIDDEN);
}
b.为了保险起见,这有个压缩版的,也可以去注释掉