vue 使用路徑預覽PDF.js

1.使用PDF.js預覽PDF

(1)下載文件?http://mozilla.github.io/pdf.js/getting_started/#download? ? 穩(wěn)定版就好


(2)? 下載后的文件格式


(3)因為PDF.js默認不跨域,所以想用路徑預覽的,首先要解決跨域問題,我這里是把這個文件放進Api服務(wù)器的路徑下,讓他不跨域。

(4)然后建一個vue頁面???let ht? 是你訪問 PDF.js中web -> viewer.html 的路徑 (在服務(wù)器中) 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.為了保險起見,這有個壓縮版的,也可以去注釋掉?



最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容