Angular/ionic5使用ng2-pdfjs-viewer查看大型PDF文件时出现问题。
可以使用pdfjs-dist库来处理大型PDF文件。该库的使用方式如下：
-
安装依赖：npm install pdfjs-dist --save
-
导入pdfjs-dist库：import * as pdfjsLib from 'pdfjs-dist/webpack';
-
定义pdf查看器组件和PDF地址：
import { Component, Input, ElementRef } from '@angular/core'; import { LoadEvent } from 'ngx-image-cropper';
@Component({
selector: 'pdf-viewer',
template:
})
export class PdfViewerComponent {
@Input() pdfSrc: string;
@ViewChild('canvas') canvas: ElementRef;
ngAfterViewInit() { pdfjsLib.GlobalWorkerOptions.workerSrc = '//cdnjs.cloudflare.com/ajax/libs/pdf.js/2.4.456/pdf.worker.js'; let pdf = null; let canvas = this.canvas.nativeElement; let context = canvas.getContext('2d'); let scale = 1.5; pdfjsLib.getDocument(this.pdfSrc).promise.then(function (pdfDoc_) { pdf = pdfDoc_; const numPages = pdf.numPages; pdf.getPage(1).then(function(page) { const viewport = page.getViewport({ scale: scale }); canvas.height = viewport.height; canvas.width = viewport.width; const renderContext = { canvasContext: context, viewport: viewport }; page.render(renderContext).promise.then(function() { console.debug('Page rendered'); }); }); }); } }
- 在需要查看PDF的组件中引入pdf-viewer组件并传递PDF地址：
- 如果你需要在应用程序加载时获取PDF文件的路径，则可以利用Angular的HttpClient请求获取PDF文件的路径，并将其传递给pdf-viewer组件。
import { HttpClient } from '@angular/common/http';
@Component({ selector: 'app-root', templateUrl: './app.component.html' }) export class AppComponent implements OnInit { pdfUrl = '';
constructor(private http: HttpClient) {}
ngOnInit() { this.http.get('/assets/test.pdf', { responseType: 'blob' }).subscribe((res: any) => { // PDF只能使用URL.createObjectURL将Blob转换为URL this.pdfUrl = URL.createObjectURL(res); }); } }