前端渲染excel

整个 excel 的信息

const excelObj = {
  SheetNames: [sheetName], // 所有的 sheet（表）
  Sheets: {
    [`${sheetName}`]: sheetObj, // 表对应的对象
  },
};

sheetObj

const sheetObj = XLSX.utils.aoa_to_sheet([sheetHeaders, ...res]);
// 表头 sheetHeaders = ['姓名', '性别', ...]
// 行数据 res = [['huazui', 'boy'], ['tina', 'girl'], ...]
// sheetObj['!merges'] = merges; 合并单元格
merges = [
    {
        s: { c: i, r: j }, // start 起始单元格（c： 第几列， r： 第几行）
        e: { c: i, r: j }, // end 结束单元格 
    }
]
// sheetObj['!cols'] = cols; 单元格长度
const cols = [
  { wch: 20 },
  { wch: 20 },
  ...
];

生成dataStr

const dataStr = XLSX.write(excelObj/* excel信息 */, exportOpts as any);
const exportOpts = {
  bookType: 'xlsx',
  type: 'binary',
};

生成二进制数据

const createBuffer = (str: any) => {
  const buffer = new ArrayBuffer(str.length);
  const dataView = new Uint8Array(buffer);
  for (let i = 0; i < str.length; i++) dataView[i] = str.charCodeAt(i) & 0xff;
  return buffer;
};

生成blob

const blob = new Blob([createBuffer(dataStr)], {
  type: 'application/octet-stream',
});

前端下载

const downLoad = (blob: Blob) => {
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.setAttribute('download', '事件列表.xlsx');
    a.setAttribute('href', url);

    a.style.display = 'none';
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(url);
};