在react+ts中实现点击按钮网络请求获取文件流打开一个新页面预览文件

在React中结合TypeScript（TS）创建一个功能，当用户点击按钮时，发起网络请求获取文件流，并将其显示在一个新页面上进行预览，可以按照以下步骤进行：

1. **安装依赖**:
首先需要安装`axios`库用于发送HTTP请求，以及`fs`模块（Node.js内置，用于处理文件系统操作）。通过`npm`或`yarn`安装：

   npm install axios

2. **导入并配置类型声明**:
在`import`语句处引入类型定义，以便于类型安全的编程：

   import axios from 'axios';
   import fs from 'fs'; // 引入Node.js的fs模块

3. **定义文件预览组件**:
创建一个React组件，例如`FilePreview`，它包含一个点击事件处理器和状态来保存文件信息：

   interface FilePreviewProps {
     onFileClick: () => void;
   }

   const FilePreview: React.FC<FilePreviewProps> = ({ onFileClick }) => {
     const [fileURL, setFileURL] = useState<string | null>(null);

     const handleFileClick = async () => {
       try {
         const response = await axios.get('/api/download', { responseType: 'arraybuffer' }); // 模拟API请求
         const fileBuffer = response.data; // 获取到二进制数据
         // 将二进制转换为Blob对象，然后创建URL
         const blob = new Blob([fileBuffer], { type: 'application/octet-stream' });
         setFileURL(URL.createObjectURL(blob));
       } catch (error) {
         console.error('Error fetching file:', error);
       }
     };

     return (
       <div>
         <button onClick={handleFileClick}>预览文件</button>
         {fileURL && (
           <a href={fileURL} download target="_blank">
             <img src={fileURL} alt="文件预览" /> {/* 使用占位图片 */}
           </a>
         )}
       </div>
     );
   };

4. **将组件用于项目中**:
在其他React组件中，你可以作为子组件传递给父组件，并处理点击事件：

const ParentComponent = () => {
  const handleFilePreview = () => {
    // 调用外部方法，如从路由或API管理层触发下载
    dispatch(fetchFileForPreview());
  };

  return (
    <div>
      <FilePreview onFileClick={handleFilePreview} />
    </div>
  );
};