首先來一張總結的圖,也就是pdf.js在解析和渲染pdf的一個時序圖,下圖:
首先要明白,pdf.js在渲染pdf的時候是做分層渲染,也就是時間展現的內容是透過canvas進行繪製的,而我們透過滑鼠進行選擇時候的內容是透過dom進行普通渲染,也就是 <div>123</div>
這樣的普通元件,只是透過設定透明度讓內容不直接肉眼可見,但是能夠讓使用者使用滑鼠將內容進行選擇以及在進行搜尋的時候顯示背景高亮的。
那麼首先來看看在canvas上pdf.js是如果一步步讓PDF的內容顯示到介面上的:
- 解析PDF檔案內容
initialize
方法,是pdf.js中對pdfviewer的各種元件的初始化 open
方法,是將PDF檔案載入解析,將二進位制資料讀取出來之後構造成PDFDocument物件setDocument
透過將解析的PDFDOcument物件設定,進行pdf的pageview的設定- 之後透過forceRendering進行渲染PDF的內容,會在渲染程序中render_enqueue中繼續渲染內容
- 呼叫
canvas.js
中的方法對內容進行渲染,使用showText
等方法將文字繪製到canvas中去 - 在完成canvas的渲染之後,會繼續渲染
textLayer
的內容
以上順序便是一個簡單的pdf.js的解析和繪製的順序,具體的內容可以檢視上面時序圖,標記了具體的js檔案和方法的順序。
最後注意一下,由於對部分promise的內容不是理解的特別深入,所以其中的部分順序可能不一定正確。