使用 javascript 将文件下载为 .csv 文件 [英] Using javascript to download file as a.csv file

问题描述

您好，我正在尝试将文件导出为 .csv 文件，以便当用户单击下载按钮时，浏览器会自动将文件下载为 .csv.我还希望能够为要导出的 .csv 文件设置名称

Hi I am trying to export a file as .csv file, so that when the user clicks on the download button, the browser would automatically download the file as .csv. I also want to be able to set a name for the .csv file to be exported

我正在使用 javascript 来执行此操作

I am using javascript to do this

代码如下:

 function ConvertToCSV(objArray) {
            var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
            var str = '';

            for (var i = 0; i < array.length; i++) {
                var line = '';
            for (var index in array[i]) {
                if (line != '') line += ','

                line += array[i][index];
            }

            str += line + '
';
        }

        return str;
    }

    // Example
    $(document).ready(function () {

        // Create Object
        var items = [
              { "name": "Item 1", "color": "Green", "size": "X-Large" },
              { "name": "Item 2", "color": "Green", "size": "X-Large" },
              { "name": "Item 3", "color": "Green", "size": "X-Large" }];

        // Convert Object to JSON
        var jsonObject = JSON.stringify(items);

        // Display JSON
        $('#json').text(jsonObject);

        // Convert JSON to CSV & Display CSV
        $('#csv').text(ConvertToCSV(jsonObject));

        $("#download").click(function() {
            alert("2");
            var csv = ConvertToCSV(jsonObject);
            window.open("data:text/csv;charset=utf-8," + escape(csv))
            ///////


        });

    });

请多多指教我的老板在这个问题上对我嗤之以鼻

Please advise on this My Boss is breathing down my neck on this issue

请帮忙

推荐答案

我在这个线程中写了一个解决方案:如何使用window.open设置文件名

I have written a solution in this thread: how to set a file name using window.open

这是一个简单的解决方案:

This is the simple solution:

 $("#download_1").click(function() {
var json_pre = '[{"Id":1,"UserName":"Sam Smith"},{"Id":2,"UserName":"Fred Frankly"},{"Id":1,"UserName":"Zachary Zupers"}]';
var json = $.parseJSON(json_pre);

var csv = JSON2CSV(json);
var downloadLink = document.createElement("a");
var blob = new Blob(["ufeff", csv]);
var url = URL.createObjectURL(blob);
downloadLink.href = url;
downloadLink.download = "data.csv";

document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
});

JSON2CSV 函数

JSON2CSV function

function JSON2CSV(objArray) {
    var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
    var str = '';
    var line = '';

    if ($("#labels").is(':checked')) {
        var head = array[0];
        if ($("#quote").is(':checked')) {
            for (var index in array[0]) {
                var value = index + "";
                line += '"' + value.replace(/"/g, '""') + '",';
            }
        } else {
            for (var index in array[0]) {
                line += index + ',';
            }
        }

        line = line.slice(0, -1);
        str += line + '
';
    }

    for (var i = 0; i < array.length; i++) {
        var line = '';

        if ($("#quote").is(':checked')) {
            for (var index in array[i]) {
                var value = array[i][index] + "";
                line += '"' + value.replace(/"/g, '""') + '",';
            }
        } else {
            for (var index in array[i]) {
                line += array[i][index] + ',';
            }
        }

        line = line.slice(0, -1);
        str += line + '
';
    }
    return str;
}

这篇关于使用 javascript 将文件下载为 .csv 文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！