vue文件流轉換成pdf預覽(pdf.js+iframe)

參考文檔：https://www.jianshu.com/p/242525315bf6

PDFJS: https://mozilla.github.io/pdf.js/     支持獲取文件流到客戶端，生成blob地址預覽

ViewerJS: http://viewerjs.org/   預覽pdf文件，其pdf文件只能url地址

Vue-pdf https://github.com/FranckFreiburger/vue-pdf 會出現空白頁( 推薦使用iframe方法 )

 

無論從功能、兼容性還有社區活躍度PDFJS 都是不二選擇。

官網(https://mozilla.github.io/pdf.js/getting_started/#download)下載PDFJS，注意放在static文件目錄下

 

 

 

接下來將以返回流到客戶端講解

1.在對應的vue組件將iframe引入:

<el-dialog title="" :visible.sync="dialogVisible" width="80%" top="20px">
  <div class="pdf" style="height: 450px">
    <iframe :src="pdfUrl" frameborder="0" style="width: 100%; height: 100%"></iframe>
  </div>
</el-dialog>

2.我們試過的錯，前人已經幫我們試過了

 

 

 

 

 如果返回就是blob，則{type:"application/zip"}可不填或寫為

{type:"application/pdf"}

最終實現方式為

 

 

 

補充：encodeURI() 把字符串編碼為 URI

encodeURIComponent() 把字符串編碼為 URI 組件

發現encodeURI不會對:/?&等uri中起分割作用的字符進行編碼；

encodeURIComponent則會。

所以必須選擇 encodeURIComponent 進行對url的編碼

 

需要后台實現方式的可以給我發郵件[e-mail]

 

不積跬步，無以至千里；不積小流，無以成江海。