React实现导⼊导出Excel⽂件
⽬录
表⽰层
业务层
核⼼插件xlsx
excel 导⼊
excel 导出
excel 导出插件（js-export-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>
业务层
⾸先分析⼀下⼯作：
导⼊Excel⼯作：⽤户上传Excel表格，将表格内容转换为json对象⽅便后端处理，后端将数据存储数据库；
导出Excel⼯作：获取后端json格式数据，前端将数据转换为sheet⼯作薄对象，⽣成的对象转换为Excel表格下载导出；下⾯就是技术层⾯的细节
核⼼插件xlsx
安装xlsx：npm install xlsx --save-dev
主要介绍⽤到的核⼼api：
workbook.Sheets[workbook.SheetNames[0]] // 取到workbook对象中的第⼀个sheet表，规定⽤户只有⼀个sheets，不理解workbook的下⾯有解释
XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], {header:1,defval:''}）// 将⼯作簿对象转换为JSON对象数组，注意defval不设置‘'则默认值为empty
XLSX.utils.json_to_sheet(json) // 将json对象转换为⼯作簿对象
// workbook 理解：
{
SheetNames: ['sheet1', 'sheet2'],
Sheets: {
// worksheet
'sheet1': {
// cell
'A1': { ... },
// cell
'A2': { ... },
...
},
/
/ worksheet
'sheet2': {
// cell
'A1': { ... },
// cell
'A2': { ... },
...
}
}
}
excel 导⼊
核⼼代码：
const f = file;
const reader = new FileReader();
try{
const datas = sult;
const workbook = ad(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){
<('⽂件类型不正确！或⽂件解析错误')
}
};
理解：
FileReader对象实例化file对象在onload事件⾥进⾏处理
XLSX.utils.sheet_to_json(first_worksheet, {header: 1,defval:''}) 将解析出的⼯作簿对象转化为JSON对象excel 导出
核⼼代码：
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类型
理解：
得到处理后的json格式数据
XLSX.utils.json_to_sheet(json) 转换成sheet⼯作簿对象
sheet2blob(sheet,saveName) 将⼯作簿对象转换成 blob
openDownloadDialog 创建blob地址通过<a>标签实现下载动作react to的用法
excel 导出插件（js-export-excel）
之前为啥没放⾃实现的代码，那不是因为发现有好⽤的插件嘛，代码很简单。
核⼼代码：
// 直接导出⽂件
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:
fileName 下载⽂件名(默认：download)
datas 数据:
/*多个sheet*/
/*每个sheet为⼀个object */
[{
sheetData:[], // 数据
sheetName:'', // （⾮必需）sheet名字，默认为sheet1
sheetFilter:[], //（⾮必需）列过滤(只有在 data 为 object 下起作⽤)
sheetHeader:[] // 第⼀⾏，标题
columnWidths: [] //（⾮必需）列宽，需与列顺序对应
}]
浏览器⽀持：ie 10+ 我测试下来demo在chrom、Safari、IE下都是能⽤的。
实现效果
还有不懂得可以看
结语
到此这篇关于React实现导⼊导出Excel⽂件的⽂章就介绍到这了，更多相关React 导⼊导出Excel 内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。