技术背景

项目采用react+ts+antd4.23.2，在开发业务的过程中，由于要紧急前端支撑table转换成表格文件下载下来，和下载图片的功能。

调研下载表格方案

采用xlsx包

npm install xlsx

使用案例

import {
  useEffect,
  useRef,
} from "react";
import { downGroupTop } from "./help";
import { Table } from "antd";

export function 基本用法() {
  const ref = useRef(null);
  const dataSource = [
    {
      test: "1",
      test1: "2",
      "test1-2": "121",
      test3: "4",
    },
  ];

  useEffect(() => {
    // getCol()
  }, []);
  return (
    <div ref={ref}>
      <div
        onClick={() => {
          downGroupTop(ref);
        }}
      >
        下载
      </div>
      <div>
        <Table
          dataSource={dataSource}
          
          columns={[
            {
              title: "测试",
              dataIndex: "test",
              children: [
                {
                  title: "测试-1",
                  dataIndex: "test1",
                },
                {
                  title: "测试-2",
                  dataIndex: "test1-2",
                },
              ],
            },
            {
              title: "测试2",
              dataIndex: "test",
              children: [
                {
                  title: "测试2-1",
                  dataIndex: "test3",
                },
              ],
            },
          ]}
        ></Table>
      </div>
    </div>
  );
}

export default 基本用法;

方法封装，文件名自行扩展

import * as XLSX from "xlsx";
const deepCloneELement = (
  dom: HTMLElement
): HTMLElement => {
  let div: HTMLDivElement | null =
    document.createElement("div");
  const str = dom.outerHTML;
  div.innerHTML = str;
  const returnDom = div.childNodes[0];
  // console.log(str, "div");
  div = null; // 通过标记法进行垃圾回收
  return returnDom as HTMLElement;
};
export const downGroupTop = (
  ref: React.RefObject<HTMLDivElement>
) => {
// 兼容表头吸顶
  if (
    ref.current!.querySelectorAll(
      "table"
    ).length == 2
  ) {
    const [headerTable, bodyTable] =
      ref.current!.querySelectorAll(
        "table"
      ) as unknown as HTMLTableElement[];
    const tbody =
      deepCloneELement(
        bodyTable
      )!.querySelector("tbody")!;
    const downTable = deepCloneELement(
      headerTable
    );
    tbody
      .querySelectorAll(
        "[aria-hidden=true]"
      )!
      .forEach((ele) => {
        console.log(ele);
        ele.remove();
      });
    downTable.appendChild(tbody);
    const wb =
      XLSX.utils.table_to_book(
        downTable
      );
    XLSX.writeFile(
      wb,
      "SheetJSTable.xlsx"
    );
  } else if (
    // 处理没有表头吸定的表格
    ref.current!.querySelectorAll(
      "table"
    ).length == 1
  ) {
    const table =
      ref.current!.querySelector(
        "table"
      );

    const downTable = deepCloneELement(
      table!
    );
    // 清理需要隐藏的dom
    downTable
      .querySelectorAll(
        "[aria-hidden=true]"
      )!
      .forEach((ele) => {
        console.log(ele);
        ele.remove();
      });
    const wb =
      XLSX.utils.table_to_book(downTable);
    XLSX.writeFile(
      wb,
      "SheetJSTable.xlsx"
    );
  }
};