解決pdf.js無法完全顯示pdf文件內容的問題

一、遇到的問題：預覽pdf文件時，很多內容未顯示。

 

查看控制台，出現以下警告

 

二、跟蹤源碼，排查原因

  

 

從下圖可以發現baseUrl取值為params.cMapUrl

 

找到調用WorkerTransport方法處：

 

   

於是，修改getDocument方法的入參，傳入cMapUrl 和 cMapPacked

PDFJS.getDocument({
    url: "/accessory/show?accessoryId=" + fileId,
    cMapUrl: "https://cdn.jsdelivr.net/npm/pdfjs-dist@2.2.228/cmaps/",
    cMapPacked: true
})

該問題的原因是因為缺少了部分字體包，可使用CDN方式加載字體包。

此處提供cmaps的2個CDN地址（2.2.228為pdfjs-dist的版本號）：

https://unpkg.com/browse/pdfjs-dist@2.2.228/cmaps/

https://cdn.jsdelivr.net/npm/pdfjs-dist@2.2.228/cmaps/

 

加載字體包后，效果如下圖（部分內容已打馬賽克）：

 

當然，也可將字體包下載至本地，然后進行加載。

PDFJS.getDocument({
    url: url,
    cMapUrl: "../../static/pdf/cmaps/",
    cMapPacked: true
})

其中"../../static/pdf/cmaps/"為本次cmaps的路徑（是相對於使用pdf.js頁面的路徑）。