Angular Http 客户端文件下载 - 来自响应的文件名

Question

我正在尝试从 api url 获取文件。我的目标是在输入文件字段中显示该文件(之前上传的文件)及其名称。目前我已经创建了以下服务功能:

  getDocument(): Observable<Blob> {
    const request = this.documentUrl;
    return this.http.get(request, { responseType: 'blob' });
  }

当我使用它的时候

    this.myService.getDocument().subscribe(
      response => {
        console.log(response);
      }

我得到一个根据定义没有名称的 Blob。我已经看到我可以将它转换成一个文件并给它一个名字，但这个解决方案不符合我的需要。有没有一种方法可以从后端获取文件，或者有没有一种方法可以使用它原来的名称从 Blob 中重建它？

Answer 1

请确保后端 API 在响应 header 中设置文件名。通常，文件名包含在 content-disposition header 中。

例如:它看起来像content-disposition: attachment;filename=XYZ.csv。

在angular中，你可以像下面这样提取它:

.subscribe((response: HttpResponse<Blob>) => {
  // Extract content disposition header
  const contentDisposition = response.headers.get('content-disposition');

  // Extract the file name
  const filename = contentDisposition
        .split(';')[1]
        .split('filename')[1]
        .split('=')[1]
        .trim()
        .match(/"([^"]+)"/)[1];
});