Javascript表单输入到csv文件

时间:2016-04-15 16:43:29

标签: javascript json html5 csv local-storage

我有以下代码,请参阅codepen http://codepen.io/Jacqueline34/pen/GZxxRV我认为第25行我的代码是问题,但我可以看到如何纠正(noob alert!)。我可以在localstorage中正确存储表单输入,但是当我打开excel文件时,文件显示[object] [object]等。如何修改我的代码以在excel文件中输出localstorage数据?这让我头疼了。 :)

$("#save").click(function(e) {                          
    e.preventDefault();                                 
    localStorage.setItem("user_input", "set");          
    var data = $("#contact-form").serializeArray();     
        $.each(data, function(i, obj) {                  
            localStorage.setItem(obj.name, obj.value);  
        });
        $("#message").html("<p style='color:red'><strong>Thank you.  Your information has been saved</strong></p><br/>"); 
});

    if (localStorage.getItem("user_input") == "set") {          
    var data = $("#contact-form").serializeArray();              
        $.each(data, function(i, obj) {
            $("[name='" + obj.name + "']").val(localStorage.getItem(obj.name));  
        });             
    }

    $(function exportData() {
    var data = $("#contact-form").serializeArray();                         
        $.each(data, function(i, obj) {
        data += $("[name='" + i + "']") + "," + $("[name='" + obj.name + "']").val();
        }); 
        data += '\r\n';                                                     

        var exportLink = document.createElement('a');                                   
        exportLink.setAttribute('href', 'data:text/csv;base64,' + window.btoa(data));  
        exportLink.appendChild(document.createTextNode('data.csv'));                    
        document.getElementById('results').appendChild(exportLink);                     
}); 

1 个答案:

答案 0 :(得分:0)

看起来你写下对象而不是对象的内容。

我已经改变了你的html并做了一个按钮:

<button id="next" type="button" class="btn btn-default" onclick="exportData()">Export</button>

我删除了原始

$(function exportData() { }

从您的代码中添加一个新的 范围:

$(document).ready(function () { }

我改变了导出函数,如下所示:

function exportData() {

    var data = $("#contact-form").serializeArray();
    var out = '';    

    for (var i = 0; i < data.length; i++) {
        out += data[i].name + "," + data[i].value;
        out += '\r\n';
    }

    var blob = new Blob([out], { type: 'text/csv;charset=utf-8;'});
    if (navigator.msSaveBlob) {
        navigator.msSaveBlob(blob, 'export.csv');
    } else {
        var link = document.createElement("a");
        if (link.download !== undefined) { // feature detection
            var url = URL.createObjectURL(blob);
            link.setAttribute("href", url);
            link.setAttribute("download", 'export.csv');
            link.style.visibility = 'hidden';
            document.body.appendChild(link);
            link.click();
        }
    }    
}

所以这个功能现在就可以了。 我希望它有所帮助...