需要将 <div> 中的表导出为 excel，保留填写的输入和选项数据

Question

我有一个页面在 javascript 中进行一些选择并根据输入提出建议。我的一些客户希望能够以 excel 格式保存此数据，但我运行遇到了改进该格式的问题。

这是我找到的将 DIV 中的 HTML 导出为 XLS 的代码：

$('btnExport').addEvent('click', function(e){
        //getting values of current time for generating the file name
        var dt = new Date();
        var day = dt.getDate();
        var month = dt.getMonth() + 1;
        var year = dt.getFullYear();
        var hour = dt.getHours();
        var mins = dt.getMinutes();
        var postfix = day + "." + month + "." + year + "_" + hour + "." + mins;
        //creating a temporary HTML link element (they support setting file names)
        var a = document.createElement('a');
        //getting data from our div that contains the HTML table
        var data_type = 'data:application/vnd.ms-excel';
        var table_div = document.getElementById('dvData');
        var table_html = table_div.outerHTML.replace(/ /g, '%20');
        a.href = data_type + ', ' + table_html;
        //setting the file name
        a.download = 'exported_table_' + postfix + '.xls';
        //triggering the function
        a.click();
        //just in case, prevent default behaviour
        e.preventDefault();
    });

这 almost 可以满足我的需要，但我希望能够在最终输出中保留初始选择（包括下拉列表和字段）作为它们的值.我找到了一些相关的代码并用它们的值替换这些标签，但这会影响页面本身，而不是输出。

var inputs = document.querySelectorAll('select');
for (var i = 0; i < inputs.length; i++) {
    var text = document.createTextNode(inputs[i].value);
    inputs[i].parentNode.replaceChild(text, inputs[i]);
}

如何将这两个函数组合成有意义的东西？我需要导出的数据分布在多个表中。我找到了一些利用 jquery 的解决方案，但我在网站上使用的是 mootools，将两者结合起来似乎会破坏一些东西。

Answer 1

我会给你一个懒惰解决方案的提示。在页面加载克隆 div 和 cloneNode 并将其保留为变量。当您需要导出时，只需导出该引用（而不是实际的 div）。

另一方面，如果您需要保留用户输入的一些其他信息，仍然克隆节点并运行通过克隆实例中的所有字段和下拉列表并将它们设置回默认值。如果您需要引用每个下拉列表的每个默认值，您可以使用某种 data-* 属性来实现。然后再次导出克隆的节点。

需要将 <div> 中的表导出为 excel，保留填写的输入和选项数据

Need to export tables inside a <div> as excel, keeping filled-in input and option data

javascript

html

excel

export

element