jspdf預覽

A. 如何創建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的渲染和渲染之後的功能界面都已經幫你實現了，你不用自己去寫界面。

B. 前台js 如何使用pdf.js預覽pdf文件流（base64）

將pdf流生成pdf文件，然後在將pdf文件使用PDF.js進行查看。
你需要考慮瀏覽器兼容性，低版本瀏覽器可能沒辦法支持。
參照 File API 和URL API(URL.createObjectURL())

C. 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事件,

最後引一波示例,

D. 自定義微信分享鏈接(使用JS-SDK) + 實現預覽pdf

可參考：微信JS-SDK說明文檔 >

此時可能出現白名單錯誤（忘截圖了），需要在微信公眾號中設置錯誤中的IP

注意：access_token和ticket都需要緩存

4. 獲取簽名 signature

將以上內容以鍵值對形式拼接，類似如下

本地引入sha1演算法（需網上查找）
將上述拼接的字元串以參數的形式傳遞到sha1中得到 signature
signature = sha1(拼接完的字元串)
驗證 signature 是否正確 >
將appId，nonceStr，timestamp和signature返回給前端

官網上是這樣描述的：

這時候調用 updateAppMessageShareData ， updateTimelineShareData 的時候就可以生效了，具體原理不清楚。。

注意：imgUrl配置有嚴格的要求
尺寸120 x 120，大小不超過10K，不支持GIF格式。必須採用https協議（最好寫完整url）,不支持base64。由於我使用的是vue，在webpack打包時圖片小於10k的是會自動打包成base64導致無法正常顯示余冊圖片，因此在webpack.base.config.js中修改默認配置

由於在網頁中直接查看pdf的路徑是無法在微信中查看（安卓）和分享（ios），因此使用pdf插件進行優化 --- pdf.js 。其原理是繪製成canvas，最終在真機上放大時可能出現模糊的問題悶毀信。

創建之後控制台會報錯出現跨域問題，因為pdf.js不支持跨域訪問。此時可以將錯誤跨域信息在上一步你引入的文件中查找，然後將其判斷語句注釋掉即可解決這個問題。最後會發現pdf出現在這個容器中（忘截圖了），螞輪也實現了微信中預覽和分享的功能。

E. pdf.js 無法在線預覽PDF

你這個問題比較專業，回答起來比較麻煩，我們先來理一理該如何去解決問題，問題是：你是向要將PDF文件進行在線打開，去發現無法將文件進行打開。

原因可能是：

1.你的PDF文件和電腦起到沖突的原因

2.可能是文件在接收或者在下載的時候收到損壞！

如果是這個問題的話那就簡單，小編可以教你使用一個方法可以將它解決！

1.其實我們可以使用在線PDF轉換器就可以了，不僅可以對它進行在線的閱讀，還可以對它進行其他格式的在線轉換或者PDF文件的編輯！

以上就是我的個人見解，希望對小夥伴們有所幫助！

F. js手機pdf預覽兼容性

強。js手機在打開pdf文件進行瀏覽的時候預覽兼容性是強的。js是手友埋機上的用一種特殊的java語言編寫出的JavaScript文件，可以好賀螞通過啟動器使用，達到豐富游戲方便玩家的作用類似拍粗於電腦上的mod。

G. pdf.js 如何預覽本地文件

pdf.js預覽文件必須只能是在伺服器部署的項目路徑下，不能通過修改配置的方式支持本地路徑的文件，否則會有js跨域問題。如果要顯示本地文件，可以折中考慮先做一個上傳功能將文件上傳到伺服器上然後在頁面上展示，這樣基本實現了預覽本地文件。

H. pdfobject.js中怎麼在新頁面預覽pdf文件

pdf.js簡介 PDF.js 是基於開放的 HTML5 及 JavaScript 技術實現的開源產品。簡單說就是一個 PDF 解析器。運用HTML5JavaScript（即pdf.js僅使用安全的web語言，不包含任何攻擊者可以用的本地代碼塊）的PDF閱讀器pdf.js，直接在標準的HTML頁面上載

I. jquery.media.js 怎麼預覽pdf文件

其實也就是簡單的在瀏覽器中實現一個打開pdf文件，並有類似預覽功能的邊框。

其實在中國上經常見到遲悔類返攜似的頁面，在瀏覽器中打開pdf文檔，可大部分都是由於版權的原因使用了一些很特殊的技術，自然很難模仿了。
即使有直接在瀏覽器打開的例子，也必須手動點擊一下鏈接然後才能打開pdf文件。如何直接打開，而不用點擊鏈接呢？
本以碼世正為自己對js很熟，也就使用js模擬點擊，可就是不管用，沒辦法，只能在中國上繼續尋找資料。最終想不到代碼卻很簡單。
最主要的是使用到了一個jquery的插件jquery.media.js，使用這個插件就很容易實現了。
核心代碼：
成因分析 使用jquery.media.js就可以直接把一個連接到pdf文件的鏈接打

J. 前台js有沒有辦法實現附件比如word或者pdf的預覽

pdf的預覽改毀氏是可以實現的，world文檔因為有復雜表格什麼的不好處核散理，所以最好轉換為pdf再預覽；

pdf.js實現載入余攜整個pdf

網頁鏈接