【前端】每天一个简单库的使用-XLSX.JS

在日常的开发中，我们常常遇到由前端来实现导出数据到Excel的需求。在项目中我使用过两个库XLSX.JS和ExcelJS.

XLSX.JS和ExcelJS

特性	XLSX.JS	ExcelJS
文件格式支持	极其广泛 (XLS, XLSX, XLSB, CSV)	主要专注于 XLSX
生态系统	纯JS,有社区版和付费专业版	纯JS，开源功能完整
浏览器支持	压缩后体积很小 130KB	体积较大1MB+
解析性能	非常快	文件大解析相对较慢
样式设置	社区版本支持有限	支持非常完善，可以轻松设置字体、颜色、边框、填充等
公式	支持的不是很好	支持非常好
图表	不支持	支持

我一直是使用XLSX.JS，后来因为需要在导出的Excel中添加链接，修改颜色等需求，才换成了ExcelJS,虽然ExcelJS打包比较大，但是可以通过懒加载等方法解决首屏渲染问题，也是可以接受的。

使用XLSX.JS写JSON格式数据到Excel

const data = [
  { firstName: '王', lastName: '五', age: 40 },
  { firstName: '赵', lastName: '六', age: 35 }
];

// 指定表头映射
const headers = ['姓', '名', '年龄'];
const fields  = ['lastName', 'firstName', 'age'];
const ws = XLSX.utils.json_to_sheet(data, {
  header: fields,
  skipHeader: false
});
// 替换第一行
XLSX.utils.sheet_add_aoa(ws, [headers], { origin: 'A1' });

const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, '自定义列');
// 写入文件会触发浏览器下载
XLSX.writeFile(wb, '自定义列.xlsx');

使用ExcelJS写带样式的内容到Excel

const ExcelJS = require('exceljs');
const workbook = new ExcelJS.Workbook();

// 添加工作表
const worksheet = workbook.addWorksheet('My Sheet');

// 设置列宽和表头
worksheet.columns = [
  { header: 'Id', key: 'id', width: 10 },
  { header: 'Name', key: 'name', width: 32 },
  { header: 'D.O.B.', key: 'dob', width: 15 }
];

// 添加行数据，并设置样式
worksheet.addRow({ id: 1, name: 'John Doe', dob: new Date(1970, 1, 1) });
worksheet.addRow({ id: 2, name: 'Jane Doe', dob: new Date(1965, 1, 7) });

// 设置表头样式
worksheet.getRow(1).font = { bold: true, color: { argb: 'FF00FF00' } };

// 写入文件
workbook.xlsx.writeFile('example.xlsx');

XLSX.JS常用API

目的	函数	说明
读文件	XLSX.read(data, {type: 'binary'/'buffer'})	返回 workbook
写文件	XLSX.write(wb, {bookType:'xlsx', type:'binary'})	返回二进制
取工作表	wb.Sheets[sheetName]	得到 worksheet
转 JSON	XLSX.utils.sheet_to_json(ws)	数组 / 对象
建工作表	XLSX.utils.aoa_to_sheet([[1,2],[3,4]])	二维数组
建工作表	XLSX.utils.json_to_sheet([{a:1,b:2}])	JSON
建工作表	XLSX.utils.table_to_sheet(domTable)	HTML 表格
加工作表	XLSX.utils.book_append_sheet(wb, ws, 'Sheet1')	追加
下载	XLSX.writeFile(wb, 'file.xlsx')	写文件

实例

实例 1：把 JSON 写到 Excel

// 假设这是后端返回的数据
const data = [
  { name: '张三', age: 28, city: '北京' },
  { name: '李四', age: 32, city: '上海' }
];

// 1. 创建工作表
const ws = XLSX.utils.json_to_sheet(data);

// 2. 创建工作簿
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, '用户');

// 3. 下载
XLSX.writeFile(wb, '用户列表.xlsx');
// 或者
const s = XLSX.write(wb,{
  bookType:'xlsx',
  bookSST:false,
  type:'binary'
})
//可以使用file-saver库触发下载
import {saveAs} from 'file-saver'
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;
saveAs(
    new Blob([buf],{type:'application/octet-stream'}),
    '用户列表.xlsx'
)

实例 2：把 HTML 表格写入 Excel

<table id="report">
  <thead><tr><th>产品</th><th>销量</th></tr></thead>
  <tbody>
    <tr><td>键盘</td><td>120</td></tr>
    <tr><td>鼠标</td><td>200</td></tr>
  </tbody>
</table>

<script>
  const tbl = document.getElementById('report');
  const wb = XLSX.utils.table_to_book(tbl, { sheet: "销量报表" });
  XLSX.writeFile(wb, '销量报表.xlsx');
</script>

实例 3：自定义列顺序与标题

const data = [
  { firstName: '王', lastName: '五', age: 40 },
  { firstName: '赵', lastName: '六', age: 35 }
];

// 指定表头映射
const headers = ['姓', '名', '年龄'];
const fields  = ['lastName', 'firstName', 'age'];
const ws = XLSX.utils.json_to_sheet(data, {
  header: fields,
  skipHeader: false
});
// 替换第一行
XLSX.utils.sheet_add_aoa(ws, [headers], { origin: 'A1' });

const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, '自定义列');
XLSX.writeFile(wb, '自定义列.xlsx');

谨以此记录，分享给有需要的同学。