Ant Design封装文件下载组件：让下载更便捷、更友好

在软件开发中，经常会遇到需要下载文件的场景，而Ant Design是一个流行的前端UI组件库，它提供了丰富的组件，可以帮助开发者快速构建高质量的UI界面。利用Ant Design提供的Button、Loading、Modal等组件，我们可以轻松地封装一个文件下载组件，实现点击按钮直接下载文件到本地、下载时有loading提示、下载完成loading消失、下载接口报错时能提示接口返回的错误信息等功能。

首先，在项目中安装Ant Design库，然后在组件中导入所需的组件：

import { Button, Modal, message } from 'antd';

接下来，创建下载组件的类，并定义其属性和方法：

class DownloadComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      error: null,
    };
  }

  // 点击按钮下载文件
  handleDownload = () => {
    this.setState({ loading: true });
    fetch(this.props.url)
      .then(res => res.blob())
      .then(blob => {
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement('a');
        a.href = url;
        a.download = this.props.filename;
        a.click();
        window.URL.revokeObjectURL(url);
        this.setState({ loading: false });
      })
      .catch(error => {
        this.setState({ loading: false, error });
        message.error(error.message);
      });
  };

  render() {
    return (
      <>
        <Button type="primary" onClick={this.handleDownload} loading={this.state.loading}>
          下载
        </Button>
        {this.state.error && <Modal title="下载失败" visible={true}>{this.state.error}</Modal>}
      </>
    );
  }
}

最后，在需要使用下载组件的地方，实例化该组件并传入必要的参数：

<DownloadComponent url="http://example.com/file.zip" filename="file.zip" />

通过这种方式，我们就可以轻松地将Ant Design下载组件集成到项目中，并实现文件下载的各种功能，让下载操作更加便捷、友好。