如何使用JavaScript实现前端导入和导出excel文件(H5编辑器实战复盘)

// 解析并提取excel数据letreader=newFileReader();
reader.onload=function(e) {
letdata=e.target.result;
letworkbook=XLSX.read(data, {type: 'binary'});
letsheetNames=workbook.SheetNames; // 工作表名称集合letdraftObj= {}
sheetNames.forEach(name=> {
// 通过工作表名称来获取指定工作表letworksheet=workbook.Sheets[name]; 
for(letkeyinworksheet) {
// v是读取单元格的原始值if(key[0] !=='!') {
if(draftObj[key[0]]) {
draftObj[key[0]].push(worksheet[key].v)
        }else {
draftObj[key[0]] = [worksheet[key].v]
        }
      }
    }
  });
// 生成ant-table支持的数据格式letsourceData=Object.values(draftObj).map((item,i) => ({ key: i+'', name: item[0], value: item[1]}))

constdata= [
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 }
];

import { Chart } from'@antv/f2';
importReact, { memo, useEffect, useRef } from'react';
importChartImgfrom'@/assets/chart.png';
importstylesfrom'./index.less';
import { IChartConfig } from'./schema';
interfaceXChartPropsextendsIChartConfig {
isTpl: boolean;
}
constXChart= (props: XChartProps) => {
const { isTpl, data, color, size, paddingTop, title } =props;
constchartRef=useRef(null);
useEffect(() => {
if (!isTpl) {
constchart=newChart({
el: chartRef.current||undefined,
pixelRatio: window.devicePixelRatio, // 指定分辨率      });
// step 2: 处理数据constdataX=data.map(item=> ({ ...item, value: Number(item.value) }));
// Step 2: 载入数据源chart.source(dataX);
// Step 3：创建图形语法，绘制柱状图，由 genre 和 sold 两个属性决定图形位置，genre 映射至 x 轴，sold 映射至 y 轴chart        .interval()
        .position('name*value')
        .color('name');
// Step 4: 渲染图表chart.render();
    }
  }, [data, isTpl]);
return (
<divclassName={styles.chartWrap}><divclassName={styles.chartTitle} style={{ color, fontSize: size, paddingTop }}>        {title}
</div>      {isTpl?<imgsrc={ChartImg} alt="dooring chart"/> : <canvasref={chartRef}></canvas>}</div>  );
};
exportdefaultmemo(XChart);

constgenerateExcel= () => {
letoption= {};  //option代表的就是excel文件letdataTable= [];  //excel文件中的数据内容letlen=list.length;
if (len) {
for(leti=0; i<len; i++) {
letrow=list[i];
letobj:any= {};
for(letkeyinrow) {
if(typeofrow[key] ==='object') {
letarr=row[key];
obj[key] =arr.map((item:any) => (typeofitem==='object'?item.label : item)).join(',')
                }else {
obj[key] =row[key]
                }
            }
dataTable.push(obj);  //设置excel中每列所获取的数据源        }
    }
lettableKeys=Object.keys(dataTable[0]);
option.fileName=tableName;  //excel文件名称option.datas= [
          {
sheetData: dataTable,  //excel文件中的数据源sheetName: tableName,  //excel文件中sheet页名称sheetFilter: tableKeys,  //excel文件中需显示的列数据sheetHeader: tableKeys,  //excel文件中每列的表头名称          }
    ]
lettoExcel=newExportJsonExcel(option);  //生成excel文件toExcel.saveExcel();  //下载excel文件  }