HTML表格转Excel时text类型input单元格值不显示问题咨询

你当前代码中处理input标签的逻辑存在问题：使用正则/<input[^>]*>|<\/input>/gi直接将所有input标签整体替换为空字符串，完全没有提取input标签value属性中存储的内容，因此包含输入框的单元格导出后会显示为空白。

根据你的需求可以选择以下两种实现方式：

方案1：最小改动，调整正则替换规则 #

仅修改原代码中处理input标签的正则逻辑，不再将input替换为空，而是捕获value属性的内容，用属性值替换整个input标签即可。
将原代码中这一行：

tab_text= tab_text.replace(/<input[^>]*>|<\/input>/gi, ""); 

替换为：

tab_text = tab_text.replace(/<input[^>]*?value\s*=\s*["']([^"']*)["'][^>]*?>/gi, "$1");

该写法可以直接提取HTML中input标签写死的默认value值，不需要改动其余遍历逻辑，改动量最小。但如果导出前用户手动修改过输入框内容，该方法只能拿到初始默认值，无法获取用户修改后的实时内容。

方案2：遍历DOM提取内容（推荐，兼容性更强） #

放弃直接拼接行innerHTML+正则替换的思路，在遍历表格时逐单元格处理：检测单元格内是否存在输入框，若存在则直接读取输入框的实时value作为单元格内容，不存在则读取单元格原有内容。这种方式既可以拿到默认值，也可以支持用户修改输入框内容后导出最新值，容错率更高。
完整修改后的导出函数代码如下：

function fnExcelReport()
{
    var tab_text="<table border='2px'><tr style='font-size: 11px !important; font-family: Calibri;'>";
    var j=0;
    tab = document.getElementById('certain_table');

    for(j = 0 ; j < tab.rows.length ; j++) 
    {     
        tab_text += "<tr>";
        // 遍历当前行所有单元格
        const cells = tab.rows[j].cells;
        for (let k = 0; k < cells.length; k++) {
            const cell = cells[k];
            let cellHtml = cell.innerHTML;
            // 查找单元格内的文本输入框
            const textInput = cell.querySelector('input[type="text"]');
            if (textInput) {
                // 用输入框的实时值替换input标签
                cellHtml = textInput.value;
            }
            tab_text += `<td>${cellHtml}</td>`;
        }
        tab_text += "</tr>";
    }

    tab_text=tab_text+"</table>";
    tab_text= tab_text.replace(/<A[^>]*>|<\/A>/g, "");
    tab_text= tab_text.replace(/<img[^>]*>/gi,"");

    var link = document.createElement("a");
    link.href = 'data:application/vnd.ms-excel,' + encodeURIComponent(tab_text);
    link.download = "StudentRecord_Vipul.xls";
    link.click();
}

如果后续单元格内需要支持textarea、下拉选择框等其他表单元素导出，参照input的处理逻辑，提前读取对应表单元素的值替换标签即可，不需要写复杂的正则匹配规则。

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