将字节数组转换为 blob（pdf 文件）并使用 angular 5 下载

Question

我从服务器端收到一个字节数组，并已成功将其转换为 blob。但是，当我尝试下载它时，它显示文件已损坏。以下是我的代码 -

// In client side controller
this.contractsService.downloadPdf(id)
      .then((result) => {
        var blob = new Blob([result], { type: "application/pdf" });
        var link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
        link.download = "testing.pdf";
        link.click();
      });

和，

// In client side service
private headers = new HttpHeaders({ 'Content-Type': 'application/json' });
downloadPdf(id: number) {
    return this.http.get(this.apiRoutes.download + "/" + id, { headers: this.headers })
      .map((res: any) => res)
      .toPromise();
  }

任何形式的帮助将不胜感激。谢谢你。

Answer 1

安装文件保护程序

npm i --save file-saver@latest

您的服务方式

downloadPdf(id: number) {
    return this.http
              .get(this.apiRoutes.download + "/" + id, { responseType:'blob' })
      .toPromise();
  }

现在在您的组件中

import { saveAs } from 'file-saver'

this.contractsService.downloadPdf(id)
      .then(blob=> {
         saveAs(blob, 'testing.pdf');
      });

这应该可以解决问题。HttpClient 现在将从流中提取文件。还可以查看带有HttpClient 的blob 的文档。