/** * @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' ? : tag === 'vrbre' ? : } ); } } //定义属性 类型以及是否必填项 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;