vue 使用路径预览PDF.js

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.为了保险起见,这有个压缩版的,也可以去注释掉 



最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。