前端使用xlsx导出excel文件

npm安装依赖进行导出

// 安装依赖
npm install xlsx

import { utils, writeFile } from 'xlsx';

// 导出方法
const onExport = () => {
  // 二维数组第一项表示列表名，后边的则是列表名对应的值
  const excelData = [ 
    ['姓名', '年龄', '性别'],
    ['dyx', '26', '男'],
    ['dyxweb', '26', '男'],
  ];
  const wb = utils.book_new();
  const ws = utils.aoa_to_sheet(excelData);
  utils.book_append_sheet(wb, ws, 'Sheet1'); // 将数据添加到工作薄
  writeFile(wb, 'test.xlsx'); // 导出Excel
}

异步加载xlsx进行导出

直接npm安装会使打包后体积变大，可通过异步加载的形式实现导出且不影响打包的体积。

// 导出方法
const onExport = () => {
  // 异步加载资源
  const { utils, writeFile } = await import("https://cdn.sheetjs.com/xlsx-0.18.5/package/xlsx.mjs");
  // 二维数组第一项表示列表名，后边的则是列表名对应的值
  const excelData = [
    ['姓名', '年龄', '性别'],
    ['dyx', '26', '男'],
    ['dyxweb', '26', '男'],
  ];
  const wb = utils.book_new();
  const ws = utils.aoa_to_sheet(excelData);
  utils.book_append_sheet(wb, ws, 'Sheet1'); // 将数据添加到工作薄
  writeFile(wb, 'test.xlsx'); // 导出Excel
}