我正在从服务器下载文件。我在那里设置一个我想在前端读取的文件名。这是我在服务器上执行此操作的方法：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';来自服务器的路径..非常感谢大家
3 回答
梵蒂冈之花
TA贡献1900条经验 获得超5个赞
这是一种特殊类型的标头，因此要在前端获取此标头，后端人员应该允许从他的一端。然后你可以在响应中的标题
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);
});
}
蓝山帝景
TA贡献1843条经验 获得超7个赞
要从客户端（前端）的 Content-Disposition 获取文件名，您必须从服务器端（后端）授予权限。Spring用户可以使用
@CrossOrigin(value = {"*"}, exposedHeaders = {"Content-Disposition"})
@Controller
@RequestMapping("some endpoint")
在他们的控制器类中。
然后从前端我们可以使用获取文件名。
const filename = response.headers['content-disposition'].split('filename=')[1];
希望这可以帮助。上述解决方案对我来说效果很好
婷婷同学_
TA贡献1844条经验 获得超8个赞
您可以通过这种方式filename从header 获取Content-Disposition
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 回答
- 0 关注
- 77 浏览
添加回答
举报
0/150
提交
取消