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


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

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

相关推荐
zach3 小时前
前端落地实战:Next.js 项目 Nginx + PM2 生产部署全流程(附踩坑总结)
前端·pm2·next.js
overmind3 小时前
oeasy教h5前端001 修改的乐趣_直接修改在线网页
前端
只睡四小时4 小时前
JS 手写 D-pad 空间导航:电视端焦点引擎实战
android·开发语言·前端·javascript·ecmascript·hls·空间导航
恋猫de小郭4 小时前
Android 原生的 Compose A2UI 也来了,你还抱着 XML 养老吗?
android·前端·flutter
庄园特聘拆椅狂魔4 小时前
从连连看到粒子消散——前端小游戏与视觉特效的技术选型
前端
JudithHuang4 小时前
React 常用 Hooks
前端·react.js·前端框架
sycmancia5 小时前
Qml——Window元素使用
前端
每天都好困5 小时前
03 AR 投影与误差修正:把地图上的点贴到视频画面上
前端
每天都好困5 小时前
04 地图图层封装:像管理 Photoshop 图层一样管理地图元素
前端
去伪存真5 小时前
构建你的第一个 DevOps AI Agent:自动化捕获、分析并修复 CI 故障
前端·agent