Umi/React搞定之将后端返回的二进制文件流，在前端输出为文件并直接下载

Umi/React：一键下载二进制文件流

简介

在前端开发中，将后端返回的二进制文件流输出为文件并直接下载，是一项看似简单却颇具挑战性的任务。然而，有了强大的前端框架 Umi/React，这个难题迎刃而解。

安装和项目创建

首先，通过 npm install umi 安装 Umi/React。随后，使用 umi new my-app 创建一个新项目。

路由添加

接下来，在 src/pages/index.js 中添加一个路由来处理后端请求：

import { useEffect, useState } from 'react';
import { Button, message } from 'antd';
import axios from 'axios';

const IndexPage = () => {
  const [file, setFile] = useState(null);

  useEffect(() => {
    axios.get('/api/download').then(res => {
      setFile(res.data);
    }).catch(err => {
      message.error('下载文件失败');
    });
  }, []);

  const downloadFile = () => {
    const url = window.URL.createObjectURL(new Blob([file]));
    const link = document.createElement('a');
    link.href = url;
    link.download = 'file.txt';
    link.click();
  };

  return (
    <>
      <Button type="primary" onClick={downloadFile}>下载文件</Button>
    </>
  );
};

export default IndexPage;

请求处理和下载模拟

在上述代码中，我们使用 useEffect 发起后端请求，并使用 axios 获取二进制文件流，将其存储在 state 中。点击下载按钮后，我们通过创建并模拟点击一个 a 标签来触发下载。

项目启动

完成上述步骤后，通过 umi dev 启动项目。访问项目页面，点击下载按钮即可下载后端返回的文件。

结论

借助 Umi/React，我们轻而易举地实现了二进制文件流下载功能。这不仅提高了开发效率，还增强了应用程序的易用性。

常见问题解答

1. 如何指定下载的文件名？
   在代码中修改 link.download = 'file.txt' 部分即可指定文件名。

2. 文件太大，导致下载缓慢。如何优化下载速度？
   可以考虑使用分片下载或增量式下载技术，将文件分成较小的块分批下载。

3. 如何在 React 中实现文件上传？
   可以使用第三方库，例如 react-dropzone 或 rc-upload，轻松实现文件上传功能。

4. 除了二进制文件流下载，Umi/React 还有哪些优势？
   Umi/React 提供了丰富的功能，包括状态管理、路由管理、数据获取、代码拆分和性能优化等。

5. Umi/React 适用于哪些项目？
   Umi/React 非常适合构建中大型前端项目，特别是需要快速开发、高性能和可扩展性的单页应用程序。