如何从响应中读取文件名 - reactJs

Posted 2023-02-22

【中文标题】如何从响应中读取文件名 - reactJs

【英文标题】：How to read filename from response - reactJs

【发布时间】：2019-12-27 16:41:32

【问题描述】：

我正在从服务器下载文件。我正在设置一个我想在前端读取的文件名。这是我在服务器上的操作方式：

string fileName = "SomeText" + DateTime.UtcNow.ToString() + ".csv";

return File(stream, "text/csv", fileName);

基本上我会返回不同类型的文件，有时是csv，有时是xlsx，有时是pdf。所以我想在前端获取文件名，所以我可以将其保存为例如SomeText.pdf，它将在本地计算机上自动保存为pdf。

这是我的前端代码：

getFileFromServer(params).then(response => 
  console.log('server response download:', response);
  const type = response.headers['content-type'];
  const blob = new Blob([response.data],  type: type, encoding: 'UTF-8' );
  //const url = window.URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = window.URL.createObjectURL(blob);
  link.download = 'file.xlsx'; // Here I want to get rid of hardcoded value instead I want filename from server
  link.click();
  link.remove(); //  Probably needed to remove html element after downloading?
);

我在“响应标头”下的“网络”选项卡中看到有一个 Content-Disposition 包含该信息：

Content-Disposition: attachment; filename="SomeText22/08/2019 10:42:04.csv";

但我不知道它在我的回复中是否可用，以及如何在我的前端部分阅读它以便我可以替换

link.download = 'file.xlsx';

使用来自服务器的路径 ..

非常感谢大家

干杯

【问题讨论】：

你发现了吗？我有同样的问题。我从后端发送内容处置标头，我也可以在浏览器的网络选项卡中看到它。但我无法在我的代码中检索它。它不在response.headers 中。下面的两个答案都不适合我。

@Muaz 我在前端创建了 switch case，创建了带有可能文件扩展名的枚举，当我正在寻找文件时，我正在将该导出类型发送到服务器，例如“.txt "、".csv"、".xlsx"，当我得到响应时，我只是将在前端选择的类型分配给文件名，就是这样，

【参考方案1】：

这是一种特殊类型的标头，因此要在前端获取此标头，后端人员应该从他的末端允许。然后你可以在响应中的标题

response.headers.get("content-disposition")

我在项目中使用的以下代码

 downloadReport(url, data) 
    fetch("url of api")
      .then(async response => 
        const filename = response.headers
          .get("content-disposition")
          .split('"')[1];
        const text = await response.text();
        return  filename, text ;
      )
      .then(responseText => this.download(responseText))
      .catch(error => 
        messageNotification("error", error.message);
        throw new Error(error.message);
      );
  

【参考方案2】：

你可以通过这种方式从Content-Disposition header 中获取filename

getFileFromServer(params).then(response => 
  // your old code
  const [, filename] = response.headers['content-disposition'].split('filename=');
  const link = document.createElement('a');
  link.download = filename;
  // your old code
);

希望这会有所帮助

【参考方案3】：

要从客户端（前端）的 Content-Disposition 获取文件名，您必须从服务器端（后端）授予权限。 Spring用户可以使用

@CrossOrigin(value = "*", exposedHeaders = "Content-Disposition")
@Controller
@RequestMapping("some endpoint")

在他们的控制器类中。

然后我们可以从前端获取文件名。

const filename = response.headers['content-disposition'].split('filename=')[1];

希望这会有所帮助。以上解决方案对我来说效果很好

【讨论】：

方法不通用，其他情况请查看developer.mozilla.org/en-US/docs/Web/HTTP/Headers/…