基于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

// getCsvFileconst 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();}```

總結

以上是生活随笔為你收集整理的前端 js 基于react ts的excel文件模板下载 文件导入、导出的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。