⑴ pdf.js 如何預覽本地文件
pdf.js預覽文件必須只能是在伺服器部署的項目路徑下,不能通過修改配置的方式支持本地路徑的文件,否則會有js跨域問題。如果要顯示本地文件,可以折中考慮先做一個上傳功能將文件上傳到伺服器上然後在頁面上展示,這樣基本實現了預覽本地文件。
⑵ 前台js 如何使用pdf.js預覽pdf文件流(base64)
將pdf流生成pdf文件,然後在將pdf文件使用PDF.js進行查看。
你需要考慮瀏覽器兼容性,低版本瀏覽器可能沒辦法支持。
參照 File API 和URL API(URL.createObjectURL())
⑶ vue-pdf.js 在線預覽問題
最近修改公司vue項目中使用pdf.js來實現在線預覽上傳的各類文件.由於使用pdf.js在預覽時是直接在標簽內將src屬性賦值為要請求的地址.這就導致一個問題,會直接請求伺服器的文件路徑地址,而這個伺服器文件路徑就會暴露出來。處於安全性考慮在預覽請求時不再返回地址,改為通過調用普通介面,而是統一返迴流(word,pdf)或者base64(jpg,png...)。.前端再進行解析並實現在線預覽.
此時遇到第一個問題:
這個請求是在插件中進行的無法攜帶項目中封裝的各類請求頭信息(token..等)。 翻看pdf.js源碼及網上總結.發現一個底層方法
該方法可傳一個對象作為參數,對象內可以添加url(所請求的介面),headers(請求頭信息)等.... . 有了這個方法就好處理了.
最後在將該方法當做變數賦值給pdf的src.大功告成.
最後再補充一些 : @loaded="docLoaded" @page-loaded ="pageLoaded" 這兩個方法為載入預覽文件時的loading事件,
最後引一波示例,
⑷ 如何創建pdf的buffer,讓pdf.js實現預覽pdf文件
pdf.js VS 傳統瀏覽器讀取pdf
一般來說,PDF檔案格式都是在瀏覽器中由外掛程式來描繪,通常是Adobe自己的PDF reader或來自其他供應商的描繪工具,但這些外掛通常無法充分運用PDF的特點,而且由於含有大量的受信任代碼,使得Google Chrome瀏覽器必須運用SandBox沙箱原理,來檢查PDF描繪工具是否遭到未知病毒感染。
使用adobe,必須在本地安裝軟體才能使用,而pdf.js不依賴環境、渲染速度快(測試過,確實很快)、安全性高。
pdf.js渲巧困飢染PDF文件
pdf.js渲染PDF文件的流程:Fetch pdf (url / buffer) ——> canvas ——> 渲染
如果要深入pdf的渲染,需要去研究pdf.js源代碼。pdf.js可通過pdf文件的地址或pdf數據孝返流獲取pdf,具體實現是調用介面函數 PDFJs.getDoc(url/buffer)將pdf載入html,通過canvas處理, 然後渲染pdf文件。網上給出的都是通過url來獲取pdf的例子,而我在做項目的時候,後台(python)要求是發pdf的數據流給前台,前台接收pdf的buffer,然後通過pdf.js來渲染。當然最初尺並嘗試buffer出現了很多問題,具體問題總結如下:
1)如何通過$.ajax接收後台發給前台的buffer數據;
2)如何將buffer傳給pdf.js來處理(這里我使用了viewer.js, 所以需要考慮的是如何將buffer傳給viewer.js來處理);
3)如何將pdf.js轉換成pdf.js可以接收的buffer格式;
(對應問題解決見代碼注釋)
註:viewer.js是pdf.js的擴展,其將列印、翻頁、縮放等功能進行了實現,且界面非常好看。也就是說如果你引入了viewer.js,pdf的渲染和渲染之後的功能界面都已經幫你實現了,你不用自己去寫界面。
⑸ 使用Pdf.js做一個動態展現pdf文檔的功能。 展現出來的中文全是白色的,只有英文和數據能顯示。
沒有這個問題啊,我用谷歌翻譯的時候將PDF文檔上傳後它自動翻譯;只不過由於PDF文檔格式問題識別時經常換行,需要略微調整。
(PS:PDF文檔不要太大,不然識別太慢)