🚀 前端/Node.js操作Excel实战:使用@giszhc/xlsx(导入+导出全流程)
一、为什么直接用 @giszhc/xlsx
在使用 Excel 处理库时,很多人第一反应是 xlsx,但现实情况是:
xlsx已长期停止维护- 最新版本仍为 0.18.5
- 存在已知安全漏洞
👉 因此更推荐直接使用维护版本:
bash
pnpm install @giszhc/xlsx
它具备:
- ✅ API 与
xlsx基本一致 - ✅ 持续维护 & 修复问题
- ✅ 可无缝替换旧项目
二、基础使用(导出 Excel)
1️⃣ 导出 JSON 数据
js
import * as XLSX from '@giszhc/xlsx';
const data = [
{ name: '张三', age: 18 },
{ name: '李四', age: 20 }
];
// 转换为 worksheet
const ws = XLSX.utils.json_to_sheet(data);
// 创建 workbook
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws, '用户数据');
// 导出文件
XLSX.writeFile(wb, '用户数据.xlsx');
2️⃣ 控制列顺序
js
const ws = XLSX.utils.json_to_sheet(data, {
header: ['name', 'age']
});
3️⃣ 设置列宽
js
ws['!cols'] = [
{ wch: 20 },
{ wch: 10 }
];
三、导入 Excel(解析文件)
1️⃣ 浏览器读取
js
import * as XLSX from '@giszhc/xlsx';
function handleFile(file) {
const reader = new FileReader();
reader.onload = (e) => {
const data = new Uint8Array(e.target.result);
const wb = XLSX.read(data, { type: 'array' });
const ws = wb.Sheets[wb.SheetNames[0]];
const json = XLSX.utils.sheet_to_json(ws);
console.log(json);
};
reader.readAsArrayBuffer(file);
}
2️⃣ Node.js 读取
js
import * as XLSX from '@giszhc/xlsx';
const wb = XLSX.readFile('test.xlsx');
const ws = wb.Sheets[wb.SheetNames[0]];
const data = XLSX.utils.sheet_to_json(ws);
console.log(data);
四、进阶用法(建议收藏)
1️⃣ 防止空值丢失
js
XLSX.utils.sheet_to_json(ws, {
defval: ''
});
2️⃣ 数组导出(自定义表头)
js
const data = [
['姓名', '年龄'],
['张三', 18],
['李四', 20]
];
const ws = XLSX.utils.aoa_to_sheet(data);
3️⃣ 多 Sheet 导出
js
const wb = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(wb, ws1, 'Sheet1');
XLSX.utils.book_append_sheet(wb, ws2, 'Sheet2');
XLSX.writeFile(wb, '多表.xlsx');
五、常见坑位
❗ 日期格式异常
Excel 内部是数字时间,需要自行格式化
❗ 数字变字符串
建议在导入后做字段类型转换
❗ 大文件卡顿
- 避免一次性处理超大数据
- 可分批解析
六、实战建议(很重要)
如果你在做实际项目:
- ✅ 封装统一 Excel 工具模块
- ✅ 加入数据校验(必填、格式)
- ✅ 做异常处理(文件损坏、格式错误)
七、总结
使用 @giszhc/xlsx 可以做到:
- 无缝替代
xlsx - 保持原有开发习惯
- 同时规避安全风险
👉 对于新项目,建议直接使用 @giszhc/xlsx,而不是再引入旧版 xlsx
如果这篇文章对你有帮助,欢迎点赞 👍 收藏 ⭐ 关注 👀
完结,撒花✿✿ヽ(°▽°)ノ✿