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 处理动态文件下载。
