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

【问题标题】：Convert byte array into blob (pdf file) and download using angular 5将字节数组转换为blob（pdf文件）并使用angular 5下载
【发布时间】：2018-03-13 16:30:24
【问题描述】：

我正在从服务器端接收一个字节数组，并已成功将其转换为 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();
  }

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

【问题讨论】：

查看执行 ajax 请求的 http 客户端的文档。您需要确保生成的 result 是 Blob（被视为二进制）而不是字符串（被恶作剧和恶意编码处理）。这可能是this.http.get(...) 调用的另一个参数或设置。

标签： asp.net-core angular5

【解决方案1】：

安装file-saver

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 文档。

【讨论】：

当你直接通过浏览器打开你的api的url并下载文件时，它有效吗？您使用的是旧版 http 客户端，或者提供的文件首先损坏。
当我在本地下载服务器端的文件时，它工作得很好。但是，当我将其转换为字节数组并发送到客户端进行下载时，它已损坏。附言不，当我也从 URL 手动打开文件时，文件显示已损坏。
啊，好吧，那是你的 API 做错了，而不是客户端。
你不需要提供一个临时文件，只需要一个字节数组和一个文件内容结果。请参阅stackoverflow.com/a/48864842/5397642
它只是一个实现IActionResult并以字节数组形式返回文件的类。将设置特殊的响应标头，例如内容处置、文件名等。你可以在这里阅读更多关于它的信息docs.microsoft.com/en-us/dotnet/api/…

【解决方案2】：

在客户端服务中，尝试显式设置get请求的响应类型：

downloadPdf(id: number) {
    return this.http.get(this.apiRoutes.download + "/" + id, { headers: this.headers; responseType: 'arraybuffer' })
      .map((res: any) => res)
      .toPromise();
  }

【讨论】：