当前位置：首页 > React

react如何点击下载

2026-01-24 03:59:21React

使用HTML的`<a>`标签实现下载

在React中，可以通过创建一个隐藏的<a>标签并触发点击事件来实现下载功能。这种方法适用于已知文件URL的情况。

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

使用Blob对象下载动态内容

当需要下载动态生成的内容时，可以先将内容转换为Blob对象，然后创建对象URL进行下载。

const downloadTextAsFile = (content, fileName) => {
  const blob = new Blob([content], { type: 'text/plain' });
  const url = URL.createObjectURL(blob);

  const link = document.createElement('a');
  link.href = url;
  link.download = fileName || 'file.txt';
  document.body.appendChild(link);
  link.click();

  setTimeout(() => {
    document.body.removeChild(link);
    URL.revokeObjectURL(url);
  }, 0);
};

使用fetch API下载远程文件

对于需要从服务器获取的文件，可以使用fetch API先获取文件内容，再转换为Blob进行下载。

const downloadRemoteFile = async (fileUrl, fileName) => {
  try {
    const response = await fetch(fileUrl);
    const blob = await response.blob();
    const url = URL.createObjectURL(blob);

    const link = document.createElement('a');
    link.href = url;
    link.download = fileName || fileUrl.split('/').pop();
    document.body.appendChild(link);
    link.click();

    setTimeout(() => {
      document.body.removeChild(link);
      URL.revokeObjectURL(url);
    }, 0);
  } catch (error) {
    console.error('Download failed:', error);
  }
};

使用第三方库实现下载

对于更复杂的下载需求，可以考虑使用第三方库如file-saver：

安装：

npm install file-saver

使用示例：

react如何点击下载

import { saveAs } from 'file-saver';

const downloadWithFileSaver = () => {
  const content = 'Hello, world!';
  const blob = new Blob([content], { type: 'text/plain;charset=utf-8' });
  saveAs(blob, 'hello.txt');
};