React项目中，如何把数据导出到Excel文件

写在前面

不管是作项目仍是本身学习过程当中，咱们可能会遇到导出数据的需求，好比导出数据到Excel文件。react

为了方便你们的学习和开发，这里介绍一种导出数据到Excel文件的方法。git

方法简介

我在这里使用 exceljs 包来导出数据，若是你有兴趣，能够阅读一下他们的文档：github

英文文档：github.com/exceljs/exc…数组

中文文档：github.com/exceljs/exc…markdown

若是你想直接看Demo和源码，能够直接访问我在codesandbox部署的代码：codesandbox.io/s/react-exp…app

导出后的数据以下：oop

方法代码详解

1. 引入依赖包和须要导出的数据

首先咱们须要引入依赖包，定义导出Excel文件须要的数据，这里提供一个对象数组便可，后面的代码会从该数组中提取须要的数据。实例代码以下：学习

import ExcelJs from "exceljs";

const mockData = [
  {
    Name: "Allen",
    Gender: "Male",
    Height: "175"
  },
  {
    Name: "Tom",
    Gender: "Male",
    Height: "180"
  },
  {
    Name: "Jane",
    Gender: "Female",
    Height: "170"
  }
];
复制代码

2. 使用依赖包定义一个对象，后期使用该对象设置参数和导出数据

// 获取sheet对象，设置当前sheet的样式
// showGridLines: false 表示不显示表格边框
let workbook = new ExcelJs.Workbook();
let sheetName = "Allen_test.xlsx";
let sheet = workbook.addWorksheet(sheetName, {
	views: [{ showGridLines: false }]
});
// 每个sheet对象对应一个Excel文件中的表，若是你想子一个Excel中显示多个表，能够定义多个sheet
// let sheet2 = workbook.addWorksheet("Second sheet", { views: [{ showGridLines: false }] });
复制代码

3. 获取表格数据的header信息

咱们在制做Excel表格的时候，通常都须要给每一列设置一个表头，用来讲明这一列展现的是什么信息，咱们以前只定义了表格数据（前面的对象数组），这里根据表格数据，获取对应的表头信息：优化

let columnArr = [];
for (let i in mockData[0]) {
  let tempObj = { name: "" };
  tempObj.name = i;
  columnArr.push(tempObj);
}
复制代码

4. 设置表格顶部的信息及样式

在表格中，顶部能够展现该表格的标题，说明，注意事项等信息。如上图中的“This is the header text” 和“As of: 07/09/2021”。spa

咱们可使用以下代码进行设置顶部信息，设置过程当中，能够定义一个起始单元格，而后从该单元格开始，根据columns和rows数组，以此向右和向下的单元格中进行绘制。

sheet.addTable({
  name: `Header`,
  ref: "A1", // 头部信息从A1单元格开始显示
  headerRow: true,
  totalsRow: false,
  style: {
    theme: "",
    showRowStripes: false,
    showFirstColumn: true,
    width: 200
  },
  columns: [{ name: "This is the header text" }],  // 若是传递多个数组元素，会以此在B1, C3...单元格中绘制
  rows: [[`As of: 07/09/2021`]]   // 若是传递多个数组元素，会以此在A2, A3...单元格中绘制
});
复制代码

5. 设置表格的主要数据部分

顶部数据绘制完成以后，下面继续绘制主题的数据部分，这是最关键的，咱们导出Excel文件就是为了导出这些数据嘛。

// 设置表格的主要数据部分
let headerName = "RequestsList";
sheet.addTable({
  name: headerName,
  ref: "A5", // 主要数据从A5单元格开始
  headerRow: true,
  totalsRow: false,
  style: {
    theme: "TableStyleMedium2",
    showRowStripes: false,
    width: 200
  },
  columns: columnArr ? columnArr : [{ name: "" }],  // 把以前定义的表头数据传递进来
  rows: mockData.map((e) => {
    let arr = [];
    for (let i in e) {
      arr.push(e[i]);
    }
    return arr;
  })
});
复制代码

6. 美化数据部分的样式

如今数据能够正常导出了，可是导出的数据样式是比较丑的，能够参考一下代码，优化这部分的样式。对代码不明白能够阅读注释。

// 设置单元格的文字样式
sheet.getCell("A1").font = { size: 20, bold: true };

// 设置每一列的宽度
sheet.columns = sheet.columns.map((e) => {
  const expr = e.values[5];
  switch (expr) {
    case "Name":
      return { width: 50 };
    case "Gender":
      return { width: 40 };
    case "Height":
      return { width: 30 };
    default:
      return { width: 20 };
  }
});

const table = sheet.getTable(headerName);
for (let i = 0; i < table.table.columns.length; i++) {
  // 表格主体数据是从A5开始绘制的，一共有三列。这里是获取A5到，B5，C5单元格，定义表格的头部样式
  sheet.getCell(`${String.fromCharCode(65 + i)}5`).font = { size: 12 };
  sheet.getCell(`${String.fromCharCode(65 + i)}5`).fill = {
    type: "pattern",
    pattern: "solid",
    fgColor: { argb: "c5d9f1" }
  };

  // 获取表格数据部分，定义其样式
  for (let j = 0; j < table.table.rows.length; j++) {
    let rowCell = sheet.getCell(`${String.fromCharCode(65 + i)}${j + 6}`);
    rowCell.alignment = { wrapText: true };
    rowCell.border = {
      bottom: {
        style: "thin",
        color: { argb: "a6a6a6" }
      }
    };
  }
}
table.commit();
复制代码

7. 将数据导出Excel，自动下载到本地

如今Excel已经绘制完成了，咱们须要把数据导出到本地，代码以下，很是简单：

// 定义下载文件的方法
const writeFile = (fileName, content) => {
  const link = document.createElement("a");
  const blob = new Blob([content], {
    type: "application/vnd.ms-excel;charset=utf-8;"
  });
  link.download = fileName;
  link.href = URL.createObjectURL(blob);
  link.click();
};

// 表格的数据绘制完成，定义下载方法，将数据导出到Excel文件
workbook.xlsx.writeBuffer().then((buffer) => {
  writeFile(sheetName, buffer);
});
复制代码

代码总览

到这里就完成了导出Excel的全部工做，这里列出全部代码，方便你进一步参考。

若是你想设置表格的其余属性，能够查看官方文档，我认为是很是详细的。

英文文档：github.com/exceljs/exc…

中文文档：github.com/exceljs/exc…

import React from "react";
import ExcelJs from "exceljs";

const mockData = [
  {
    Name: "Allen",
    Gender: "Male",
    Height: "175"
  },
  {
    Name: "Tom",
    Gender: "Male",
    Height: "180"
  },
  {
    Name: "Jane",
    Gender: "Female",
    Height: "170"
  }
];

const ExportToExcel = () => {
  const exportToExcel = (data) => {
    let sheetName = "Allen_test.xlsx";
    let headerName = "RequestsList";

    // 获取sheet对象，设置当前sheet的样式
    // showGridLines: false 表示不显示表格边框
    let workbook = new ExcelJs.Workbook();
    let sheet = workbook.addWorksheet(sheetName, {
      views: [{ showGridLines: false }]
    });
    // let sheet2 = workbook.addWorksheet("Second sheet", { views: [{ showGridLines: false }] });

    // 获取每一列的header
    let columnArr = [];
    for (let i in data[0]) {
      let tempObj = { name: "" };
      tempObj.name = i;
      columnArr.push(tempObj);
    }

    // 设置表格的头部信息，能够用来设置标题，说明或者注意事项
    sheet.addTable({
      name: `Header`,
      ref: "A1", // 头部信息从A1单元格开始显示
      headerRow: true,
      totalsRow: false,
      style: {
        theme: "",
        showRowStripes: false,
        showFirstColumn: true,
        width: 200
      },
      columns: [{ name: "This is the header text" }, { name: "Hahaha" }],
      rows: [[`As of: 07/09/2021`], [`Allen`]]
    });

    // 设置表格的主要数据部分
    sheet.addTable({
      name: headerName,
      ref: "A5", // 主要数据从A5单元格开始
      headerRow: true,
      totalsRow: false,
      style: {
        theme: "TableStyleMedium2",
        showRowStripes: false,
        width: 200
      },
      columns: columnArr ? columnArr : [{ name: "" }],
      rows: data.map((e) => {
        let arr = [];
        for (let i in e) {
          arr.push(e[i]);
        }
        return arr;
      })
    });

    sheet.getCell("A1").font = { size: 20, bold: true }; // 设置单元格的文字样式

    // 设置每一列的宽度
    sheet.columns = sheet.columns.map((e) => {
      const expr = e.values[5];
      switch (expr) {
        case "Name":
          return { width: 50 };
        case "Gender":
          return { width: 40 };
        case "Height":
          return { width: 30 };
        default:
          return { width: 20 };
      }
    });

    const table = sheet.getTable(headerName);
    for (let i = 0; i < table.table.columns.length; i++) {
      // 表格主体数据是从A5开始绘制的，一共有三列。这里是获取A5到，B5，C5单元格，定义表格的头部样式
      sheet.getCell(`${String.fromCharCode(65 + i)}5`).font = { size: 12 };
      sheet.getCell(`${String.fromCharCode(65 + i)}5`).fill = {
        type: "pattern",
        pattern: "solid",
        fgColor: { argb: "c5d9f1" }
      };

      // 获取表格数据部分，定义其样式
      for (let j = 0; j < table.table.rows.length; j++) {
        let rowCell = sheet.getCell(`${String.fromCharCode(65 + i)}${j + 6}`);
        rowCell.alignment = { wrapText: true };
        rowCell.border = {
          bottom: {
            style: "thin",
            color: { argb: "a6a6a6" }
          }
        };
      }
    }
    table.commit();

    const writeFile = (fileName, content) => {
      const link = document.createElement("a");
      const blob = new Blob([content], {
        type: "application/vnd.ms-excel;charset=utf-8;"
      });
      link.download = fileName;
      link.href = URL.createObjectURL(blob);
      link.click();
    };

    // 表格的数据绘制完成，定义下载方法，将数据导出到Excel文件
    workbook.xlsx.writeBuffer().then((buffer) => {
      writeFile(sheetName, buffer);
    });
  };

  return (
    <button
      onClick={() => {
        exportToExcel(mockData);
      }}
    >
      Export to Excel
    </button>
  );
};

export default ExportToExcel;
复制代码