react实现下载

React 实现文件下载的方法

在 React 中实现文件下载功能可以通过多种方式完成，以下是几种常见的方法：

使用 HTML5 的 <a> 标签

通过创建一个隐藏的 <a> 标签并触发点击事件来实现下载。适用于已知文件 URL 的情况。

const handleDownload = (url, filename) => {
  const link = document.createElement('a');
  link.href = url;
  link.download = filename;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};

使用 Fetch API 或 Axios 下载文件

适用于需要从后端动态获取文件内容的场景，例如需要传递认证信息或处理二进制数据。

const handleDownload = async (url, filename) => {
  const response = await fetch(url);
  const blob = await response.blob();
  const blobUrl = window.URL.createObjectURL(blob);

  const link = document.createElement('a');
  link.href = blobUrl;
  link.download = filename;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  window.URL.revokeObjectURL(blobUrl);
};

使用第三方库

例如 file-saver 库可以简化下载逻辑，支持更复杂的文件类型处理。

import { saveAs } from 'file-saver';

const handleDownload = (url, filename) => {
  fetch(url)
    .then(response => response.blob())
    .then(blob => saveAs(blob, filename));
};

直接下载静态文件

如果文件是项目静态资源，可以直接通过路径下载。

<a href="/path/to/file.pdf" download="filename.pdf">Download PDF</a>

注意事项

• 跨域问题：确保文件 URL 允许跨域访问，否则可能触发 CORS 错误。
• 文件名：通过 download 属性指定文件名，但某些浏览器可能忽略此属性。
• 性能：大文件下载时需考虑内存和用户体验，可以添加加载状态提示。

以上方法可以根据实际需求选择，通常推荐使用 fetch 或 file-saver 处理动态文件下载。