fe_portal_frontend/src/utils/Download.js

/**
 * @desc:这是一个文件下载组件
 * @param:参数说明
 *    apiUrl:接口地址
 *    objectId: objectId
 *    fileId: fileId
 *    icon: 下载图片设置
 *    text: 下载文本设置
 *    method: //请求方式
 *    fileName: //下载文件命名
 *    type: //文件格式
 *    btnName: //按钮名称
 *    form: //map集合 用到的参数
 *    downFileBtnClass: 按钮样式设置
 *    downFileBtnClass: 按钮样式设置
 * 
 */
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { Button, Icon, message } from 'antd';
import { getSessionUserData, getUserToken } from '@/utils/session';
import request from 'umi-request';
import '@/assets/xsy_style.less'
import './utils.less'
import { downloadFileObjectId, downloadFile } from './DownloadUtils';


class FileDown extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      loadingStatus: true,
      buttonDisabled: false
    }
  }

  //文件下载操作
  handleDownFile = (event, apiUrl, objectId, fileId, method, fileName, type, form) => {
    event.preventDefault();
    event.stopPropagation();
    //开启loading 按钮置灰
    this.setState({
      loadingStatus: false,
      buttonDisabled: true,
    });
    if (objectId) {
      downloadFileObjectId(objectId);
    } else if (fileId) {
      downloadFile({ uid: fileId });
    } else {
      if (fileName != undefined) {
        let haveParam = apiUrl.indexOf('?') != -1;//判断路径里是否有？
        apiUrl = haveParam ? apiUrl + '&n=' + fileName : apiUrl + '?n=' + fileName + '.' + type;
      }
      window.location.href = apiUrl;
    }
    // window.fetch(apiUrl, {
    //   method: method,
    //   params: method === "GET" ? { ...form?.getFieldsValue() } : null,
    //   data: method === "POST" ? { ...form?.getFieldsValue() } : null,
    //   headers:{
    //     JwtToken: getSessionUserData() == null ? null : getSessionUserData().userId,
    //     Authorization: getUserToken(),
    //   },
    //   // 重要
    //   responseType: 'blob',
    // }).then(res => {
    //   // const blob = new Blob([res]);
    //   // const objectURL = URL.createObjectURL(blob);
    //   // let btn = document.createElement('a');
    //   // btn.download = `${fileName}.${type}`;
    //   // btn.href = objectURL;
    //   // btn.click();
    //   // URL.revokeObjectURL(objectURL);
    //   // btn = null;
    //   // 这里才是下载附件逻辑处理的地方
    //   res.blob().then(blob => {
    //     const blobUrl = window.URL.createObjectURL(blob);
    //     const aElement = document.createElement("a");
    //     const filename = `${fileName}.${type}`; // 设置文件名称
    //     aElement.href = blobUrl; // 设置a标签路径
    //     aElement.download = filename;
    //     aElement.click();
    //     window.URL.revokeObjectURL(blobUrl);
    //   });

    //   this.setState({
    //     loadingStatus: true,
    //     buttonDisabled: false,
    //   });
    // }).catch((error) => {
    //   //关闭loading 按钮恢复正常
    //   this.setState({
    //     loadingStatus: true,
    //     buttonDisabled: false,
    //   });
    //   message.error('下载失败');
    // });
    setTimeout(() => {
      this.setState({
        loadingStatus: true,
        buttonDisabled: false,
      });
    }, 1000);
  };

  render() {
    const { apiUrl, objectId, fileId, icon, method, fileName, type, btnName, form, tag, } =
    {
      tag: "0",
      ...this.props
    };
    const { loadingStatus, buttonDisabled } = this.state;


    return (
      <>
        {
          tag === 'a' ?
            <Button type='text' onClick={(event) => this.handleDownFile(event, apiUrl, objectId, fileId, method, fileName, type, form)}>
              {btnName}
            </Button> :
            tag === 'vrbre' ?
              <Button
                // type="primary"
                size="small"
                onClick={(event) => this.handleDownFile(event, apiUrl, objectId, fileId, method, fileName, type, form)}
                disabled={buttonDisabled}
                className="vrbre"
              // style={{background: "rgb(8,66,173) !important",border:"1px solid #FFFFFF !important",color:"#FFFFFF !important"}}
              >
                {/* <Icon type={loadingStatus ? icon : 'loading'} /> */}
                {btnName}
              </Button> :
              <Button
                type="primary"
                onClick={(event) => this.handleDownFile(event, apiUrl, objectId, fileId, method, fileName, type, form)}
                disabled={buttonDisabled}
              >
                {/* <Icon type={loadingStatus ? icon : 'loading'} /> */}
                {btnName}
              </Button>
        }
      </>
    );
  }
}

//定义属性 类型以及是否必填项
FileDown.proTypes = {
  apiUrl: PropTypes.isRequired,//地址
  objectId: PropTypes.isRequired, //objectId
  fileId: PropTypes.isRequired, //fileId
  method: PropTypes.isRequired,//请求方式
  fileName: PropTypes.isRequired,//下载文件命名
  type: PropTypes.isRequired,//文件格式
  btnName: PropTypes.isRequired,//按钮名称
  form: PropTypes.isRequired,//map集合 用到的参数
};
//定义属性的默认值
FileDown.defaultProps = {
  icon: 'download',
};
export default FileDown;