前端 js 基于react ts的excel文件模板下载文件导入、导出

基于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文件模板下载文件导入、导出相关推荐

SpringBoot打成jar包部署，Excel模板下载文件损坏，提示恢复问题处理
Spring Boot 静态资源Excel模板文件下载遇到的坑问题描述: 使用spring boot,在resource/static目录下,有Excel模板文件, 需要提供给用户下载,用于数据的导 ...
Python 从 Excel 读取链接下载文件
Python 从 Excel 读取链接下载文件 import os from urllib.parse import urljoin, quote, unquoteimport requests im ...
SpringBoot打成jar包部署，Excel模板下载文件遇到的问题
问题一. 读取resource 目录下文件时出现路径找不到在本机测试都很顺利,当打包jar文件放到服务器上测试的时候发现了类似下面的异常信息: java.nio.file.NoSuchFileExc ...
Excel·VBA模板生成文件
不同于<python实现Excel邮件合并>,字符串内容替换生成文件,仅复制整行数据插入模板中生成工作表,单独保存为工作簿,但如果存在同名工作簿文件,则将工作表附加在该工作簿中 Sub 模 ...
【vue+springboot】excel模板下载、导入功能实现
基于VUE+SpringBoot实现excel模板下载.导入功能背景最近在工作中经常遇到批量导入的功能,而且前端还要提示导入成功几条.失败几条.哪一条数据重复.是哪一条导入的数据出现问题等,抽空写 ...
Excel与Sql Server互通导入导出跨语言
目录 Excel与Sql Server互通导入导出跨语言 1.目标Excel缺少表的列标题字段 1.1.问题的提出从这里开始 1.2.参数的正确写法 1.3.附带说一下Jet 4.0 1.4.附带说一 ...
Excel与DataBase之间的导入导出
目录 Excel与DataBase之间的导入导出前段代码 Body部分导包部分 Script部分后端代码 Util工具层 ExcelUtil工具类读取工具类写入工具类自定义注解类 Enti ...
toad导入数据_利用TOAD实现EXCEL数据在oracle的导入导出
利用TOAD实现EXCEL数据在oracle的导入导出 1.从ORACLE数据库导出成为EXCEL文件利用TOAD连接上数据库,访问某个表,我本机是选中表"OA_USER" 右键 ...
使用cardme读写VCard文件，实现批量导入导出电话簿
转载自使用cardme读写VCard文件,实现批量导入导出电话簿首先下载jar包cardme. http://sourceforge.net/projects/cardme/?source=nav ...
python亿级mysql数据库导出_Python之csv文件从MySQL数据库导入导出的方法
Python之csv文件从MySQL数据库导入导出的方法发布时间:2020-10-26 07:39:02 来源:脚本之家阅读:53 作者:张行之 Python从MySQL数据库中导出csv文件处理 ...

前端 js 基于react ts的excel文件模板下载文件导入、导出

基于react ts的excel文件模板下载文件导入、导出

按钮

模板下载

文件导入

导入接口代码

导入接口里用到的参数

文件导出

前端 js 基于react ts的excel文件模板下载文件导入、导出相关推荐

最新文章

热门文章

前端 js 基于react ts的excel文件模板下载 文件导入、导出

基于react ts的excel文件模板下载 文件导入、导出

按钮

模板下载

文件导入

导入接口代码

导入接口里用到的参数

文件导出

前端 js 基于react ts的excel文件模板下载 文件导入、导出相关推荐

最新文章

热门文章

前端 js 基于react ts的excel文件模板下载文件导入、导出

基于react ts的excel文件模板下载文件导入、导出

前端 js 基于react ts的excel文件模板下载文件导入、导出相关推荐