在Angular 2+应用程序中下载文件

如何解决在Angular 2+应用程序中下载文件

我正在使用 Angular 9 网络应用程序，该应用程序在其中一个页面中，客户端在提交表单后会期望下载PDF 。

>

我可以在后端（服务器端）成功生成PDF文件，并使用流将其返回。我开发的要返回的Web API的输出可以从以下链接中看到：

https://pastebin.com/xJScx7A4

在Angular应用程序中，我尝试了几种方法在浏览器中打开PDF或将其下载为文件。在每种情况下，我都会得到类似于下面的屏幕快照

我尝试的第一种方式：

loadReport(){

this.spinner.show();

//////// /////////////// /////////////////////

this.api.loadReport(this.filterVM)
.subscribe(res => {
  console.log(res);
  this.spinner.hide();

  ////// //////////////////////////
  const blob = new Blob([res],{ type: 'application/pdf' });
  const url= window.URL.createObjectURL(blob);
  window.open(url);
  ////////// /////////////////////

},err => {
  console.log(err);
  this.spinner.hide();
});
///// ///////////// //////////////////////////

}

我尝试的第二种方式：

  loadReport(){

    this.spinner.show();

    //////// /////////////// /////////////////////    
    this.api.loadReport(this.filterVM)
    .subscribe(res => {
      console.log(res);
      this.spinner.hide();

      ////// //////////////////////////
      this.saveByteArray("Sample Report.pdf",res);
      ////////// /////////////////////

    },err => {
      console.log(err);
      this.spinner.hide();
    });
    ///// ///////////// //////////////////////////

  }

 saveByteArray(reportName,byte) {
  var blob = new Blob([byte],{type: "application/pdf"});
  var link = document.createElement('a');
  link.href = window.URL.createObjectURL(blob);
  var fileName = reportName;
  link.download = fileName;
  link.click();
};

第二种方法的输出显示在以下屏幕截图中：

当我尝试下载文件时，我发现它的大小明显小于HTTP响应的大小（9字节vs〜16 KB）。 我的Web API HTTP响应正在发送以下标头：

Content-Type: application/pdf
Content-Length: 16187
Content-Disposition: attachment; filename=Report.pdf; filename*=UTF-8''Report.pdf

我已经尝试了以下博客/站点中的代码，但没有成功。

Download File from Bytes in JavaScript

Typescript blob filename without link

https://blog.liplex.de/download-file-through-typescript/

https://dev.to/nombrekeff/download-file-from-blob-21ho

How do I download a file with Angular2 or greater

解决方法

问题终于解决了！ 非常感谢Ambroise Rabier，他在Angular 2 how to display .pdf file中回答了类似的问题...。他的帖子使我进入了https://medium.com/techinpieces/blobs-with-http-post-and-angular-5-a-short-story-993084811af4（也要感谢）

所做的更改：

这是我的service.ts文件（问题中未共享）， https://pastebin.com/vhucnvAX

仅更改：我添加了一行

responseType: 'blob' as 'json'

在我的服务类的第一个函数configureOptions（）中。我从服务的构造函数中调用此函数。

我的component.ts文件：https://pastebin.com/d1gB4V8x