react通过后端接口来下载文件时,导出的文件名为undefined,怎么解决
时间: 2024-02-21 09:00:53 浏览: 193
react-file-manager:使用React构建的文件管理器
在使用 React 请求后端接口下载文件时,通常需要在请求头中设置 `Content-Disposition` 字段,用于指定文件下载时的文件名。如果出现文件名为 `undefined` 的情况,很可能是因为这个字段没有被正确设置。你可以在请求头中添加如下代码来设置文件名:
```javascript
response.headers['Content-Disposition'] = 'attachment; filename=example.csv';
```
其中,`example.csv` 是你希望下载的文件名,可以根据实际情况进行修改。另外,如果你使用的是 axios 进行请求,可以通过设置 `responseType` 字段为 `blob` 来获取文件数据,具体代码如下:
```javascript
axios({
url: '/api/download',
method: 'GET',
responseType: 'blob' // 指定响应数据类型为 blob
}).then(response => {
const filename = 'example.csv';
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', filename);
document.body.appendChild(link);
link.click();
});
```
这段代码会在前端生成一个下载链接,并模拟用户点击下载操作,从而实现文件下载。
阅读全文