React实现导出的几种方式

首先下这个包 xlsx

可以通过JSON数据转成Exel导出
第一步，获取JSON步骤
…
第二步，JSON转Exel数据

const fileName = `历史告警_${moment().format("YYYY-MM-DD-HH:mm:ss")}`; // 文件名
   const data = jsonData.map((v) => {
     const tabData = {};
     tabData["设备名称"] = v.equipment?.name;
     // ...
     return tabData;
   });

第三步，导出

const wopts = { bookType: "xlsx", bookSST: false, type: "binary" };
const wb= { SheetNames: ["历史告警"], Sheets: {}, Props: {} };
wb.Sheets["历史告警"] = XLSX.utils.json_to_sheet(data, {
  origin: "A2",
});
wb.Sheets["历史告警"].A1 = { t: "s", v: fileName };// 表格第一行写文件名
saveAs(
  new Blob([s2ab(XLSX.write(wb, wopts))], {
    type: "application/octet-stream",
  }),
  `${fileName}.${wopts.bookType === "biff2" ? "xls" : wopts.bookType}`
);

调用的函数如下

export const s2ab = (s) => {
  if (typeof ArrayBuffer !== "undefined") {
    const buf = new ArrayBuffer(s.length);
    const view = new Uint8Array(buf);
    for (let i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
    return buf;
  }
  const buf = new Array(s.length);
  for (let i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xff;
  return buf;
};
export const saveAs = (obj, fileName) => {
  const tmpa = document.createElement("a");
  tmpa.download = fileName || "下载";
  tmpa.href = URL.createObjectURL(obj); // 绑定a标签
  tmpa.click(); // 模拟点击实现下载
  // 延时释放
  setTimeout(() => {
    URL.revokeObjectURL(obj); // 用URL.revokeObjectURL()来释放这个object URL
  }, 100);
};

另一种导出方式不需要包，过程也比较清晰，导出.csv格式文件

export const handleExport = async (
  data: ChartData[],
  reportTitle: string,
  title: string[]
) => {
  const jsonData = mergeData(data);
  if (!jsonData.length) {
    message.warning("暂无数据");
    return;
  }
  // 列标题，逗号隔开，每一个逗号就是隔开一个单元格
  const fileName = `${reportTitle}_${moment().format("YYYY-MM-DD-HH:mm:ss")}`;
  let str = fileName.concat("\n", title.join(","), "\n");
  // 增加\t为了不让表格显示科学计数法或者其他格式
  jsonData.forEach((json) => {
    title.forEach((t) => {
      str = str.concat(`${json[t] || ""}\t,`);
    });
    str = str.concat("\n");
  });
  // encodeURIComponent解决中文乱码
  const uri = `data:text/csv;charset=utf-8,\ufeff${encodeURIComponent(str)}`;
  // 通过创建a标签实现
  const link = document.createElement("a");
  link.href = uri;
  // 对下载的文件命名
  link.download = `${fileName}.csv`;
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
};

最后一种就是 直接把表格导出 适用复杂的Exel结构。。。除此之外，也没有更好的方法。。。。

const downloadExel = async () => {
    if (!propertiesData?.length) {
      message.warning('暂无数据');
      return;
    }
    const fileName = `${monitor?.name || '数据列表'}_${moment().format('YYYY-MM-DD-HH:mm:ss')}`;
    const wopts = {
      bookType: 'xlsx',
      bookSST: false,
      type: 'binary',
    };
    const wb = { SheetNames: [monitor?.name], Sheets: {}, Props: {} };
    const tableCon = document.getElementById('exelTable');
    const tables = tableCon?.querySelectorAll('table');
    wb.Sheets[monitor?.name] = XLSX.utils.table_to_sheet(tables[0], {
      origin: 'A2',
    });
    wb.Sheets[monitor?.name].A1 = {
      t: 's',
      v: `${monitor?.name}数据报表`,
    };
    saveAs(
      new Blob([s2ab(XLSX.write(wb, wopts))], {
        type: 'application/octet-stream',
      }),
      `${fileName}.${wopts.bookType === 'biff2' ? 'xls' : wopts.bookType}`
    );
  };