在使用 TypeScript 进行 React 开发时，下载
文件的方式与 JavaScript 类似。可以通过设置请求头中的 `Content-Disposition` 字段来指定下载
文件的
文件名。具体代码如下：
```typescript
import
axios, {
AxiosResponse } from '
axios';
interface DownloadResponse extends
AxiosResponse {
headers: {
'content-disposition'?: string;
}
}
const downloadFile = async () => {
try {
const response: DownloadResponse = await
axios.get('/api/download', {
responseType: 'blob',
});
const contentDisposition = response.headers['content-disposition'];
const match = contentDisposition?.match(/filename=(.*)/);
const filename = match ? match[1] : 'example.csv';
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.create
Element('a');
link.href = url;
link.setAttribute('download', filename);
document.body.appendChild(link);
link.click();
} catch (error) {
console.error(error);
}
};
```
这段代码中，我们通过使用 `
axios.get` 方法来发送 GET 请求，并设置 `responseType` 为 `blob`，以获取
文件数据。然后，我们从响应头中获取 `content-disposition` 字段，解析出
文件名。如果没有获取到
文件名，则默认为 `example.csv`。最后，我们使用 `window.URL.createObjectURL` 方法来生成
文件 URL，创建一个 `<a>` 标签并将其添加到页面上，然后模拟用户点击下载操作，实现
文件下载。
1885
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
