vue項目中pdf預覽插件---vue-pdf 使用

vue-pdf就是pdf.js進行了進一步簡化封裝，參考github：https://github.com/FranckFreiburger/vue-pdf#readme

 

一、下載並引進需求

1.下載： npm install vue-pdf --save-dev

2.引進：import pdf from "vue-pdf";

 

二、使用

1.引進的時候是以組件的形式引入的，所以要在組件上掛載一下: components:{ pdf }

 

2.<pdf v-for="i in numPages" :key="i" :page="i" :src="url"></pdf>

numPages：引入的pdf總頁數

url：pdf的地址

注：如果不需要分頁，只顯示第一頁就可以不v-for和第三步也不需要了。

 

3.處理下總頁數和地址（因為要顯示全部頁數）

this.url = pdf.createLoadingTask(this.url);

this.url.then(pdf => { this.numPages = pdf.numPages; });

 

4.另一種分頁方式（上一頁、下一頁的形式）

三、補充：pdf預覽不顯示第三方電子簽章的問題

在node_modules文件夾下找到pdfjs-dist下的build文件夾下的pdf.worker.js

搜索Sig找到下圖的這一行代碼將它屏蔽掉即可