基于react ts的excel文件模板下载 文件导入、导出
按钮
{pagePermission?.pageActionModels.find(item => item.name === 'OPP_DOWNLOAD_TEMPLATE') &&
<Button icon={<CopyOutlined />} onClick={(): void => headerHandBtn('down')}>
{t('OPP_DOWNLOAD_TEMPLATE')}
</Button>}
{pagePermission?.pageActionModels.find(item => item.name === 'OPP_DATAIMPORT') &&
<Upload {...uploadProps2}>
<Button icon={<PlusOutlined />} loading={uploading} >
{t('OPP_DATAIMPORT')}
</Button>
</Upload>
}
{pagePermission?.pageActionModels.find(item => item.name === 'OPP_DATAEXPORT') &&
<Button icon={<ExportOutlined />} onClick={(): void => headerHandBtn('export')}>
{t('OPP_DATAEXPORT')}
</Button>
}
模板下载
getOppCsv: async (headers:any) => {
const res = await axios.get(`${URL}/api/Opportunity/ExecleDnowloadTemplet`, headers);
console.log(res.data, '下载模板的接口返回值')
// headers接收一个对象
return res.data
},
// 下载模板的接口返回值: Blob {size: 23220, type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"}
size: 23220
type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
__proto__: Blob
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/8dee1b7dd787aa9f077e6acdb2ae4b07.png#pic_center)
// getCsvFile
const getCsvFile = async () => {
const fileName = 'OppTemplate';
let d = {
"responseType": "blob"
}
let result = await req.getOppCsv(d);
downLoadCsv(result, fileName)
}
// 下载/导出
const downLoadCsv = (result: any, fileName: any) => {
let url = window.URL.createObjectURL(new Blob([result]));
let link = document.createElement('a');
link.style.display = 'none';
link.href = url;
link.setAttribute('download', `${fileName}.xlsx`);
document.body.appendChild(link);
link.click();
}
文件导入
const uploadProps2 = {
name: 'file',
accept: '.xlsx',
onChange(info: UploadChangeParam<UploadFile<any>> ) {},
beforeUpload: (file: RcFile, fileList: RcFile[]) => {
setUploading(true);
req.importOpportunity(file).then(res => {
console.log(res, '文件导入---');
if(res.code === 0 && res.msg === 'OK') {
message.success('success');
} else {
message.error('failed');
}
setUploading(false);
});
return false;
}
}
导入接口代码
// 导入数据
importOpportunity: async (data: any) => {
const formData = new FormData();
formData.append('file', data)
const res = await axios.post(`${URL}/api/Opportunity/importExecle`, formData, multipartHeader)
return res.data;
},
导入接口里用到的参数
const multipartHeader = {
headers: {
'Content-Type': 'multipart/form-data'
}
}
文件导出
// 导出数据
getExportOpp: async (headers:any) => {
const res = await axios.get(`${URL}/api/Opportunity/ExportOpp`, headers);
console.log(res);
return res;
},
// 数据导出
const getExportOpp = async() => {
setUploading(true);
let d = {
"responseType": "blob"
}
let result = await req.getExportOpp(d);
console.log(result);
if(result.status === 200) {
setUploading(false);
message.success('export success');
} else {
message.error('export failed');
}
const fileName= 'fileName';
downLoadCsv(result.data, fileName);
}
// 下载/导出
const downLoadCsv = (result: any, fileName: any) => {
let url = window.URL.createObjectURL(new Blob([result]));
let link = document.createElement('a');
link.style.display = 'none';
link.href = url;
link.setAttribute('download', `${fileName}.xlsx`);
document.body.appendChild(link);
link.click();
}```