背景

页面需要做一个导出功能， 因项目人力紧张，前端来搞！

分析

1. 数据： 数据已经由后台接口返回了，前端做了分页，后台一次性返回
2. 导出工具： 经过比较采用业界流行的 xlsx npm包

demo

调用按钮

export default function App() {
  const handlerDownload = () => {
    const demoData = [
      {
        日期: "2023-03-17",
        姓名: "张三"
      },
      {
        日期: "2023-03-17",
        姓名: "李四"
      }
    ];

    const title = `导出文件.xlsx`;
    const execlData = [{ sheetName: "test", data: demoData }];
    exportExcel(execlData, title);
  };
  return (
    <div className="App">
      <button onClick={handlerDownload}>导出excel</button>
    </div>
  );
}

公共方法exportExcel

import * as xlsx from "xlsx";

export type TableDataSource = Record<string, unknown>[];

export type ExcelData = {
  sheetName: string;
  data: TableDataSource;
}[];

export const EXCEL_SUFFIX = ".xlsx";

/**
 * 导出表格数据到 excel 文件
 * @param {ExcelData} data 表格数据
 * @param {string} fileName 文件名
 */
export function exportExcel(data: ExcelData, fileName = "file.xlsx"): void {
  const wb = xlsx.utils.book_new();
  console.log("data", data);

  data?.forEach((item) => {
    wb.SheetNames.push(item.sheetName);
    wb.Sheets[item.sheetName] = xlsx.utils.json_to_sheet(item.data);
  });

  xlsx.writeFile(wb, fileName, { bookType: "xlsx", type: "binary" });
}

总结

看上去是不是so easy!

通过demo能够简单直观的了解到数据构成，调用方法。

为更复杂的导出功能做了基础。