react下载功能实现

使用文件下载库实现下载功能

在React中实现文件下载功能，可以通过file-saver库轻松完成。该库提供了简单的API来保存文件到用户设备。

安装file-saver库：

npm install file-saver

实现下载功能：

import { saveAs } from 'file-saver';

const handleDownload = () => {
  const fileContent = '这是要下载的文件内容';
  const blob = new Blob([fileContent], { type: 'text/plain;charset=utf-8' });
  saveAs(blob, 'example.txt');
};

通过创建隐藏链接实现下载

不需要额外库的情况下，可以创建隐藏的<a>标签来触发下载：

const handleDownload = () => {
  const fileContent = '这是要下载的文件内容';
  const blob = new Blob([fileContent], { type: 'text/plain' });
  const url = URL.createObjectURL(blob);

  const link = document.createElement('a');
  link.href = url;
  link.download = 'example.txt';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
  URL.revokeObjectURL(url);
};

下载服务器上的文件

当需要从服务器下载文件时，可以使用fetch或axios：

const downloadFromServer = async () => {
  try {
    const response = await fetch('https://example.com/file.pdf');
    const blob = await response.blob();
    const url = window.URL.createObjectURL(blob);

    const link = document.createElement('a');
    link.href = url;
    link.download = 'file.pdf';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    window.URL.revokeObjectURL(url);
  } catch (error) {
    console.error('下载失败:', error);
  }
};

处理大文件下载

对于大文件下载，可能需要显示进度条：

const downloadLargeFile = async () => {
  const response = await fetch('https://example.com/large-file.zip');
  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;
    const progress = Math.round((receivedLength / contentLength) * 100);
    console.log(`下载进度: ${progress}%`);
  }

  const blob = new Blob(chunks);
  const url = URL.createObjectURL(blob);
  // 创建下载链接并触发点击
};

使用React组件封装下载功能

可以创建一个可复用的下载按钮组件：

const DownloadButton = ({ url, filename, children }) => {
  const handleDownload = async () => {
    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 || url.split('/').pop();
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    window.URL.revokeObjectURL(downloadUrl);
  };

  return <button onClick={handleDownload}>{children}</button>;
};

使用示例：

<DownloadButton 
  url="https://example.com/report.pdf" 
  filename="年度报告.pdf"
>
  下载报告
</DownloadButton>