1. 技術架構及版本
- Angular 8.2.0
- 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。
