使用React从FileStream return下载文件

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;

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}`);
});