LOGO OA教程 ERP教程 模切知識交流 PMS教程 CRM教程 開發文檔 其他文檔  
 
網站管理員

純JavaScript代碼導出HTML的DIV中多個table到Excel文件的同一個工作表中并下載

admin
2025年5月23日 13:57 本文熱度 94

純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

黄频国产免费高清视频,久久不卡精品中文字幕一区,激情五月天AV电影在线观看,欧美国产韩国日本一区二区
亚洲小电影在线观看的网址 | 亚洲中文字幕在线资源第1页 | 一级精品偷拍性视频 | 伊人亚洲福利一区二区三区 | 亚洲第一区欧美国产综合86 | 中文字幕亚洲制服在线看 |