需要将<div>中的表导出为ex​​cel，保留填充的输入和选项数据

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();
    });

这个几乎做了我需要的东西，但我希望能够将最初的选择（下拉和字段）保留为最终输出中的值。我发现了一些相关的代码，用它们的值替换这些标签，但这会影响页面本身，而不是输出。

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-*属性来执行此操作。然后再次导出克隆节点。