需求:点击Table列表中的文件名称,触发click事件,然后dispatch调取后台接口,根据返回值来确定是否下载文件。
这里面因为涉及到了后台api,所以是异步行为,这时候不能直接给a标签href属性赋值,因为点击a标签的时候会同时执行onClick方法和href属性,所以这里使用document.createElement(‘a’)动态生成a标签来实现异步下载文件的操作。
1、Table中,在"文件名称"后面增加一个下载按钮来触发click事件:
columns = [{
title: '文件名称',
dataIndex: 'fileName',
render: (text, record) => {
const { fileAddress, exportStatus, id } = record;
let url;
// 后台返回的文件地址有时候会带有协议头,有时候不带,所以添加了判断。
if (fileAddress.includes('http')) {
url = fileAddress;
} else {
// 这里使用了**缺省协议**
url = `//${fileAddress}`;
}
return (
<>
<span> {text}</span>
<Button
type='primary'
size='small'
disabled={exportStatus === 4}
onClick={e => this.downloadBankFile(e, id, url, text)}
>
下载
</Button>
</>
);
}
}]
2、在downloadBankFile函数中动态添加a标签:
downloadBankFile = (e, id, url, text) => {
const { dispatch } = this.props;
dispatch({
type: 'exportfile/fetch',
payload: {
data: {
id
}
},
callBack(status, msg) {
if (status === 200) {
// 动态生成a标签,自动下载文件
const a = document.createElement('a');
a.style.display = 'none';
a.download = text;
a.href = url;
document.body.appendChild(a);
a.click(); // 自动触发点击a标签的click事件
document.body.removeChild(a);
} else {
message.error(msg);
}
}
});
};