react基于Ant Desgin Upload實現(xiàn)導入導出

更新時間：2024年01月07日 15:55:37 作者：夏林夕

本文主要介紹了react基于Ant Desgin Upload實現(xiàn)導入導出,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

效果圖：

導入：

導出：

導入代碼：

    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，因為文件格式有誤
            message.error('文件格式有誤，導入失??！').then(r => {
            });
        }
    },
};


const isUpload = () => {
        Modal.warn({
            title: '重新導入',
            content: (
                <div style={{width: '500px'}}>
                    <div style={{marginBottom: '20px'}}>
                        點擊上傳 會重新導入文件數(shù)據(jù)
                    </div>
                    <Upload
                        {...propsConfig}
                        direction="vertical" maxCount={1}
                        showUploadList={false}
                    >
                        <Button
                            onClick={againImport}
                            icon={<UploadOutlined/>}>
                            上傳
                        </Button>
                    </Upload>
                </div>
            ),
            onOk() {
                // 在彈窗點擊確認后執(zhí)行的操作

            },
            okText: '確定', // 修改確定按鈕的文字
            // style: {width: '1000px', height: '500px'}, // 設置寬度和高度
        });
    };


           <Button type="primary" onClick={isUpload} icon={<UploadOutlined/>}
                    >
                        重新導入
                    </Button>

導出代碼

const config2 = {
    title: '導出配置人員信息',
    content: (
        <>
            <ReachableContext.Consumer>{() => `是否要導出配置人員信息`}</ReachableContext.Consumer>
        </>
    ),
}

    const exportData = () => {
        exportDataExcel(screeningDate).then((res) => {
            if (res.data === 'false') {
                message.error("導出失敗").then(r => {})
                return;
            }
            console.log('Export response:', res);
            //設置下載文件類型為xlsx 不同的類型type也不一樣，創(chuàng)建URL對象
            let url = window.URL.createObjectURL(new Blob([res],
                {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'}))
            // 創(chuàng)建A標簽
            let link = document.createElement('a')
            link.style.display = 'none'
            link.href = url
            // 設置的下載文件文件名
            const fileName = "配置人員信息";
            // 觸發(fā)點擊方法
            link.setAttribute('download', fileName)
            document.body.appendChild(link)
            link.click()
            message.success("導出成功").then(r => {
            });

        });
    }


  <Button type="primary" style={{marginBottom: '30px'}}
                                        onClick={async () => {
                                            const confirmed = await modal.confirm(config2);
                                            if (confirmed) {
                                                // 調(diào)用另一個方法
                                                exportData();
                                            }
                                        }}
                                >
                                    導出
                                </Button>

到此這篇關于react基于Ant Desgin Upload實現(xiàn)導入導出的文章就介紹到這了,更多相關react 導入導出內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: