要在Angular 5中下载并在新窗口中显示PDF文档,可以使用pdfjs-dist库和FileSaver库。以下是一个解决方案的代码示例:
在项目根目录下运行以下命令:
npm install pdfjs-dist
npm install file-saver
在src/app文件夹下创建一个名为pdf.service.ts的文件,并添加以下代码:
import { Injectable } from '@angular/core';
import * as pdfjsLib from 'pdfjs-dist';
import { saveAs } from 'file-saver';
@Injectable({
providedIn: 'root'
})
export class PdfService {
constructor() {
// 设置pdf.js的worker路径
pdfjsLib.GlobalWorkerOptions.workerSrc = '/assets/pdf.worker.js';
}
// 下载并在新窗口中显示PDF
downloadAndOpenPdf(url: string) {
// 从指定URL下载PDF文件
pdfjsLib.getDocument(url).promise.then(pdf => {
// 获取第一页
pdf.getPage(1).then(page => {
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
// 设置canvas尺寸与PDF页面尺寸一致
const viewport = page.getViewport({ scale: 1 });
canvas.width = viewport.width;
canvas.height = viewport.height;
// 渲染PDF页面到canvas上
page.render({ canvasContext: context, viewport }).promise.then(() => {
// 保存canvas为blob对象
return new Promise((resolve, reject) => {
canvas.toBlob(blob => {
if (blob) {
resolve(blob);
} else {
reject('Error creating blob');
}
}, 'application/pdf');
});
}).then(blob => {
// 使用FileSaver保存blob,打开新窗口显示PDF
saveAs(blob, 'document.pdf');
});
});
});
}
}
在需要下载并显示PDF的组件中,导入PdfService,并在构造函数中注入该service。然后,可以调用downloadAndOpenPdf()
方法来下载并在新窗口中显示PDF。
import { Component } from '@angular/core';
import { PdfService } from './pdf.service';
@Component({
selector: 'app-root',
template: `
`,
styleUrls: ['./app.component.css']
})
export class AppComponent {
pdfUrl = 'http://example.com/document.pdf';
constructor(private pdfService: PdfService) { }
openPdf() {
this.pdfService.downloadAndOpenPdf(this.pdfUrl);
}
}
请确保将this.pdfUrl
替换为实际的PDF文件URL。
以上代码将在新窗口中打开PDF文档,并且在Angular 5应用程序中使用了pdfjs-dist和FileSaver库。