如何使用JavaScript将HTML表格追加至现有Excel并新建工作表

用目前持续维护的xlsx（SheetJS）社区版即可实现需求，纯前端JavaScript无需后端支持，完整逻辑和可运行代码如下：

核心流程 #

• 点击导出按钮后，唤起文件选择器让用户选中本地已存在的目标Excel文件（受浏览器安全沙箱限制，纯前端无法静默读写本地磁盘文件，必须由用户主动选择目标文件，无绕过方式）
• 读取选中的Excel文件解析为工作簿对象
• 将页面上的HTML表格直接转换为工作表对象
• 生成不重复的工作表名称（默认带导出时间戳，避免和已有工作表重名报错），将新工作表追加到工作簿中
• 将修改后的工作簿导出为文件触发下载，用户保存时直接选择替换原Excel文件即可完成更新

代码实现 #

首先在页面中引入xlsx库，之后添加以下页面元素和逻辑代码：

<!-- 导出触发按钮 -->
<button id="exportBtn">导出表格到现有Excel</button>
<!-- 待导出的测试数据表格 -->
<table id="testTable">
  <!-- 替换为你的实际表格内容 -->
</table>
<!-- 隐藏的文件选择控件，用于选择本地已有的Excel文件 -->
<input type="file" id="filePicker" accept=".xlsx,.xls" style="display: none;">

const exportBtn = document.getElementById('exportBtn');
const filePicker = document.getElementById('filePicker');
const dataTable = document.getElementById('testTable');

// 点击导出按钮唤起文件选择
exportBtn.addEventListener('click', () => filePicker.click());

// 选中文件后执行导出逻辑
filePicker.addEventListener('change', async (e) => {
  const targetFile = e.target.files[0];
  if (!targetFile) return;

  // 读取现有Excel文件
  const fileBuf = await targetFile.arrayBuffer();
  const workbook = XLSX.read(fileBuf, { type: 'array' });

  // HTML表格转工作表
  const newWorksheet = XLSX.utils.table_to_sheet(dataTable);

  // 生成合法且不重复的工作表名，过滤Excel不支持的特殊字符
  const sheetName = `测试数据_${new Date().toLocaleString()}`.replace(/[\\\/\?\*\[\]]/g, '_');

  // 追加新工作表到工作簿
  XLSX.utils.book_append_sheet(workbook, newWorksheet, sheetName);

  // 导出修改后的文件，保存时直接覆盖原文件即可
  XLSX.writeFile(workbook, targetFile.name);

  // 重置文件选择器，支持重复选择同一文件
  filePicker.value = '';
});

补充说明 #

• 如果需要固定工作表前缀，只需要修改sheetName的生成规则即可，若检测到同名工作表存在，可以自动追加序号后缀避免覆盖历史数据
• 如果需要完全无人工干预的自动写入（不需要手动选文件、手动点保存），纯前端方案无法实现，需要在局域网内部署一个极简后端服务，前端把表格数据传给后端，由后端直接操作服务器或指定共享路径下的Excel文件追加工作表
• 该依赖库兼容性覆盖所有主流现代浏览器，支持xlsx、xls等主流Excel格式，不存在停更无法使用的问题

内容的提问来源于stack exchange，提问作者deno_1337