js源碼分析pdf,ajax源碼分析

本文目錄一覽：

• 1、vue-pdf.js 在線預覽問題
• 2、jspdf如何隱藏某個元素生成pdf
• 3、umijs@use-request源碼解讀
• 4、如何創建pdf的buffer，讓pdf.js實現預覽pdf文件
• 5、jspdf源碼哪裡有對高度進行限制

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

最後引一波示例,

jspdf如何隱藏某個元素生成pdf

jspdf隱藏某個元素生成pdf在id上切換來解析該項。就是把html內容轉成canvas，然後生成圖片，把圖片添加到jspdf里，保存導出pdf優點:生成的pdf清晰度良好，且支持中文字體。

umijs@use-request源碼解讀

涉及ts的變數聲明、介面、類、函數、泛型等

ts語法知識

前提：定義了一個 Fecth 類，用於處理請求數據。

1）用法

2）源碼分析

第一次調用時，緩存中不存在數據，則會自動執行獲取數據

1）用法

2）源碼分析

當開啟 manual 禁止自動請求時，將 run 函數暴露給用戶調用。

如果 fetchKey 不存在，則新建 Fetch 實例，保存到 feches 對象中，並調用實例的 run ，最後返回調用結果數據。

如果 fetchKey 存在，則直接調用 Fetch 實例的 run 。

作用：在取數結束後設定 setTimeout 重新觸發下一輪取數。

1）用法

2）源碼分析

在 Fetch 類中 _run(…args: P) 的實際取值函數中，最後會判斷，是否設置了輪詢 pollingInterval ，設置了則開啟定時器。 注意，前提是當前頁面沒有被隱藏。

定時器及時銷毀：在 _run 函數最開始，會對現有的定時器先進行銷毀。

作用：設置 options.cacheKey 後開啟對請求結果緩存機制，下次請求前會優先返回緩存並在後台重新取數。

1）用法

2）源碼分析

每次請求都是創建一個 Fetch 實例，並用 fetchKey 進行唯一標識，並且調用 run 函數時，優先調用緩存實例。

1）用法

2）源碼分析

根據傳入的 config 配置來判斷是否進行防抖和節流分發處理。

1）用法

2）源碼分析

預載入本質是緩存機制，通過利用 useEffect 同步緩存實例, 保證緩存數據的最新，然後當需要用到數據時，優先調用緩存實例。

1）用法

2）源碼分析

1）用法

2）源碼分析

調用 mutate 傳入的方法

分頁：設置 options.paginated 支持分頁場景

載入更多：設置 options.loadMore 支持載入更多的情況

分頁和載入原理：在 useAsync 這個基礎請求 hook 基礎上再包一層 hook ，擴展取數參數與返回結果。

所以，不在此處多餘贅述了。

document.visibilityState ：表示下面 4 個可能狀態的值

hidden ：頁面在後台標籤頁中或者瀏覽器最小化

visible ：頁面在前台標籤頁中

prerender ：頁面在屏幕外執行預渲染處理 document.hidden 的值為 true

unloaded ：頁面正在從內存中卸載

visibilitychange 事件：當文檔從可見變為不可見或者從不可見變為可見時，會觸發該事件。

函數返回值只會在組件的初始渲染中起作用，後續渲染時會被忽略

分析：對於同一個實例，可能出現多次調用 _run 方法，導致 this.count 和 currentCount 出現數據不同步的情況，比如，第一次調用 _run 後，剛好執行「關鍵點 閉包取數」後，還未執行到 return , 又執行了 _run ，導致此時 this.count+=1 ，那麼第一次調用 _run.currentCount 的值比當前的 this.count 小1。

作用：保證 state 中的數據是最近一次訪問介面得到的數據

源碼github地址

用法地址

精讀《@umijs/use-request》源碼

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

jspdf源碼哪裡有對高度進行限制

首先用極速PDF編輯器打開PDF文檔後，選擇編輯器右上角「文檔」選項卡中的「頁面」並選擇「調整尺寸」進入設置頁面。

另外如需手動輸入可以在新尺寸中勾選「自定義」，並輸入寬度和高度的數值後，在單位的下拉選項中選擇合適的數據單位即可。