react基于Ant Desgin Upload實(shí)現(xiàn)導(dǎo)入導(dǎo)出
效果圖:
導(dǎo)入:

導(dǎo)出:

導(dǎo)入代碼:
const propsConfig = {
name: 'file',
action: importDataExcelApi, //后端接口
headers: {
authorization: 'authorization-text',
loginUserId: sessionStorage.getItem('userLogin')
? JSON.parse(sessionStorage.getItem('userLogin')).userId : null
},
onChange(info) {
if (info.file.status !== 'uploading') {
console.log("++++++", info.file, "-------------" + info.fileList);
console.log(info.file.response.success);
}
if (info.file.status === 'done') {
message.success(`${info.file.name} 文件上傳成功!`).then(r => {
});
importDataRef.current(); // 調(diào)用 importData 方法
console.warn(sessionStorage.getItem('userLogin'))
} else if (info.file.status === 'error') {
// 不再觸發(fā) importDataExcelApi,因?yàn)槲募袷接姓`
message.error('文件格式有誤,導(dǎo)入失??!').then(r => {
});
}
},
};
const isUpload = () => {
Modal.warn({
title: '重新導(dǎo)入',
content: (
<div style={{width: '500px'}}>
<div style={{marginBottom: '20px'}}>
點(diǎn)擊上傳 會(huì)重新導(dǎo)入文件數(shù)據(jù)
</div>
<Upload
{...propsConfig}
direction="vertical" maxCount={1}
showUploadList={false}
>
<Button
onClick={againImport}
icon={<UploadOutlined/>}>
上傳
</Button>
</Upload>
</div>
),
onOk() {
// 在彈窗點(diǎn)擊確認(rèn)后執(zhí)行的操作
},
okText: '確定', // 修改確定按鈕的文字
// style: {width: '1000px', height: '500px'}, // 設(shè)置寬度和高度
});
};
<Button type="primary" onClick={isUpload} icon={<UploadOutlined/>}
>
重新導(dǎo)入
</Button>導(dǎo)出代碼
const config2 = {
title: '導(dǎo)出配置人員信息',
content: (
<>
<ReachableContext.Consumer>{() => `是否要導(dǎo)出配置人員信息`}</ReachableContext.Consumer>
</>
),
}
const exportData = () => {
exportDataExcel(screeningDate).then((res) => {
if (res.data === 'false') {
message.error("導(dǎo)出失敗").then(r => {})
return;
}
console.log('Export response:', res);
//設(shè)置下載文件類型為xlsx 不同的類型type也不一樣,創(chuàng)建URL對(duì)象
let url = window.URL.createObjectURL(new Blob([res],
{type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'}))
// 創(chuàng)建A標(biāo)簽
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
// 設(shè)置的下載文件文件名
const fileName = "配置人員信息";
// 觸發(fā)點(diǎn)擊方法
link.setAttribute('download', fileName)
document.body.appendChild(link)
link.click()
message.success("導(dǎo)出成功").then(r => {
});
});
}
<Button type="primary" style={{marginBottom: '30px'}}
onClick={async () => {
const confirmed = await modal.confirm(config2);
if (confirmed) {
// 調(diào)用另一個(gè)方法
exportData();
}
}}
>
導(dǎo)出
</Button>到此這篇關(guān)于react基于Ant Desgin Upload實(shí)現(xiàn)導(dǎo)入導(dǎo)出的文章就介紹到這了,更多相關(guān)react 導(dǎo)入導(dǎo)出內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
react?umi?刷新或關(guān)閉瀏覽器時(shí)清除localStorage方式
這篇文章主要介紹了react?umi?刷新或關(guān)閉瀏覽器時(shí)清除localStorage方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
TypeScript在React中的應(yīng)用技術(shù)實(shí)例解析
這篇文章主要為大家介紹了TypeScript在React中的應(yīng)用技術(shù)實(shí)例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04
采用React編寫小程序的Remax框架的編譯流程解析(推薦)
這篇文章主要介紹了采用React編寫小程序的Remax框架的編譯流程解析(推薦),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-04-04
React-Native TextInput組件詳解及實(shí)例代碼
這篇文章主要介紹了React-Native TextInput組件詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2016-10-10
React使用PropTypes實(shí)現(xiàn)類型檢查功能
這篇文章主要介紹了React高級(jí)指引中使用PropTypes實(shí)現(xiàn)類型檢查功能的方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-02-02
在React中寫一個(gè)Animation組件為組件進(jìn)入和離開加上動(dòng)畫/過度效果
這篇文章主要介紹了在React中寫一個(gè)Animation組件為組件進(jìn)入和離開加上動(dòng)畫/過度效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
React DOM-diff 節(jié)點(diǎn)源碼解析
這篇文章主要為大家介紹了React DOM-diff節(jié)點(diǎn)源碼解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02
解決react-connect中使用forwardRef遇到的問題
這篇文章主要介紹了解決react-connect中使用forwardRef遇到的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-05-05
在React中強(qiáng)制重新渲染的4 種方式案例代碼
這篇文章主要介紹了在React中強(qiáng)制重新渲染的4 種方式,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12

