ng2-pdf-viewer一直白屏不顯示內容，Setting up fake worker fail

 

最近在ionic項目中，用ng2-pdf-viewer開發PDF瀏覽功能時遇到一個問題，表現就是插件一直白屏，PDF文件的內容不顯示，如果給<pdf-viewer>加上錯誤事件監聽：

<pdf-viewer [src]="pdfSrc" (error)="onError($event)">

onError(error: any) {
    console.log('PDF error', error); }

在控制台可以看到報錯 Setting up fake worker fail. cannot load script https://cdnjs.cloudflare.com/...

在node_modules/ng2-pdf-viewer/fesm2015/ng2-pdf-viewer.js中可以找到以下代碼：

        let pdfWorkerSrc;
        if (window.hasOwnProperty('pdfWorkerSrc') &&
            typeof window.pdfWorkerSrc === 'string' && window.pdfWorkerSrc) { pdfWorkerSrc = window.pdfWorkerSrc; } else { pdfWorkerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${PDFJS.version}/pdf.worker.min.js`;  } PDFJS.GlobalWorkerOptions.workerSrc = pdfWorkerSrc;

意思就是說，當window.pdfWorkerSrc有值時就用window.pdfWorkerSrc，否則就去指定的CDN加載pdf.worker.min.js。

 

解決方法：

第一步，在自己的組件或頁面代碼中加入以下代碼：

  ngOnInit() {
    //...
    (<any>window).pdfWorkerSrc = 'assets/js/pdf.worker.min.js'; }

第二步，在項目根目錄下的angular.json中如下位置中增加下面紅色的代碼。

{
  ...
  "projects": {
    "app": {
      "architect": {
        "build": {
          ...
          "options": {
            ...
            "assets": [
              ...
 { "glob": "pdf.worker.min.js",
                "input": "node_modules/pdfjs-dist/build/",
                "output": "/assets/js/" }
            ],
         ...

加這段代碼的意思就是在構建時將 node_modules/pdfjs-dist/build/pdf.worker.min.js復制到www/assets/js/下，(注www是ionic的默認輸出目錄，見angular.json中的outputPath）。另外，ionic serve時是將輸出文件放在內存中提供的服務，所以在文件系統中並看不到。如果你執行ionic build 就可以在生成www目錄，並在其下找到對應的文件了。

之前在網上看到別的解決方案是直接把pdf.worker.min.js文件復制到assets/js/下，但這樣有缺點，就是如果ng2-pdf-viewer升級了，那自己復制的pdf.worker.min.js文件的版本可能就跟ng2-pdf-viewer需要的版本不一致了，還需要手動維護更新。

 

總結：

官方文檔關於worker相關說明https://github.com/VadimDez/ng2-pdf-viewer/blob/master/README.md#set-custom-path-to-the-worker，翻譯如下：

------------------------------------------------------------

默認情況下worker是從cdnjs.cloudflare.com加載，可以設為自己的路徑，比如，在你的代碼中更新worker的路徑為/pdf.worker.js：

(window as any).pdfWorkerSrc = '/pdf.worker.js';

此代碼應該加在pdf-viewer組件被渲染之前。（注意，/pdf.worker.js，這個路徑要改成自己的實際路徑）。

--------------------------------------------------------------

這個問題只在沒有外網的情況下才會發現，因為ng2-pdf-viewer需要去cdn上加載這個pdf.worker.min.js，至於為什么沒有直接引用pdfjs-dist/build/pdf.worker.min.js，原作者說是因為pdfjs-dist/build/pdf.worker.min.js會引起webpack錯誤。所以才在運行時動態加載。而我們在無外網環境下開發就會加載不上pdf.worker.min.js，然后就出現了PDF內容不能正常顯示的問題。

 

參考：https://github.com/VadimDez/ng2-pdf-viewer/issues/504

 

如果覺得文章還可以，請點贊，加關注。