脚本宝典收集整理的这篇文章主要介绍了React实现导入导出Excel文件,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
这里我是使用的是antd的Upload上传组件
引用antd部分代码
import { Button,Table,Upload } From 'antd'; <Upload {...PRops} fileList={state.fileList}> <Button tyPE="Primary" >Excel导入</Button> </Upload> <Button type="primary" onClick={handleexport}>Excel导出</Button>
首先分析一下工作:
安装xlsx:npm install xlsx --save-dev
主要介绍用到的核心api:
// workbook 理解: { SheetNames: ['sheet1', 'sheet2'], Sheets: { // worksheet 'sheet1': { // cell 'A1': { ... }, // cell 'A2': { ... }, ... }, // worksheet 'sheet2': { // cell 'A1': { ... }, // cell 'A2': { ... }, ... } } }
核心代码 :
const f = file; const reader = new FileReader(); reader.onload = function (e) { try{ const datas = e.target.result; const workbook = XLSX.read(datas, {type: "binary",}); //解析datas const First_worksheet = workbook.Sheets[workbook.SheetNames[0]]; //是工作簿中的工作表的第一个sheet const jsonArr = XLSX.utils.sheet_to_json(first_worksheet, {header: 1,defval:''}); //将工作簿对象转换为JSON对象数组 handleimpotedJson(jsonArr)// 数组处理 message.success('Excel上传解析成功!') }catch(e){ message.error('文件类型不正确!或文件解析错误') } }; reader.readAsBinaryString(f);
理解:
核心代码:
const downloadExcel = () =>{ const JSON = handleExportedJson(data) const sheet = XLSX.utils.json_to_sheet(json); openDownloadDiaLOG(sheet2blob(sheet,"Sheet1"), "下载文件.xls") } const handleExportedJson = (array) =>{...} // 处理Json数据 const openDownloadDialog = (url, saveName) =>{...} // 打开下载 const sheet2blob = (sheet, sheetName) =>{...} // 转成blob类型
理解:
之前为啥没放自实现的代码,那不是因为发现有好用的插件嘛,代码很简单。
核心代码:
// 直接导出文件 let dataTable = []; //excel文件中的数据内容 let option = {}; //option代表的就是excel文件 dataTable = data; //数据源 option.fileName = "下载文件"; //excel文件名称 console.log("data===",dataTable) option.datas = [ { sheetData: dataTable, //excel文件中的数据源 sheetName: 'Sheet1', //excel文件中sheet页名称 sheetFilter: ['id', 'name', 'belong', 'step','tag'], //excel文件中需显示的列数据 sheetHeader: ['项目id', '项目名称', '所属公司', '项目阶段','项目标签'], //excel文件中每列的表头名称 } ] let toExcel = new ExportJsonExcel(option); //生成excel文件 toExcel.saveExcel(); //下载excel文件
上为这个插件的基本用法,还支持导出Blob,支持压缩等,详细见官网
解释核心 option:
/*多个sheet*/ /*每个sheet为一个object */ [{ sheetData:[], // 数据 sheetName:'', // (非必需)sheet名字,默认为sheet1 sheetFilter:[], //(非必需)列过滤(只有在 data 为 object 下起作用) sheetHeader:[] // 第一行,标题 columnWidths: [] //(非必需)列宽,需与列顺序对应 }]
浏览器支持:ie 10+ 我测试下来demo在chrom、Safari、IE下都是能用的。
还有不懂得可以看GitHub demo源码
到此这篇关于React实现导入导出Excel文件的文章就介绍到这了,更多相关React 导入导出Excel 内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典!
以上是脚本宝典为你收集整理的React实现导入导出Excel文件全部内容,希望文章能够帮你解决React实现导入导出Excel文件所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。