ng2-pdf-viewer实践

1. 技术架构及版本

1. Angular 8.2.0
2. ng2-pdf-viewer 5.3.4

2.代码

component

import {Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-doc-preview',
  templateUrl: './doc-preview.component.html',
  styleUrls: ['./doc-preview.component.scss']
})
export class DocPreviewComponent implements OnInit {
  pdfSrc: string | ArrayBuffer;

  constructor() {
  }

  ngOnInit() {
  }

  selectFile(event: any) {
    let file = event.target.files[0]
    const reader = new FileReader();
    reader.readAsArrayBuffer(file);
    reader.onload = e => this.pdfSrc = reader.result;
  }

}

html

<p>doc-preview works!</p>
<input type="file" (change)="selectFile($event)" id="inputBox">
<pdf-viewer [src]="pdfSrc"
            [render-text]="true"
            style="display: block; height: 500px;"
></pdf-viewer>

scss

// 修改组件内部样式
.ng2-pdf-viewer-container {
  height: auto;
}

::ng-deep .page {
	border: black 1px solid !important;
}

3. 异常

​ 在安装依赖后启动项目，会产生以下错误。

ERROR in ./node_modules/pdfjs-dist/build/pdf.js 2205:45
Module parse failed: Unexpected token (2205:45)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|         intent: renderingIntent,
|         renderInteractiveForms: renderInteractiveForms === true,
>         annotationStorage: annotationStorage?.serializable || null
|       });
|     }
ERROR in ./node_modules/pdfjs-dist/web/pdf_viewer.js 613:31
Module parse failed: Unexpected token (613:31)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|   _cachedPageNumber(pageRef) {
|     const refStr = pageRef.gen === 0 ? `${pageRef.num}R` : `${pageRef.num}R${pageRef.gen}`;
>     return this._pagesRefCache?.[refStr] || null;
|   }
| 
i ｢wdm｣: Failed to compile.
    
    ERROR in node_modules/ng2-pdf-viewer/src/app/pdf-viewer/pdf-viewer.component.d.ts(5,10): error TS2305: Module '"F:/JSWorkspace/PDF-Viewer/node_modules/pdfjs-dist
/types/pdf"' has no exported member 'PDFDocumentProxy'.
    node_modules/ng2-pdf-viewer/src/app/pdf-viewer/pdf-viewer.component.d.ts(5,28): error TS2305: Module '"F:/JSWorkspace/PDF-Viewer/node_modules/pdfjs-dist/types/pd
f"' has no exported member 'PDFSource'.
    node_modules/ng2-pdf-viewer/src/app/pdf-viewer/pdf-viewer.component.d.ts(5,39): error TS2305: Module '"F:/JSWorkspace/PDF-Viewer/node_modules/pdfjs-dist/types/pd
f"' has no exported member 'PDFProgressData'.
    node_modules/ng2-pdf-viewer/src/app/pdf-viewer/pdf-viewer.module.d.ts(1,10): error TS2305: Module '"F:/JSWorkspace/PDF-Viewer/node_modules/pdfjs-dist/types/pdf"'
 has no exported member 'PDFJSStatic'.
    node_modules/ng2-pdf-viewer/src/app/pdf-viewer/pdf-viewer.module.d.ts(5,10): error TS2305: Module '"F:/JSWorkspace/PDF-Viewer/node_modules/pdfjs-dist/types/pdf"'
 has no exported member 'PDFJSStatic'.
    node_modules/ng2-pdf-viewer/src/app/pdf-viewer/pdf-viewer.module.d.ts(5,23): error TS2305: Module '"F:/JSWorkspace/PDF-Viewer/node_modules/pdfjs-dist/types/pdf"'
 has no exported member 'PDFDocumentProxy'.
    node_modules/ng2-pdf-viewer/src/app/pdf-viewer/pdf-viewer.module.d.ts(5,41): error TS2305: Module '"F:/JSWorkspace/PDF-Viewer/node_modules/pdfjs-dist/types/pdf"'
 has no exported member 'PDFViewerParams'.
    node_modules/ng2-pdf-viewer/src/app/pdf-viewer/pdf-viewer.module.d.ts(5,58): error TS2305: Module '"F:/JSWorkspace/PDF-Viewer/node_modules/pdfjs-dist/types/pdf"'
 has no exported member 'PDFPageProxy'.
    node_modules/ng2-pdf-viewer/src/app/pdf-viewer/pdf-viewer.module.d.ts(5,72): error TS2305: Module '"F:/JSWorkspace/PDF-Viewer/node_modules/pdfjs-dist/types/pdf"'
 has no exported member 'PDFSource'.
    node_modules/ng2-pdf-viewer/src/app/pdf-viewer/pdf-viewer.module.d.ts(5,83): error TS2305: Module '"F:/JSWorkspace/PDF-Viewer/node_modules/pdfjs-dist/types/pdf"'
 has no exported member 'PDFProgressData'.
    node_modules/ng2-pdf-viewer/src/app/pdf-viewer/pdf-viewer.module.d.ts(5,100): error TS2305: Module '"F:/JSWorkspace/PDF-Viewer/node_modules/pdfjs-dist/types/pdf"
' has no exported member 'PDFPromise'.
    node_modules/pdfjs-dist/types/display/annotation_storage.d.ts(33,9): error TS1086: An accessor cannot be declared in an ambient context.
    node_modules/pdfjs-dist/types/display/annotation_storage.d.ts(43,9): error TS1086: An accessor cannot be declared in an ambient context.
    node_modules/pdfjs-dist/types/display/api.d.ts(617,9): error TS1086: An accessor cannot be declared in an ambient context.
    node_modules/pdfjs-dist/types/display/api.d.ts(621,9): error TS1086: An accessor cannot be declared in an ambient context.
    node_modules/pdfjs-dist/types/display/api.d.ts(625,9): error TS1086: An accessor cannot be declared in an ambient context.
    node_modules/pdfjs-dist/types/display/api.d.ts(629,9): error TS1086: An accessor cannot be declared in an ambient context.
    node_modules/pdfjs-dist/types/display/api.d.ts(817,9): error TS1086: An accessor cannot be declared in an ambient context.
    node_modules/pdfjs-dist/types/display/api.d.ts(821,9): error TS1086: An accessor cannot be declared in an ambient context.
    node_modules/pdfjs-dist/types/display/api.d.ts(967,9): error TS1086: An accessor cannot be declared in an ambient context.
    node_modules/pdfjs-dist/types/display/api.d.ts(971,9): error TS1086: An accessor cannot be declared in an ambient context.
    node_modules/pdfjs-dist/types/display/api.d.ts(976,9): error TS1086: An accessor cannot be declared in an ambient context.
    node_modules/pdfjs-dist/types/display/api.d.ts(980,9): error TS1086: An accessor cannot be declared in an ambient context.
    node_modules/pdfjs-dist/types/display/api.d.ts(985,9): error TS1086: An accessor cannot be declared in an ambient context.
    node_modules/pdfjs-dist/types/display/api.d.ts(1075,9): error TS1086: An accessor cannot be declared in an ambient context.
    node_modules/pdfjs-dist/types/display/api.d.ts(1182,9): error TS1086: An accessor cannot be declared in an ambient context.

​ 在论坛搜索后看到很多反馈更改ng2-pdf-viewer版本，在Stack Overflow上看到了一个技术员给出了一个比较中肯的解释（写文档的时候没找到那个贴和回答了。。）。意思为：ng2-pdf-viewer的版本同其所依赖的子包版本不匹配造成了这个异常，即ng2-pdf-viewer的子依赖高版本没有向下兼容。后面经实践，笔者得到一个可行的组合。

package.json

"dependencies": {
    "ng2-pdf-viewer": "^5.3.4"
}

在执行npm install后的package-lock.json中可以看到，ng2-pdf-viewer需要3个子依赖，而默认设置的版本为：

• “@types/pdfjs-dist”: 2.7.3
• “pdfjs-dist”: 2.8.335

修改子依赖版本，将以上两个依赖替换为以下版本，可得到一个可行的组合。重新install -> start。

{
    "name": "pdf-viewer",
    "version": "0.0.0",
    "lockfileVersion": 1,
    "requires": true,
    "dependencies": {
        "ng2-pdf-viewer": {
            "version": "5.3.4",
            "resolved": "https://registry.nlark.com/ng2-pdf-viewer/download/ng2-pdf-viewer-5.3.4.tgz",
            "integrity": "sha1-/vMR+9x9A9PrU5T4ZqwIwpXUuuk=",
            // 依赖
            "requires": {
                "@types/pdfjs-dist": "^2.0.1",
                "pdfjs-dist": "^2.2.228",
                "tslib": "^1.9.0"
            }
        },
        "pdfjs-dist": {
            "version": "2.2.228",
            "resolved": "https://registry.nlark.com/pdfjs-dist/download/pdfjs-dist-2.2.228.tgz",
            "integrity": "sha1-d3sGigoWyWQYQzMDgHwYMFi0eqo=",
            "requires": {
                "node-ensure": "^0.0.0",
                "worker-loader": "^2.0.0"
            }
        },
        "@types/pdfjs-dist": {
            "version": "2.1.7",
            "resolved": "https://registry.nlark.com/@types/pdfjs-dist/download/@types/pdfjs-dist-2.1.7.tgz?cache=0&sync_timestamp=1623252872550&other_urls=https%3A%2F%2Fregistry.nlark.com%2F%40types%2Fpdfjs-dist%2Fdownload%2F%40types%2Fpdfjs-dist-2.1.7.tgz",
            "integrity": "sha1-qS2UudaZqTq4p2KDn3gZ3ATpZIQ="
        }
    }
}

4. pdf预览

​ 预览效果如下，这个pdf预览组件还包含更多的展示、搜索功能。笔者同事基于这个组件的搜索功能做的搜索栏功能也挺强大和酷炫的，工作环境就没法贴图了。参数的使用请参考：pdf-viewer。