简介面向需要在企业级Web应用中集成Excel在线编辑功能的前端开发者该压缩包提供了一套完整的HTML页面示例通过JavaScript库实现表格数据的在线查看、编辑与样式配置解决网页端直接操作Excel数据的需求。包内共有41个文件以JavaScript脚本、CSS样式表和PNG图片为主并包含HTML入口、Web.config配置及字体图标文件其中js负责表格渲染与交互逻辑css支撑多样化的界面主题整体压缩包仅1.44MB便于快速部署与学习参考。该资源已有5076人浏览学习适合希望借助现成案例快速上手在线表格开发、了解前端表格库集成方式与兼容性处理的开发者。通过研究示例代码可掌握如何引入依赖、初始化表格、配置编辑权限及优化页面性能同时借助内置的InspectorSample完整项目理解前端目录结构与资源组织方式。1. 在 HTML 页面里做 Excel 在线编辑一个浏览器就能扛的轻量方案我接过不少内部系统几乎每个都绕不开同一个诉求用户不想下载 Excel 模板再传回来而是希望直接在网页里打开、改几格、再保存。这就是“在 HTML 页面使用 Excel 在线编辑”的典型场景典型到 OA 周报、工单派发、物资盘点都在用同一套逻辑。本文分享的方案基于 SheetJS 加 ExcelJS 两个开源库浏览器端完成 .xlsx 的读取、展示、编辑和导出不需要装 Office也不需要买商业表格控件。适合前端开发者、低代码平台搭建者以及想在三天内交付一个能用版本的人。下面先把选型摊开讲再给可直接抄的代码。2. 选型把四类方案摆平再定 SheetJS ExcelJS 组合2.1 先看四类方案的边界在线编辑 Excel首先得想清楚你要的是“能编辑的表格”还是“长得像 Excel 的表格”。这两者的工作量差一个量级。第一类是用纯开源库自建SheetJSxlsx负责读写 .xlsx前端用原生 HTML table 或 Handsontable 做展示和编辑。优点是免费、可控、无授权风险缺点是样式、公式计算、打印这些强 Excel 特性都要自己补齐。第二类是用 ExcelJS 这类偏生成侧的工具它擅长在浏览器或 Node 里生成结构严谨的 .xlsx能精确控制单元格样式、合并、数据验证但它的强项不是“读取并渲染成可交互表格”。第三类是商业表格控件比如葡萄城 SpreadJS、Handsontable 的商业授权版。功能最接近桌面 Excel但授权费不低项目预算敏感时很容易卡壳。第四类是接在线 Office 或多人协作文档功能最完整但依赖外部服务私有化环境基本不用想。从我接触过的项目看内部系统大部分落在“读取 - 展示 - 改几格 - 导出”这个区间所以第一类加第二类组合最实际。方案读取 .xlsx网页内编辑样式输出授权成本适用场景SheetJS 原生 table强自己写弱免费内部填报、快速预览ExcelJS 自建渲染弱自己写强免费模板生成、导出报表商业表格控件强强中高类 Excel 产品在线 Office 套件强强强中高云端协作、对外服务2.2 为什么是 SheetJS 和 ExcelJS 各干一半我的分工很明确SheetJS 管“读”和“轻量写”ExcelJS 管“重资产生成”。原因有三。第一SheetJS 的解析速度在纯前端方案里算第一梯队一个几兆的 xlsx 用 ArrayBuffer 读进来基本秒级第二ExcelJS 生成 xlsx 时对样式、公式、数据验证的控制粒度比 SheetJS 细得多第三这两个库都是 npm 包浏览器端打包没有兼容性灾难。这个组合的边界也要说清楚SheetJS 不擅长算公式ExcelJS 不擅长把复杂表格解析成美观的可视化结构。发现这些短板时别硬上该补的计算逻辑放到后端去做。2.3 安装和引入如果你的项目是 Vite 或 Webpack直接装包npm install xlsx exceljs如果只是写个演示页CDN 引入更省事script srchttps://cdn.jsdelivr.net/npm/xlsx0.18.5/dist/xlsx.full.min.js/script script srchttps://cdn.jsdelivr.net/npm/exceljs4.3.0/dist/exceljs.min.js/script提示ExcelJS 的浏览器包体积约在 300KB 级别首次加载会有感知建议按需加载或异步加载。2.4 最小骨架一个页面三个按钮先搭一个能跑通全流程的最小页面后面所有调试都在这个骨架上迭代div idtoolbar input typefile idfileInput accept.xlsx,.xls / button idnewBtn新建/button button idexportBtn导出 xlsx/button /div div idgrid/divconst fileInput document.getElementById(fileInput); const grid document.getElementById(grid); let workbook null; // 全局保持当前工作簿 fileInput.addEventListener(change, async (e) { const file e.target.files[0]; const buf await file.arrayBuffer(); workbook XLSX.read(buf, { type: array }); renderSheet(workbook.Sheets[workbook.SheetNames[0]]); }); function renderSheet(ws) { const range XLSX.utils.decode_range(ws[!ref] || A1:A1); // 此处先占位后面补渲染逻辑 grid.innerHTML 共 ${range.e.r - range.s.r 1} 行 x ${range.e.c - range.s.c 1} 列; }逻辑说明arrayBuffer拿到的是原始字节SheetJS 的type: array明确告诉它按字节数组解析避免浏览器按文本猜编码。ws[!ref]是这个工作表的有数据区域格式是A1:C10decode_range把它解析成行列坐标对象用于确认表格维度。参数说明XLSX.read的第二个参数最常用的是type可选base64、binary、array、buffer、file。浏览器里用array最稳。如果文件里有日期列建议再加一个cellDates: true把 Excel 的日期序列号直接转成 JS 的Date对象。接下来给导出按钮补上逻辑让骨架先闭环exportBtn.addEventListener(click, () { if (!workbook) return; const wbout XLSX.write(workbook, { bookType: xlsx, type: array }); const blob new Blob([wbout], { type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet }); const a document.createElement(a); a.href URL.createObjectURL(blob); a.download export.xlsx; a.click(); URL.revokeObjectURL(a.href); });说明XLSX.write不直接落盘浏览器里必须配合 Blob 触发下载。bookType指定容器格式为 xlsxtype: array输出 Uint8ArrayBlob 接受它正好。这里标出了 MIME 类型后面避坑章还会再讲一次因为踩的人实在太多。3. 从 .xlsx 到网页表格读取、渲染、回写三步走3.1 把文件读进来别踩编码坑上一章的骨架已经能读文件了这里把读取函数提炼成可复用版本async function loadWorkbook(file) { const buf await file.arrayBuffer(); return XLSX.read(buf, { type: array, cellDates: true, cellNF: true }); }逻辑说明cellDates把日期列转成 Date 对象而不是留一个 44972 之类的序列号cellNF保留单元格的数字格式导出时可以还给 ExcelJS 用。你如果只是做数据填报cellNF可以不加少一层解析就快一点。读进来以后先看看里面有什么const wb await loadWorkbook(file); console.log(wb.SheetNames); // 工作表名列表 console.log(wb.Sheets[Sheet1][A1]); // 单个单元格对象单元格对象的常见字段v是原始值w是格式化后的文本t是类型n 数字、s 文本、b 布尔、d 日期。调样式时字段会更多后面 ExcelJS 章节再对照。3.2 快速预览先做只读版本再动手编辑SheetJS 自带sheet_to_html适合写只读预览代码非常短const html XLSX.utils.sheet_to_html(ws, { header: , footer: }); document.getElementById(preview).innerHTML html;这段能跑但有两个局限一生成的 table 没有绑定可编辑逻辑改不了单元格二它是整表输出工作簿有 5000 行时 DOM 直接爆炸。所以它适合做“导入前的样子预览”不适合当编辑器。我一般在调试时用正式页面走下一小节的可编辑方案。3.3 把数据铺成可编辑表格我的做法是先用sheet_to_json把工作表转成二维数组再交给我们自己渲染的 table每一行的单元格设为contenteditabletrue用户点一下就能改。function sheetToEditableTable(ws) { const rows XLSX.utils.sheet_to_json(ws, { header: 1, defval: null }); const table document.createElement(table); table.id editableSheet; rows.forEach((row, rIdx) { const tr document.createElement(tr); row.forEach((cell, cIdx) { const td document.createElement(td); td.textContent cell null ? : String(cell); td.contentEditable true; td.dataset.r rIdx; td.dataset.c cIdx; tr.appendChild(td); }); table.appendChild(tr); }); return table; }逻辑说明header: 1让函数返回二维数组而不是对象数组这样行列坐标可以直接映射到 DOM。defval: null是空单元格的兜底值防止 undefined 混进渲染。每个 td 的dataset.r和dataset.c记录行列回写的时候靠这对坐标定位。sheet_to_json的几个实用参数值得单独说const rows XLSX.utils.sheet_to_json(ws, { header: 1, range: A1:E50, blankrows: false, defval: });range只取指定区域适合大表只预览前几行blankrows: false跳过大空白行defval: 让空单元格变成空字符串避免模板字符串里拼出 “null”。这个方案的好处是可控样式、对齐、合并单元格都能按自己需求扩展坏处是单元格数量上万时性能拉胯遇到大数据量再考虑虚拟滚动避坑章节会细说。3.4 编辑后倒回 xlsx表格改完最直接的方式是从 DOM 反向取数function editableTableToSheet(tableEl) { return XLSX.utils.table_to_sheet(tableEl, { raw: true }); }raw: true的意思是尽量保留原始值而不是文本这样数字不会在回写时被转成字符串。拿到新的 worksheet 以后替换掉原来工作簿中的那一页再走 2.4 的导出流程workbook.Sheets[Sheet1] editableTableToSheet(document.getElementById(editableSheet)); const out XLSX.write(workbook, { bookType: xlsx, type: array });逻辑说明这里有一个容易被忽略的点——table_to_sheet会按照 DOM 的行列顺序重建坐标所以导出前必须确认表格结构和原工作表一致比如有没有把标题行当成数据行。你可以在渲染时对标题行加>import ExcelJS from exceljs; async function loadWithExcelJS(arrayBuffer) { const wb new ExcelJS.Workbook(); await wb.xlsx.load(arrayBuffer); return wb; }如果是从零新建const wb new ExcelJS.Workbook(); const ws wb.addWorksheet(台账, { properties: { tabColor: { argb: FF4F81BD } }, views: [{ state: frozen, ySplit: 1 }] });参数说明tabColor设置工作表标签颜色views里frozen冻结首行客户打开文件时表头固定体验接近桌面 Excel。4.2 单元格样式字体、边框、对齐和合并ExcelJS 的取值方式是 A1 风格的坐标字符串这一点很顺手const cell ws.getCell(A1); cell.value 项目名称; cell.font { name: 微软雅黑, size: 11, bold: true }; cell.alignment { vertical: middle, horizontal: center }; cell.border { top: { style: thin }, left: { style: thin }, bottom: { style: thin }, right: { style: thin } }; cell.fill { type: pattern, pattern: solid, fgColor: { argb: FFFFFF00 } };样式字段是写进 xlsx 的 XML 里的浏览器端没有可视化调试工具最容易翻车的就是 border 只写一边导出后表格线残缺。我习惯先写一个applyTableStyle(ws, range)函数统一处理边框避免低级错误。合并单元格和行列尺寸ws.mergeCells(A1:F1); ws.getColumn(A).width 20; ws.getRow(1).height 24;合并后往区域内任意单元格赋值值会落在左上角单元格其余变成合并区域的一部分。这里有坑合并区域的行列属性在 Excel 里表现正常但你用 SheetJS 再去读这张表时合并信息会留在!merges数组里如果两个库来回倒务必保留!merges。能力SheetJS 写入ExcelJS 写入字体部分完整边框无写支持完整合并单元格简单完整数据验证读取完整公式只存字符串对象级支持冻结窗格读取有完整这就是为什么“轻量回写”用 SheetJS要交付规范文件时走 ExcelJS。4.3 公式与数据验证写公式不是直接放字符串而是给一个带formula的对象const cell ws.getCell(D10); cell.value { formula: SUM(D2:D9), result: 0 };参数说明ExcelJS 公式对象有两个关键字段formula和result。浏览器端我们没法把公式真的算一遍result 可以先给 0等用户用 Excel 打开时默认会重算。如果想确保重算在 Workbook 上显式声明wb.calcProperties.fullCalcOnLoad true;数据验证最常用的是下拉列表ws.addDataValidation(C2:C100, { type: list, allowBlank: true, formulae: [未开始,进行中,已结束], showDropDown: true });下拉框在网页里没法即时出现但导出后在 Excel 里能用。如果你要求网页端也显示下拉那得自己做 UI别把希望全押在 ExcelJS。另外还有个容易忽略的日期格式。ExcelJS 里日期本质是数值加numFmtws.getCell(B2).value new Date(); ws.getCell(B2).numFmt yyyy-mm-dd;如果不设 numFmt新 Date 会被序列化成数字用户打开 Excel 看到 44972成了经典翻车现场。4.4 writeBuffer 与压缩导出时const buffer await wb.xlsx.writeBuffer(); const blob new Blob([buffer], { type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet });我一般还会在 Workbook 属性里补上作者信息wb.creator OA System; wb.created new Date(); wb.modified new Date();压缩方面xlsx 本身就是 zip 结构ExcelJS 默认压缩不需要额外配置。真正影响体积的是图片如果你在单元格里插了图片体积会被放大几倍这时候才需要后端压缩。5. 常见避坑文件损坏、科学计数法与内存翻车5.1 导出的文件打不开“文件格式或扩展名无效”现象用 XLSX.write 或 ExcelJS.writeBuffer 导出的文件双击提示格式无效。原因最常见是 MIME 类型和 Blob 构造不对其次是文件名后缀和内容不一致比如 write 指定了bookType: csv却下载成 .xlsx。解决统一用下面这套写法function downloadWorkbook(wb, bookType, filename) { const data XLSX.write(wb, { bookType: bookType, type: array }); const blob new Blob([data], { type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet }); const link document.createElement(a); link.href URL.createObjectURL(blob); link.download filename.endsWith(.xlsx) ? filename : filename .xlsx; link.click(); URL.revokeObjectURL(link.href); }参数说明bookType 可取值 xlsx、csv、xlsb但浏览器里 xlsb 兼容性差能用 xlsx 就别换。revokeObjectURL 要放在 click 之后调用否则某些浏览器会中断下载。5.2 长数字变成科学计数法现象身份证号、单据号导入网页后变成 1.23E17导出后还是这样。原因Excel 本身对 15 位以上的数字自动转科学计数法SheetJS 读取时按数字处理页面上展示就成了科学计数法。根本原因是数据本该是文本。解决输入端和输出端两头堵。导入时const wb XLSX.read(buf, { type: array, raw: true });导出时用 ExcelJS 把这些列设为文本for (let row 1; row ws.rowCount; row) { const cell ws.getCell(A${row}); if (cell.value typeof cell.value number Number.isInteger(cell.value) cell.value 1e15) { cell.value String(cell.value); cell.type ExcelJS.ValueType.String; } }逻辑说明判断条件是整数且超过 1e15符合这个条件的基本都是证件号、流水号转成字符串后 Excel 左上角可能出现绿色角标提示“数字以文本形式存储”但不会再变科学计数法。业务端更稳的做法是源头要求在 Excel 里先把这一列设成文本格式再上传网页端只做兜底。5.3 中文文件名下载后乱码现象a.download 设成“2025年台账.xlsx”下载下来文件名变乱码。原因老版本浏览器对非 ASCII 文件名处理有问题另外部分安全软件会干预 blob URL 下载。解决文件名用 Unicode 字符主流浏览器支持。我一般做一层兜底const filename 2025年台账.xlsx; link.download filename;这条经验有点玄学不同浏览器表现不太一致。我的建议是原型阶段先在本机 Chrome 和 Edge 各测一遍下载文件名再发测试包。5.4 表格数据一大页面卡死现象sheet_to_html 渲染 5000 行的 xlsx浏览器标签页直接无响应。原因一次性往 DOM 塞几万个单元格重排和绘制叠加内存和 CPU 都扛不住。解决先分页截断function renderPaged(ws, pageSize 200) { const rows XLSX.utils.sheet_to_json(ws, { header: 1, range: A1:F${pageSize} }); grid.innerHTML ; // 复用 3.3 的 editableTable 逻辑每次只渲染一页 }用户上下翻页时去下一页。超过 2000 行的表格我建议只用分页或虚拟滚动不要幻想浏览器能扛。提示如果业务要求“看着像 Excel又能拖拽选择区域、改行高列宽”免费方案下 Handsontable 是最接近实现的商业版有额外功能但免费版已经够做数据填报。5.5 公式改了导出后 Excel 里不自动算现象页面上把 D2 从 100 改成 200导出后 D10 的 SUM 结果还是旧值或者直接显示 0/空。原因两个层面。一是 SheetJS 读取时把公式存成字符串网页端改动不会触发任何计算二是 ExcelJS 写公式时如果没给 resultExcel 打开后通常会自动重算但用户的 Excel 如果设置了“手动计算”结果区就是空的或旧的。解决ExcelJS 侧打开自动重算wb.calcProperties { fullCalcOnLoad: true };同时在网页端把 D10 的旧 result 清掉写入时给个占位 0避免脏数据导出。如果是后端生成可以用公式计算库先算出结果并写入 result这样任何客户端打开都有值。5.6 “先转 HTML 再转 xlsx”的格式丢失现象从网页把 table 直接另存为 HTML再用 Excel 打开样式乱了、合并单元格没了。原因HTML table 的能力子集和 xlsx 不一样尤其是行高、列宽、合并、换行。用浏览器“另存为 HTML”得到的文件本质是网页快照不是可编辑的工作簿。解决不要走 HTML 中转。自己系统里用 3.4 的 table_to_sheet 回写再交给 ExcelJS 补样式外部 Excel 文件也不要直接开在浏览器里再转成其他格式。数据录入、计算、打印都以后端生成的 xlsx 为准HTML 只做展示。6. 进阶模板套打、变更日志与后端二次生成6.1 模板套打后端给模板前端只填数内部系统最常见的用法不是从零画表而是套模板const templateBuf await fetch(/templates/checklist.xlsx).then(r r.arrayBuffer()); const wb new ExcelJS.Workbook(); await wb.xlsx.load(templateBuf); const ws wb.getWorksheet(1); ws.getCell(B2).value 2025-06-01; ws.getCell(B3).value 张三; ws.getCell(B4).value 巡检正常; await wb.xlsx.writeBuffer();模板里保留好合并单元格、边框和列宽前端只填数据单元格好处是样式永远是设计好的不会因为用户拖拽而变化。6.2 变更日志记住每个单元格改了什么在 3.3 的可编辑表格里统一监听table.addEventListener(input, (e) { const td e.target.closest(td); const row td.dataset.r; const col td.dataset.c; changeLog.push({ row, col, value: td.textContent, ts: Date.now() }); });每条日志包含行列坐标、新值和时间戳。这个数据结构可以直接入库满足审计需求也能在后端生成 xlsx 时决定要不要标红改动单元格。6.3 数据回传前端收集后端生成正式文件最后说一个边界建议我倾向于让前端只管收集数据后端负责生成最终 xlsx。前端提交二维数组const rows XLSX.utils.sheet_to_json(ws, { header: 1 }); fetch(/api/export, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ sheetName: 台账, rows }) });后端用 ExcelJS 或 LibreOffice 转换都可以。这样一旦生成的文件不合预期排查范围明确在后端不会出现“浏览器里看着好好的下载下来就变了”这种两头扯皮的玄学问题。说一个我的个人习惯自从有一次导出的文件在客户机器上打不开被运维半夜叫起来之后我每次接在线 Excel 需求都会强制把“读取 → 编辑 → 导出 → 重读校验”四个环节写成自动化小测试导出的文件再用 SheetJS 读回来比对各单元格值能对得上才算闭环。这个习惯救过我很多次尤其是公式和日期列。希望帮到你。本文还有配套的精品资源点击获取
简介面向需要在企业级Web应用中集成Excel在线编辑功能的前端开发者该压缩包提供了一套完整的HTML页面示例通过JavaScript库实现表格数据的在线查看、编辑与样式配置解决网页端直接操作Excel数据的需求。包内共有41个文件以JavaScript脚本、CSS样式表和PNG图片为主并包含HTML入口、Web.config配置及字体图标文件其中js负责表格渲染与交互逻辑css支撑多样化的界面主题整体压缩包仅1.44MB便于快速部署与学习参考。该资源已有5076人浏览学习适合希望借助现成案例快速上手在线表格开发、了解前端表格库集成方式与兼容性处理的开发者。通过研究示例代码可掌握如何引入依赖、初始化表格、配置编辑权限及优化页面性能同时借助内置的InspectorSample完整项目理解前端目录结构与资源组织方式。1. 在 HTML 页面里做 Excel 在线编辑一个浏览器就能扛的轻量方案我接过不少内部系统几乎每个都绕不开同一个诉求用户不想下载 Excel 模板再传回来而是希望直接在网页里打开、改几格、再保存。这就是“在 HTML 页面使用 Excel 在线编辑”的典型场景典型到 OA 周报、工单派发、物资盘点都在用同一套逻辑。本文分享的方案基于 SheetJS 加 ExcelJS 两个开源库浏览器端完成 .xlsx 的读取、展示、编辑和导出不需要装 Office也不需要买商业表格控件。适合前端开发者、低代码平台搭建者以及想在三天内交付一个能用版本的人。下面先把选型摊开讲再给可直接抄的代码。2. 选型把四类方案摆平再定 SheetJS ExcelJS 组合2.1 先看四类方案的边界在线编辑 Excel首先得想清楚你要的是“能编辑的表格”还是“长得像 Excel 的表格”。这两者的工作量差一个量级。第一类是用纯开源库自建SheetJSxlsx负责读写 .xlsx前端用原生 HTML table 或 Handsontable 做展示和编辑。优点是免费、可控、无授权风险缺点是样式、公式计算、打印这些强 Excel 特性都要自己补齐。第二类是用 ExcelJS 这类偏生成侧的工具它擅长在浏览器或 Node 里生成结构严谨的 .xlsx能精确控制单元格样式、合并、数据验证但它的强项不是“读取并渲染成可交互表格”。第三类是商业表格控件比如葡萄城 SpreadJS、Handsontable 的商业授权版。功能最接近桌面 Excel但授权费不低项目预算敏感时很容易卡壳。第四类是接在线 Office 或多人协作文档功能最完整但依赖外部服务私有化环境基本不用想。从我接触过的项目看内部系统大部分落在“读取 - 展示 - 改几格 - 导出”这个区间所以第一类加第二类组合最实际。方案读取 .xlsx网页内编辑样式输出授权成本适用场景SheetJS 原生 table强自己写弱免费内部填报、快速预览ExcelJS 自建渲染弱自己写强免费模板生成、导出报表商业表格控件强强中高类 Excel 产品在线 Office 套件强强强中高云端协作、对外服务2.2 为什么是 SheetJS 和 ExcelJS 各干一半我的分工很明确SheetJS 管“读”和“轻量写”ExcelJS 管“重资产生成”。原因有三。第一SheetJS 的解析速度在纯前端方案里算第一梯队一个几兆的 xlsx 用 ArrayBuffer 读进来基本秒级第二ExcelJS 生成 xlsx 时对样式、公式、数据验证的控制粒度比 SheetJS 细得多第三这两个库都是 npm 包浏览器端打包没有兼容性灾难。这个组合的边界也要说清楚SheetJS 不擅长算公式ExcelJS 不擅长把复杂表格解析成美观的可视化结构。发现这些短板时别硬上该补的计算逻辑放到后端去做。2.3 安装和引入如果你的项目是 Vite 或 Webpack直接装包npm install xlsx exceljs如果只是写个演示页CDN 引入更省事script srchttps://cdn.jsdelivr.net/npm/xlsx0.18.5/dist/xlsx.full.min.js/script script srchttps://cdn.jsdelivr.net/npm/exceljs4.3.0/dist/exceljs.min.js/script提示ExcelJS 的浏览器包体积约在 300KB 级别首次加载会有感知建议按需加载或异步加载。2.4 最小骨架一个页面三个按钮先搭一个能跑通全流程的最小页面后面所有调试都在这个骨架上迭代div idtoolbar input typefile idfileInput accept.xlsx,.xls / button idnewBtn新建/button button idexportBtn导出 xlsx/button /div div idgrid/divconst fileInput document.getElementById(fileInput); const grid document.getElementById(grid); let workbook null; // 全局保持当前工作簿 fileInput.addEventListener(change, async (e) { const file e.target.files[0]; const buf await file.arrayBuffer(); workbook XLSX.read(buf, { type: array }); renderSheet(workbook.Sheets[workbook.SheetNames[0]]); }); function renderSheet(ws) { const range XLSX.utils.decode_range(ws[!ref] || A1:A1); // 此处先占位后面补渲染逻辑 grid.innerHTML 共 ${range.e.r - range.s.r 1} 行 x ${range.e.c - range.s.c 1} 列; }逻辑说明arrayBuffer拿到的是原始字节SheetJS 的type: array明确告诉它按字节数组解析避免浏览器按文本猜编码。ws[!ref]是这个工作表的有数据区域格式是A1:C10decode_range把它解析成行列坐标对象用于确认表格维度。参数说明XLSX.read的第二个参数最常用的是type可选base64、binary、array、buffer、file。浏览器里用array最稳。如果文件里有日期列建议再加一个cellDates: true把 Excel 的日期序列号直接转成 JS 的Date对象。接下来给导出按钮补上逻辑让骨架先闭环exportBtn.addEventListener(click, () { if (!workbook) return; const wbout XLSX.write(workbook, { bookType: xlsx, type: array }); const blob new Blob([wbout], { type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet }); const a document.createElement(a); a.href URL.createObjectURL(blob); a.download export.xlsx; a.click(); URL.revokeObjectURL(a.href); });说明XLSX.write不直接落盘浏览器里必须配合 Blob 触发下载。bookType指定容器格式为 xlsxtype: array输出 Uint8ArrayBlob 接受它正好。这里标出了 MIME 类型后面避坑章还会再讲一次因为踩的人实在太多。3. 从 .xlsx 到网页表格读取、渲染、回写三步走3.1 把文件读进来别踩编码坑上一章的骨架已经能读文件了这里把读取函数提炼成可复用版本async function loadWorkbook(file) { const buf await file.arrayBuffer(); return XLSX.read(buf, { type: array, cellDates: true, cellNF: true }); }逻辑说明cellDates把日期列转成 Date 对象而不是留一个 44972 之类的序列号cellNF保留单元格的数字格式导出时可以还给 ExcelJS 用。你如果只是做数据填报cellNF可以不加少一层解析就快一点。读进来以后先看看里面有什么const wb await loadWorkbook(file); console.log(wb.SheetNames); // 工作表名列表 console.log(wb.Sheets[Sheet1][A1]); // 单个单元格对象单元格对象的常见字段v是原始值w是格式化后的文本t是类型n 数字、s 文本、b 布尔、d 日期。调样式时字段会更多后面 ExcelJS 章节再对照。3.2 快速预览先做只读版本再动手编辑SheetJS 自带sheet_to_html适合写只读预览代码非常短const html XLSX.utils.sheet_to_html(ws, { header: , footer: }); document.getElementById(preview).innerHTML html;这段能跑但有两个局限一生成的 table 没有绑定可编辑逻辑改不了单元格二它是整表输出工作簿有 5000 行时 DOM 直接爆炸。所以它适合做“导入前的样子预览”不适合当编辑器。我一般在调试时用正式页面走下一小节的可编辑方案。3.3 把数据铺成可编辑表格我的做法是先用sheet_to_json把工作表转成二维数组再交给我们自己渲染的 table每一行的单元格设为contenteditabletrue用户点一下就能改。function sheetToEditableTable(ws) { const rows XLSX.utils.sheet_to_json(ws, { header: 1, defval: null }); const table document.createElement(table); table.id editableSheet; rows.forEach((row, rIdx) { const tr document.createElement(tr); row.forEach((cell, cIdx) { const td document.createElement(td); td.textContent cell null ? : String(cell); td.contentEditable true; td.dataset.r rIdx; td.dataset.c cIdx; tr.appendChild(td); }); table.appendChild(tr); }); return table; }逻辑说明header: 1让函数返回二维数组而不是对象数组这样行列坐标可以直接映射到 DOM。defval: null是空单元格的兜底值防止 undefined 混进渲染。每个 td 的dataset.r和dataset.c记录行列回写的时候靠这对坐标定位。sheet_to_json的几个实用参数值得单独说const rows XLSX.utils.sheet_to_json(ws, { header: 1, range: A1:E50, blankrows: false, defval: });range只取指定区域适合大表只预览前几行blankrows: false跳过大空白行defval: 让空单元格变成空字符串避免模板字符串里拼出 “null”。这个方案的好处是可控样式、对齐、合并单元格都能按自己需求扩展坏处是单元格数量上万时性能拉胯遇到大数据量再考虑虚拟滚动避坑章节会细说。3.4 编辑后倒回 xlsx表格改完最直接的方式是从 DOM 反向取数function editableTableToSheet(tableEl) { return XLSX.utils.table_to_sheet(tableEl, { raw: true }); }raw: true的意思是尽量保留原始值而不是文本这样数字不会在回写时被转成字符串。拿到新的 worksheet 以后替换掉原来工作簿中的那一页再走 2.4 的导出流程workbook.Sheets[Sheet1] editableTableToSheet(document.getElementById(editableSheet)); const out XLSX.write(workbook, { bookType: xlsx, type: array });逻辑说明这里有一个容易被忽略的点——table_to_sheet会按照 DOM 的行列顺序重建坐标所以导出前必须确认表格结构和原工作表一致比如有没有把标题行当成数据行。你可以在渲染时对标题行加>import ExcelJS from exceljs; async function loadWithExcelJS(arrayBuffer) { const wb new ExcelJS.Workbook(); await wb.xlsx.load(arrayBuffer); return wb; }如果是从零新建const wb new ExcelJS.Workbook(); const ws wb.addWorksheet(台账, { properties: { tabColor: { argb: FF4F81BD } }, views: [{ state: frozen, ySplit: 1 }] });参数说明tabColor设置工作表标签颜色views里frozen冻结首行客户打开文件时表头固定体验接近桌面 Excel。4.2 单元格样式字体、边框、对齐和合并ExcelJS 的取值方式是 A1 风格的坐标字符串这一点很顺手const cell ws.getCell(A1); cell.value 项目名称; cell.font { name: 微软雅黑, size: 11, bold: true }; cell.alignment { vertical: middle, horizontal: center }; cell.border { top: { style: thin }, left: { style: thin }, bottom: { style: thin }, right: { style: thin } }; cell.fill { type: pattern, pattern: solid, fgColor: { argb: FFFFFF00 } };样式字段是写进 xlsx 的 XML 里的浏览器端没有可视化调试工具最容易翻车的就是 border 只写一边导出后表格线残缺。我习惯先写一个applyTableStyle(ws, range)函数统一处理边框避免低级错误。合并单元格和行列尺寸ws.mergeCells(A1:F1); ws.getColumn(A).width 20; ws.getRow(1).height 24;合并后往区域内任意单元格赋值值会落在左上角单元格其余变成合并区域的一部分。这里有坑合并区域的行列属性在 Excel 里表现正常但你用 SheetJS 再去读这张表时合并信息会留在!merges数组里如果两个库来回倒务必保留!merges。能力SheetJS 写入ExcelJS 写入字体部分完整边框无写支持完整合并单元格简单完整数据验证读取完整公式只存字符串对象级支持冻结窗格读取有完整这就是为什么“轻量回写”用 SheetJS要交付规范文件时走 ExcelJS。4.3 公式与数据验证写公式不是直接放字符串而是给一个带formula的对象const cell ws.getCell(D10); cell.value { formula: SUM(D2:D9), result: 0 };参数说明ExcelJS 公式对象有两个关键字段formula和result。浏览器端我们没法把公式真的算一遍result 可以先给 0等用户用 Excel 打开时默认会重算。如果想确保重算在 Workbook 上显式声明wb.calcProperties.fullCalcOnLoad true;数据验证最常用的是下拉列表ws.addDataValidation(C2:C100, { type: list, allowBlank: true, formulae: [未开始,进行中,已结束], showDropDown: true });下拉框在网页里没法即时出现但导出后在 Excel 里能用。如果你要求网页端也显示下拉那得自己做 UI别把希望全押在 ExcelJS。另外还有个容易忽略的日期格式。ExcelJS 里日期本质是数值加numFmtws.getCell(B2).value new Date(); ws.getCell(B2).numFmt yyyy-mm-dd;如果不设 numFmt新 Date 会被序列化成数字用户打开 Excel 看到 44972成了经典翻车现场。4.4 writeBuffer 与压缩导出时const buffer await wb.xlsx.writeBuffer(); const blob new Blob([buffer], { type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet });我一般还会在 Workbook 属性里补上作者信息wb.creator OA System; wb.created new Date(); wb.modified new Date();压缩方面xlsx 本身就是 zip 结构ExcelJS 默认压缩不需要额外配置。真正影响体积的是图片如果你在单元格里插了图片体积会被放大几倍这时候才需要后端压缩。5. 常见避坑文件损坏、科学计数法与内存翻车5.1 导出的文件打不开“文件格式或扩展名无效”现象用 XLSX.write 或 ExcelJS.writeBuffer 导出的文件双击提示格式无效。原因最常见是 MIME 类型和 Blob 构造不对其次是文件名后缀和内容不一致比如 write 指定了bookType: csv却下载成 .xlsx。解决统一用下面这套写法function downloadWorkbook(wb, bookType, filename) { const data XLSX.write(wb, { bookType: bookType, type: array }); const blob new Blob([data], { type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet }); const link document.createElement(a); link.href URL.createObjectURL(blob); link.download filename.endsWith(.xlsx) ? filename : filename .xlsx; link.click(); URL.revokeObjectURL(link.href); }参数说明bookType 可取值 xlsx、csv、xlsb但浏览器里 xlsb 兼容性差能用 xlsx 就别换。revokeObjectURL 要放在 click 之后调用否则某些浏览器会中断下载。5.2 长数字变成科学计数法现象身份证号、单据号导入网页后变成 1.23E17导出后还是这样。原因Excel 本身对 15 位以上的数字自动转科学计数法SheetJS 读取时按数字处理页面上展示就成了科学计数法。根本原因是数据本该是文本。解决输入端和输出端两头堵。导入时const wb XLSX.read(buf, { type: array, raw: true });导出时用 ExcelJS 把这些列设为文本for (let row 1; row ws.rowCount; row) { const cell ws.getCell(A${row}); if (cell.value typeof cell.value number Number.isInteger(cell.value) cell.value 1e15) { cell.value String(cell.value); cell.type ExcelJS.ValueType.String; } }逻辑说明判断条件是整数且超过 1e15符合这个条件的基本都是证件号、流水号转成字符串后 Excel 左上角可能出现绿色角标提示“数字以文本形式存储”但不会再变科学计数法。业务端更稳的做法是源头要求在 Excel 里先把这一列设成文本格式再上传网页端只做兜底。5.3 中文文件名下载后乱码现象a.download 设成“2025年台账.xlsx”下载下来文件名变乱码。原因老版本浏览器对非 ASCII 文件名处理有问题另外部分安全软件会干预 blob URL 下载。解决文件名用 Unicode 字符主流浏览器支持。我一般做一层兜底const filename 2025年台账.xlsx; link.download filename;这条经验有点玄学不同浏览器表现不太一致。我的建议是原型阶段先在本机 Chrome 和 Edge 各测一遍下载文件名再发测试包。5.4 表格数据一大页面卡死现象sheet_to_html 渲染 5000 行的 xlsx浏览器标签页直接无响应。原因一次性往 DOM 塞几万个单元格重排和绘制叠加内存和 CPU 都扛不住。解决先分页截断function renderPaged(ws, pageSize 200) { const rows XLSX.utils.sheet_to_json(ws, { header: 1, range: A1:F${pageSize} }); grid.innerHTML ; // 复用 3.3 的 editableTable 逻辑每次只渲染一页 }用户上下翻页时去下一页。超过 2000 行的表格我建议只用分页或虚拟滚动不要幻想浏览器能扛。提示如果业务要求“看着像 Excel又能拖拽选择区域、改行高列宽”免费方案下 Handsontable 是最接近实现的商业版有额外功能但免费版已经够做数据填报。5.5 公式改了导出后 Excel 里不自动算现象页面上把 D2 从 100 改成 200导出后 D10 的 SUM 结果还是旧值或者直接显示 0/空。原因两个层面。一是 SheetJS 读取时把公式存成字符串网页端改动不会触发任何计算二是 ExcelJS 写公式时如果没给 resultExcel 打开后通常会自动重算但用户的 Excel 如果设置了“手动计算”结果区就是空的或旧的。解决ExcelJS 侧打开自动重算wb.calcProperties { fullCalcOnLoad: true };同时在网页端把 D10 的旧 result 清掉写入时给个占位 0避免脏数据导出。如果是后端生成可以用公式计算库先算出结果并写入 result这样任何客户端打开都有值。5.6 “先转 HTML 再转 xlsx”的格式丢失现象从网页把 table 直接另存为 HTML再用 Excel 打开样式乱了、合并单元格没了。原因HTML table 的能力子集和 xlsx 不一样尤其是行高、列宽、合并、换行。用浏览器“另存为 HTML”得到的文件本质是网页快照不是可编辑的工作簿。解决不要走 HTML 中转。自己系统里用 3.4 的 table_to_sheet 回写再交给 ExcelJS 补样式外部 Excel 文件也不要直接开在浏览器里再转成其他格式。数据录入、计算、打印都以后端生成的 xlsx 为准HTML 只做展示。6. 进阶模板套打、变更日志与后端二次生成6.1 模板套打后端给模板前端只填数内部系统最常见的用法不是从零画表而是套模板const templateBuf await fetch(/templates/checklist.xlsx).then(r r.arrayBuffer()); const wb new ExcelJS.Workbook(); await wb.xlsx.load(templateBuf); const ws wb.getWorksheet(1); ws.getCell(B2).value 2025-06-01; ws.getCell(B3).value 张三; ws.getCell(B4).value 巡检正常; await wb.xlsx.writeBuffer();模板里保留好合并单元格、边框和列宽前端只填数据单元格好处是样式永远是设计好的不会因为用户拖拽而变化。6.2 变更日志记住每个单元格改了什么在 3.3 的可编辑表格里统一监听table.addEventListener(input, (e) { const td e.target.closest(td); const row td.dataset.r; const col td.dataset.c; changeLog.push({ row, col, value: td.textContent, ts: Date.now() }); });每条日志包含行列坐标、新值和时间戳。这个数据结构可以直接入库满足审计需求也能在后端生成 xlsx 时决定要不要标红改动单元格。6.3 数据回传前端收集后端生成正式文件最后说一个边界建议我倾向于让前端只管收集数据后端负责生成最终 xlsx。前端提交二维数组const rows XLSX.utils.sheet_to_json(ws, { header: 1 }); fetch(/api/export, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ sheetName: 台账, rows }) });后端用 ExcelJS 或 LibreOffice 转换都可以。这样一旦生成的文件不合预期排查范围明确在后端不会出现“浏览器里看着好好的下载下来就变了”这种两头扯皮的玄学问题。说一个我的个人习惯自从有一次导出的文件在客户机器上打不开被运维半夜叫起来之后我每次接在线 Excel 需求都会强制把“读取 → 编辑 → 导出 → 重读校验”四个环节写成自动化小测试导出的文件再用 SheetJS 读回来比对各单元格值能对得上才算闭环。这个习惯救过我很多次尤其是公式和日期列。希望帮到你。本文还有配套的精品资源点击获取
