使用React从FileStream return下载文件

基础概念

React 是一个用于构建用户界面的 JavaScript 库。FileStream 是 Node.js 中的一个类，用于读取和写入文件。结合这两者，可以在 React 应用中实现文件的下载功能。

类型

前端直接下载：通过前端代码直接触发文件下载。
后端生成下载链接：后端生成文件的下载链接，前端通过该链接进行下载。

应用场景

文件管理系统：用户可以通过点击按钮下载文件。
数据导出：用户可以将数据导出为 Excel、CSV 等格式的文件并下载。
文件分享：用户可以将文件分享给其他人，通过链接下载。

实现方法

以下是一个使用 React 和 Node.js 实现文件下载的示例：

前端代码（React）

import React, { useState } from 'react';

const DownloadButton = () => {
  const [fileUrl, setFileUrl] = useState('');

  const handleDownload = async () => {
    try {
      const response = await fetch('/api/download');
      if (response.ok) {
        const blob = await response.blob();
        const url = window.URL.createObjectURL(blob);
        setFileUrl(url);
        const a = document.createElement('a');
        a.href = url;
        a.download = 'example.txt';
        document.body.appendChild(a);
        a.click();
        a.remove();
        window.URL.revokeObjectURL(url);
      }
    } catch (error) {
      console.error('Error downloading file:', error);
    }
  };

  return (
    <div>
      <button onClick={handleDownload}>Download File</button>
      {fileUrl && <p>Downloading...</p>}
    </div>
  );
};

export default DownloadButton;

后端代码（Node.js）

const express = require('express');
const fs = require('fs');
const path = require('path');

const app = express();
const PORT = 3000;

app.get('/api/download', (req, res) => {
  const filePath = path.join(__dirname, 'example.txt');
  const fileName = 'example.txt';

  res.setHeader('Content-Disposition', `attachment; filename=${fileName}`);
  res.setHeader('Content-Type', 'application/octet-stream');

  const fileStream = fs.createReadStream(filePath);
  fileStream.pipe(res);
});

app.listen(PORT, () => {
  console.log(`Server is running on http://localhost:${PORT}`);
});