LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

纯JavaScript代码导出HTML的DIV中多个table到Excel文件的同一个工作表中并下载

admin
2025年5月23日 13:57 本文热度 89

纯JavaScript代码导出HTML的DIV中多个table到Excel文件的同一个工作表中并下载,以下是实现将DIV内多个表格合并导出到Excel同一工作表的解决方案:

<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>


<div id="printA">

  <!-- 表格1 -->

  <table>

    <tr><th>姓名</th><th>部门</th></tr>

    <tr><td>张三</td><td>技术部</td></tr>

  </table>

  

  <!-- 表格2 -->

  <table>

    <tr><th>项目</th><th>进度</th></tr>

    <tr><td>系统升级</td><td>50%</td></tr>

    <tr><td>安全审计</td><td>已完成</td></tr>

  </table>

</div>


<button onclick="exportAllToOneSheet()">合并导出</button>


<script>

function exportAllToOneSheet() {

  const div = document.getElementById('printA');

  const tables = div.getElementsByTagName('table');

  const wb = XLSX.utils.book_new();

  const ws = XLSX.utils.aoa_to_sheet([[]]); // 创建空工作表


  let currentRow = 0; // 当前写入行指针


  Array.from(tables).forEach((table, tableIndex) => {

    // 将表格转换为二维数组

    const tableData = XLSX.utils.sheet_to_json(

      XLSX.utils.table_to_sheet(table),

      { header: 1 }

    );


    // 添加表格间的分隔空行(第一个表格前不加)

    if (tableIndex > 0) {

      XLSX.utils.sheet_add_aoa(ws, [[""]], { origin: { r: currentRow, c: 0 } });

      currentRow++;

    }


    // 将表格数据写入工作表

    XLSX.utils.sheet_add_aoa(ws, tableData, {

      origin: { r: currentRow, c: 0 } // 从当前行开始写入

    });


    // 更新行指针(+数据行数)

    currentRow += tableData.length;

  });


  // 将工作表添加到工作簿

  XLSX.utils.book_append_sheet(wb, ws, "合并数据");


  // 生成并下载文件

  XLSX.writeFile(wb, 'combined_tables.xlsx');

}

</script>

关键功能说明:

  1. 数据合并策略

    • 自动识别每个表格的列结构

    • 按DOM顺序从上到下堆叠表格

    • 自动处理不同表格的列差异(自动扩展列)

  2. 表格间隔处理

// 添加分隔空行(可修改为添加分隔线)

if (tableIndex > 0) {

  XLSX.utils.sheet_add_aoa(ws, [[""]], ...);

  currentRow++;

}

可根据需要修改为添加分隔线或自定义内容

  1. 数据写入控制

    • currentRow 变量跟踪当前写入位置

    • 使用 sheet_add_aoa 方法精确控制写入位置

高级配置选项(可选):

// 在函数开始处添加配置对象

const config = {

  skipHeader: false,    // 是否跳过后续表格的标题行

  spacing: 1,          // 表格间隔行数(0=无间隔)

  separatorType: 'row' // 分隔类型:'row'(空行)/'line'(分割线)/'custom'

};


// 使用示例(需要修改实现逻辑):

if (tableIndex > 0 && config.spacing > 0) {

  // 添加间隔...

}

不同表格结构处理示例:

当表格列数不一致时:

表格1结构表格2结构合并结果




A列B列C列A列B列将自动扩展为三列,表格2的第三列留空

数据1数据2数据3数据A数据B数据A数据B(空)

注意事项:

  1. 样式保留:SheetJS默认不保留HTML表格样式,如需样式请使用以下方法:

// 在table_to_sheet时保留基础样式

const ws = XLSX.utils.table_to_sheet(table, {raw: true});

  1. 大数据量优化:建议添加防抖处理

// 在按钮点击时添加

let isExporting = false;

function exportAllToOneSheet() {

  if (isExporting) return;

  isExporting = true;

  // ...原有逻辑...

  isExporting = false;

}

  1. 性能监控(适用于超大数据量):

console.time('导出耗时');

// ...导出逻辑...

console.timeEnd('导出耗时'); 

如果需要保留表格的复杂结构(如合并单元格),可以使用以下增强代码:

// 替换数据合并部分

Array.from(tables).forEach(table => {

  const tempWs = XLSX.utils.table_to_sheet(table);

  XLSX.utils.sheet_add_sheet(ws, tempWs, {

    origin: { r: currentRow, c: 0 },

    // 保留合并信息

    cellStyles: true,

    mergedCells: true

  });

  currentRow += (tempWs['!ref'] ? XLSX.utils.decode_range(tempWs['!ref']).e.r : 0) + 1;

});


该文章在 2025/5/23 18:18:26 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2025 ClickSun All Rights Reserved