记录使用 xlsx 前端导出文件

记录使用 xlsx 前端导出文件

开发中会遇到表格导出文件的需求，可以使用 xlsx 和 file-saver 库完成

安装

npm i xlsx file-saver -S

基本使用

  // 假设你有一个数据数组
  const exportData = [
    { name: '张三', email: 'test@example.com', age: 20 },
    { name: '李四', email: 'test2@example.com', age: 25 },
    // ...更多数据
  ];
  // 将数组转换为工作表
  // 1.头部排放顺序
  const header = ['name', 'email', 'age'];
  // 2.头部名称
  const headerDisplay = { name: '名称', email: '邮箱', age: '年龄' };
  // 3.组成新数据
  const newData = [headerDisplay, ...exportData];
  // skipHeader = true 忽视原来的头
  const worksheet = XLSX.utils.json_to_sheet(newData, { header: header, skipHeader: true });

  // 创建工作簿并添加工作表
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

  // 生成Excel文件
  const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });

  // 使用blob和FileReader创建一个Blob URL
  const dataBlob = new Blob([excelBuffer], {
    type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8',
  });
  const blobUrl = window.URL.createObjectURL(dataBlob);

  // 使用saveAs下载文件
  saveAs(dataBlob, `data_${Date.now()}.xlsx`);

  // 清理
  window.URL.revokeObjectURL(blobUrl);

application/vnd.openxmlformats-officedocument.spreadsheetml.sheet 为 xlsx 类型 常见 MIME 类型列表

github地址

官网

中文文档

引用他人详细使用文章