React 学习笔记（十三）—— 导出和导入Excel 数据

1. 安装XLSX插件：npm run install --save xlsx
2. 在使用的组件中导入xlsx，import XLSX from "xlsx";
3. 实现导入

// typescript语法，使用antd中的上传按钮
uploadExcel = (file: any, fileList: any[]): boolean => {
    let reader = new FileReader();
    reader.onload = (e: any) => {
      let result = e.target.result;
      let wb = XLSX.read(result, {
        type: "binary",
      });
      // 获取表1中的数据，转换为数组
      let data: any = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
      let keys = Object.keys(data[0]);
      let columns = keys.map((item, index) => {
        return {
          title: item,
          dataIndex: item,
          key: item + index,
        };
      });
      data.forEach((item: any, index: number) => {
        item.key = item + index;
      });
      this.setState({
      	// 设置表格数据
        tableData: data,
        // 设置表头
        tableColumns: columns,
      });
    };
	// 读取文件
    reader.readAsBinaryString(file);

    return false;
  };

4. 实现导出

downloadExcel = () => {
	// 显示在表格中数据
    let json: any[] = [
      { 姓名: "张三", 年龄: "20", 学号: "1" },
      { 姓名: "李四", 年龄: "23", 学号: "2" },
      { 姓名: "王五", 年龄: "13", 学号: "3" },
    ];
    let tmpData = json[0];
    json.unshift({});
    let keyMap: any = [];
    for (let k in tmpData) {
      keyMap.push(k);
      json[0][k] = k;
    }
    // console.log("json", json);
    // 用来保存转换好的json
    tmpData = [];
    let arr: any = json.map((v: any, i: number) =>
      keyMap.map((k: any, j: number) =>
        Object.assign(
          {},
          {
            v: v[k],
            position:
              (j > 25 ? this.getCharCol(j) : String.fromCharCode(j + 65)) +
              (i + 1),
          }
        )
      )
    );
    // console.log(arr, "arr");
    let arr1: any = [];

    arr.forEach((item1: any) => {
      item1.forEach((item2: any) => {
        arr1.push(item2);
      });
    });
    // console.log(arr1, "arr1");
    arr1.forEach((v: any, i: number) => {
      // console.log("v", v);
      tmpData[v.position] = {
        v: v.v,
      };
    });
    // console.log(tmpData);
    // 设置表格区域
    let outPutArea = Object.keys(tmpData);
    // console.log(outPutArea);

    let tmpWB = {
      SheetNames: ["sheet1"], // 表标题
      Sheets: {
        sheet1: Object.assign(
          {},
          tmpData, // 表数据
          {
            "!ref": outPutArea[0] + ":" + outPutArea[outPutArea.length - 1], // 设置填充区域
          }
        ),
      },
    };
    console.log(tmpWB);
    // 导出excel
    XLSX.writeFile(tmpWB, "模板.xlsx");
  };