Javascript 如何从response-reactJs读取文件名

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

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: attachment; filename="SomeText22/08/2019 10:42:04.csv";

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

link.download = 'file.xlsx';

使用来自服务器的路径

多谢各位

---

干杯

这是一种特殊类型的头球，因此，要在前端获得此头球，后端人员应允许从其末端开始。然后可以在响应中添加标题

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);
      });
  }

---

通过这种方式，您可以从

内容处置

标题中获取

文件名

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
});

---

希望这将有助于

从客户端（前端）的内容处置中获取文件名。您必须从服务器端（后端）授予权限。Spring用户可以使用

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

在他们的控制器类中

然后从前端，我们可以使用获取文件名

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

---

希望这有帮助。上述解决方案对我很有效

你找到了吗？我也有同样的问题。我从后端发送content disposition标头，并且可以在浏览器的“网络”选项卡中看到它。但我无法在代码中检索它。它不在

响应.headers中。下面的两个答案对我都不起作用。@Muaz我在前端创建了开关盒，创建了具有可能的文件扩展名的枚举，当我查找文件时，我将该导出类型发送到服务器，例如“.txt”、“.csv”、“.xlsx”当我得到响应时，我只是将前端选择的类型分配给文件名，也就是说，方法不是泛型的，请检查其他情况