純JavaScript代碼導(dǎo)出HTML的DIV中多個(gè)table到Excel文件的同一個(gè)工作表中并下載，以下是實(shí)現(xiàn)將DIV內(nèi)多個(gè)表格合并導(dǎo)出到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>部門(mén)</th></tr>
    <tr><td>張三</td><td>技術(shù)部</td></tr>
  </table>
  
  <!-- 表格2 -->
  <table>
    <tr><th>項(xiàng)目</th><th>進(jìn)度</th></tr>
    <tr><td>系統(tǒng)升級(jí)</td><td>50%</td></tr>
    <tr><td>安全審計(jì)</td><td>已完成</td></tr>
  </table>
</div>


<button onclick="exportAllToOneSheet()">合并導(dǎo)出</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([[]]); // 創(chuàng)建空工作表


  let currentRow = 0; // 當(dāng)前寫(xiě)入行指針


  Array.from(tables).forEach((table, tableIndex) => {
    // 將表格轉(zhuǎn)換為二維數(shù)組
    const tableData = XLSX.utils.sheet_to_json(
      XLSX.utils.table_to_sheet(table),
      { header: 1 }
    );


    // 添加表格間的分隔空行（第一個(gè)表格前不加）
    if (tableIndex > 0) {
      XLSX.utils.sheet_add_aoa(ws, [[""]], { origin: { r: currentRow, c: 0 } });
      currentRow++;
    }


    // 將表格數(shù)據(jù)寫(xiě)入工作表
    XLSX.utils.sheet_add_aoa(ws, tableData, {
      origin: { r: currentRow, c: 0 } // 從當(dāng)前行開(kāi)始寫(xiě)入
    });


    // 更新行指針（+數(shù)據(jù)行數(shù)）
    currentRow += tableData.length;
  });


  // 將工作表添加到工作簿
  XLSX.utils.book_append_sheet(wb, ws, "合并數(shù)據(jù)");


  // 生成并下載文件
  XLSX.writeFile(wb, 'combined_tables.xlsx');
}
</script>

關(guān)鍵功能說(shuō)明：

1. 數(shù)據(jù)合并策略：

   • 自動(dòng)識(shí)別每個(gè)表格的列結(jié)構(gòu)

   • 按DOM順序從上到下堆疊表格

   • 自動(dòng)處理不同表格的列差異（自動(dòng)擴(kuò)展列）

2. 表格間隔處理：

// 添加分隔空行（可修改為添加分隔線）
if (tableIndex > 0) {
  XLSX.utils.sheet_add_aoa(ws, [[""]], ...);
  currentRow++;
}?

可根據(jù)需要修改為添加分隔線或自定義內(nèi)容

1. 數(shù)據(jù)寫(xiě)入控制：

   • currentRow 變量跟蹤當(dāng)前寫(xiě)入位置

   • 使用 sheet_add_aoa 方法精確控制寫(xiě)入位置

高級(jí)配置選項(xiàng)（可選）：

// 在函數(shù)開(kāi)始處添加配置對(duì)象
const config = {
  skipHeader: false,    // 是否跳過(guò)后續(xù)表格的標(biāo)題行
  spacing: 1,          // 表格間隔行數(shù)（0=無(wú)間隔）
  separatorType: 'row' // 分隔類(lèi)型：'row'(空行)/'line'(分割線)/'custom'
};


// 使用示例（需要修改實(shí)現(xiàn)邏輯）：
if (tableIndex > 0 && config.spacing > 0) {
  // 添加間隔...
}?

不同表格結(jié)構(gòu)處理示例：

當(dāng)表格列數(shù)不一致時(shí)：

注意事項(xiàng)：

1. 樣式保留：SheetJS默認(rèn)不保留HTML表格樣式，如需樣式請(qǐng)使用以下方法：

// 在table_to_sheet時(shí)保留基礎(chǔ)樣式
const ws = XLSX.utils.table_to_sheet(table, {raw: true});?

1. 大數(shù)據(jù)量?jī)?yōu)化：建議添加防抖處理

// 在按鈕點(diǎn)擊時(shí)添加
let isExporting = false;
function exportAllToOneSheet() {
  if (isExporting) return;
  isExporting = true;
  // ...原有邏輯...
  isExporting = false;
}?

1. 性能監(jiān)控（適用于超大數(shù)據(jù)量）：

console.time('導(dǎo)出耗時(shí)');
// ...導(dǎo)出邏輯...
console.timeEnd('導(dǎo)出耗時(shí)'); ?

如果需要保留表格的復(fù)雜結(jié)構(gòu)（如合并單元格），可以使用以下增強(qiáng)代碼：

// 替換數(shù)據(jù)合并部分
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;
});