前端/Node.js操作Excel实战:使用@giszhc/xlsx(导入+导出全流程)

🚀 前端/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


如果这篇文章对你有帮助,欢迎点赞 👍 收藏 ⭐ 关注 👀

完结,撒花✿✿ヽ(°▽°)ノ✿

相关推荐
iCxhust8 小时前
模型:500kW飞轮 10kV输电线路 油田抽油机 同时考虑无功补偿 统计:全年节电量 结果56万度电
前端·css·css3·电力·飞轮
志尊宝8 小时前
AI原生前端开发(011):Chrome 148+内置Gemini Nano入门
前端·chrome·ai-native
Liu.7748 小时前
uniapp swiper 常见问题及修复
前端·uni-app
u0111026758 小时前
图片生成任务的日志记录与敏感信息取舍
前端·图像处理·算法·ai作画
梦想很大很大9 小时前
重新思考 Workrun:AI 时代,我们还需要手动编排 Workflow 吗?
前端·人工智能·后端
小羊没烦恼!9 小时前
深入浅出SQL Server中的死锁
java·开发语言·前端·数据库·后端·spring·c#
Frag0ut9 小时前
Chrome DevTools 2026进阶:AI辅助调试与性能诊断原生实战指南
前端·人工智能·chrome devtools·ai调试·lighthouse性能分析·内存泄漏诊断·css容器查询
ai工具集合9 小时前
前端项目图标管理实战:成套图标集的选型、规范与 SVG 落地方案
前端
এ慕ོ冬℘゜9 小时前
es6理论总结
前端·javascript·es6