HTML与JavaScript导出Excel时表格单元格数据未保存问题

问题现象 #

动态新增/删除表格行功能正常，单元格内的input可编辑，但导出Excel后仅保留表格结构，输入框里的内容未被保存。

问题原因 #

当前导出逻辑直接使用表格的outerHTML，而outerHTML仅获取元素初始HTML结构，不会同步input控件中用户输入的实时值。

修复方案 #

导出前先将每个input的实时值同步到对应单元格（替换input为文本内容），再生成导出的HTML。

修改后的完整代码 #

JavaScript代码

function exportTableToExcel(tableID, filename = ''){
    var downloadLink;
    var dataType = 'application/vnd.ms-excel';
    var tableSelect = document.getElementById(tableID);
    
    // 克隆表格，避免修改原页面DOM结构
    var tableClone = tableSelect.cloneNode(true);
    // 获取克隆表格内所有文本输入框
    var inputs = tableClone.querySelectorAll('input[type="text"]');
    
    // 将输入框替换为用户输入的文本内容
    inputs.forEach(input => {
        var textNode = document.createTextNode(input.value);
        input.parentNode.replaceChild(textNode, input);
    });
    
    // 移除删除按钮所在单元格（可选，按需保留）
    var deleteButtons = tableClone.querySelectorAll('input[type="button"]');
    deleteButtons.forEach(button => {
        button.parentNode.remove();
    });
    
    var tableHTML = tableClone.outerHTML.replace(/ /g, '%20');    
    filename = filename ? filename + '.xls' : 'excel_data.xls';    
    downloadLink = document.createElement("a");
    document.body.appendChild(downloadLink);
    
    if(navigator.msSaveOrOpenBlob){
        var blob = new Blob(['\ufeff', tableHTML], {
            type: dataType
        });
        navigator.msSaveOrOpenBlob(blob, filename);
    }
    else{
        downloadLink.href = 'data:' + dataType + ', ' + tableHTML;    
        downloadLink.download = filename;
        downloadLink.click();
    }
    
    // 清理克隆的表格，避免DOM冗余
    tableClone.remove();
}

function addField(table){
  var tableRef = document.getElementById(table);
  var newRow   = tableRef.insertRow(-1);

  var newCell  = newRow.insertCell(0);
  var newElem = document.createElement( 'input' );
  newElem.setAttribute("name", "links");
  newElem.setAttribute("type", "text");
  newCell.appendChild(newElem);

  newCell = newRow.insertCell(1);
  newElem = document.createElement( 'input' );
  newElem.setAttribute("name", "keywords");
  newElem.setAttribute("type", "text");
  newCell.appendChild(newElem);

  newCell = newRow.insertCell(2);
  newElem = document.createElement( 'input' );
  newElem.setAttribute("name", "violationtype");
  newElem.setAttribute("type", "text");
  newCell.appendChild(newElem);

  newCell = newRow.insertCell(3);
  newElem = document.createElement( 'input' );
  newElem.setAttribute("type", "button");
  newElem.setAttribute("value", "Delete Row");
  newElem.setAttribute("onclick", 'SomeDeleteRowFunction(this)')
  newCell.appendChild(newElem);
}
    
window.SomeDeleteRowFunction = function SomeDeleteRowFunction(o) {
     var p=o.parentNode.parentNode;
     p.parentNode.removeChild(p);
}

HTML代码

<table id="tblData" class="editable">
    <tr>
        <th>Name</th>
        <th>HW</th>
        <th>HW</th>
        <th>Operation</th> <!-- 新增操作列表头 -->
    </tr>
    <tr>
      <td><input type="text" name="links" /></td>
      <td><input type="text" name="keywords" /></td> 
      <td><input type="text" name="violationtype" /></td>
      <td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this)"/></td>          
    </tr>
</table>
<input type="submit" class="button" value="Add another line" onclick="addField('tblData');" />
<button onclick="exportTableToExcel('tblData', 'class1')">Save data</button>

修复说明 #

• 克隆表格：避免修改原页面DOM，保证用户操作不受影响
• 替换输入框为文本：将用户输入的实时值转为文本节点，确保导出内容包含输入数据
• 移除操作按钮：按需清理Excel中不需要的操作列，优化导出结果
• 修正删除按钮参数：原HTML中第一行删除按钮的onclick参数错误，改为this才能正确定位删除行

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