当前位置：首页 > React

react如何下载文件

2026-03-31 16:37:18React

使用 `fetch` 和 `Blob` 下载文件

通过 fetch 获取文件数据，转换为 Blob 对象，生成下载链接并触发点击：

const downloadFile = async (url, filename) => {
  const response = await fetch(url);
  const blob = await response.blob();
  const downloadUrl = window.URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = downloadUrl;
  link.download = filename;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  window.URL.revokeObjectURL(downloadUrl);
};

调用示例：downloadFile('https://example.com/file.pdf', 'document.pdf')。

使用 `axios` 下载文件

适用于需要添加请求头或处理大文件分片的情况：

import axios from 'axios';

const downloadWithAxios = async (url, filename) => {
  const response = await axios.get(url, { responseType: 'blob' });
  const blob = new Blob([response.data]);
  const downloadUrl = window.URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = downloadUrl;
  link.download = filename;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  window.URL.revokeObjectURL(downloadUrl);
};

调用时需确保 axios 已安装。

直接通过 `<a>` 标签下载

适用于公开可访问的静态文件，无需处理权限或动态内容：

<a href="https://example.com/file.pdf" download="document.pdf">
  下载文件
</a>

注意：跨域文件可能受浏览器安全策略限制。

处理后端返回的文件流

当后端返回文件流时，通过设置 Content-Disposition 头部自动下载：

const handleStreamResponse = async (apiEndpoint) => {
  const response = await fetch(apiEndpoint);
  const contentDisposition = response.headers.get('Content-Disposition');
  const filename = contentDisposition.split('filename=')[1];
  const blob = await response.blob();
  const url = window.URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = filename;
  link.click();
};

需确保后端正确设置响应头。

react如何下载文件