前端table表格使用xlsx与file-saver和xlsx-style数据导出xlsx表格

• 使用三方库
  

• 使用中项目引入

import FileSaver from "file-saver";
import XLSX from "xlsx";
import { write } from "xlsx-style";
import { s2ab } from "@/utils/util";

• 对应代码

// s2ab方法
export function s2ab(s) {
  let buf = new ArrayBuffer(s.length);
  let view = new Uint8Array(buf);
  for (let i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
  return buf;
}

// 假设有以下数据需要导出
const data = [
  { name: '张三', age: 18, gender: '男' },
  { name: '李四', age: 20, gender: '女' },
  { name: '王五', age: 22, gender: '男' },
];
let headerReplace = {};
headerReplace.name = "姓名";
headerReplace.age = "昵称";
headerReplace.gender = "手机号";
//数据源
const sheet = [headerReplace, ...data];
// 创建一个sheet表格   使用json_to_sheet, 数据格式比较为  数组包对象, 不然会报错
const worksheet = XLSX.utils.json_to_sheet(sheet, {
  // 这里可以通过设置header, 来对导出数据 列 顺序的排序
  // 实测可以只写一部分, 也可以整体排序
  // ["id", "name", "age"] 相当于把上面整个表头给限制顺序了
  header: [],
  // 跳过 Header, 就是把原来表格数据的表头去掉了, headerReplace渲染的数据 "冒充" 表头了
  skipHeader: true,
});
//为单元格加上样式
// 设置样式
for (let [key, value] of Object.entries(worksheet)) {
  if (key.startsWith("!")) continue;
  // value是一个单元格对象（Cell Objects）,s表格为样式对象（Style Objects）
  value.s = {
    alignment: { vertical: "center", horizontal: "center" },
    border: {},
  };
}
worksheet["!cols"] = [{wpx: 150},{wpx: 150},{wpx: 150}] // 表格对应宽度
// 简单理解为在内存中 创建一个xlsx 文件
const newWorkBook = XLSX.utils.book_new();
// 把worksheet添加到workbook中
XLSX.utils.book_append_sheet(newWorkBook, worksheet, "SheetJS");
// 写入文件, 是否直接下载或选择下载到指定路径取决于浏览器的下载设置, 后面的是文件名称和后缀

谷歌浏览器开启如图则选择下载路径，否则直接下载

// 导出表格，这种导出的表格是不会有样式的，就是一个只有数据的表格。
// XLSX.writeFile(newWorkBook, `活动报名人员.xlsx`);
// 如果要样式，需要用xlsx-style的write方法
// 将工作簿转换为二进制数据
let wopts = { bookType: "xlsx", bookSST: false, type: "binary" };
let wbout = write(newWorkBook, wopts);
// 否则 使用
// const wbout = XLSX.write(newWorkBook, wopts);
// 导出表格
FileSaver.saveAs(new Blob([s2ab(wbout)], { type: "" }), `表格.xlsx`);