从后端向前端发送文件。无法恢复其旧形式

Question

在这里，我有一个对按钮单击做出反应的功能 并从我的后端获取文件。

onDownload() {

this.http.get('http://localhost:8080/backend/invoice/1/download',
  {responseType: 'blob'})
  .subscribe(res =>
  console.log(res))



}

到目前为止，我很高兴，因为在chrome控制台中我没有收到任何错误。 响应在控制台中如下所示：

Java后端的返回类型为InputStream（方法注释@Produces（MediaType.MULTIPART_FORM_DATA））

然后我发现 https://stackblitz.com/edit/angular-blob-file-download?file=app%2Fapp.component.ts

并查看了app.component.ts中的ngOnInit（）

ngOnInit() {
const data = 'some text';
const blob = new Blob([data], { type: 'application/octet-stream' });

this.fileUrl = this.sanitizer.bypassSecurityTrustResourceUrl(window.URL.createObjectURL(blob));


}

当前，我认为我的前端收到了一个Blob。 因此，我可以从以“ this.fileUrl =“ 并输入我的Blob。

在.html内，我有一个按钮来启动onDownload（）函数 另一个标签将文件保存在我的本地硬盘上。

<div>


<button (click)="onDownload()">Herunterladen</button>
</div>

<a [href]="safeResourceUrl" download="file.txt">DownloadFile</a>

同时，我将onDownload（）方法更改为

onDownload() {

    this.http.get('http://localhost:8080/backend/invoice/1/download',
      {responseType: 'blob'})
      .subscribe(res => this.safeResourceUrl=this.sanitizer.bypassSecurityTrustResourceUrl(window.URL.createObjectURL(res)))

  }

单击“ Herunterladen”，然后单击“ DownloadFile”链接后， 我无法阅读的.txt文件

或者，如果我将.html内的标记中的文件名更改为.pdf， 我收到“无法加载pdf文档”

我想要得到的是原始pdf，它存储在数据库中，并且是从后端发送的。

以前有人遇到过同样的问题吗？谢谢您的帮助。

Answer 1

我将功能更改为

onDownload() {
    window.open(`http://localhost:8080/backend/invoice/${this.invoice.invoiceNr}/download`, 'blank');
  }

现在可以使用了：）