当前位置：首页 > React

react实现下载功能

2026-01-27 18:53:37React

React 实现文件下载功能

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

使用 `<a>` 标签下载

创建一个隐藏的 <a> 标签，设置 download 属性，然后触发点击事件：

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

// 使用示例
<button onClick={() => downloadFile('file.pdf', 'document.pdf')}>
  下载文件
</button>

使用 fetch API 下载二进制文件

当需要从 API 获取文件数据时，可以使用 fetch：

react实现下载功能

const downloadFromApi = 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);
};

使用 FileSaver 库

FileSaver.js 是一个流行的库，简化了文件保存过程：

npm install file-saver

使用示例：

react实现下载功能

import { saveAs } from 'file-saver';

const downloadWithFileSaver = () => {
  const blob = new Blob(["文件内容"], {type: "text/plain;charset=utf-8"});
  saveAs(blob, "example.txt");
};

下载 Canvas 或图片

对于 canvas 生成的内容：

const downloadCanvas = (canvasId, filename) => {
  const canvas = document.getElementById(canvasId);
  const dataURL = canvas.toDataURL('image/png');
  const link = document.createElement('a');
  link.download = filename;
  link.href = dataURL;
  link.click();
};

处理大文件下载

对于大文件，可以显示下载进度：

const downloadLargeFile = async (url, filename) => {
  const response = await fetch(url);
  const reader = response.body.getReader();
  const contentLength = +response.headers.get('Content-Length');
  let receivedLength = 0;
  let chunks = [];

  while(true) {
    const {done, value} = await reader.read();
    if(done) break;
    chunks.push(value);
    receivedLength += value.length;
    console.log(`下载进度: ${(receivedLength/contentLength*100).toFixed(2)}%`);
  }

  const blob = new Blob(chunks);
  const blobUrl = window.URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = blobUrl;
  link.download = filename;
  link.click();
};