JSON是網路上常用的交換格式,如何透過JavaScript轉換為CSV,並自動下載成CSV檔案呢? 請看下方code:

$('#_json').click(function () {
    this.select(); //點選會全選
});

// JSON to CSV Converter
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 + '\r\n';
    }

    return str;
}

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

    // Create Object
    var items = [
        { car: "奧迪", color: "黑色", size: "1200cc" },
        { car: "法拉利", color: "紅色", size: "1500cc" },
        { car: "藍寶堅尼", color: "銀色", size: "2000cc" }];

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

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

    var header = 'car,color,size';
    var str = header + '\r\n';
    str += ConvertToCSV(jsonObject);
    // Convert JSON to CSV & Display CSV
    $('#csv').text(str);


    $("#_json").val('[{"car":"奧迪","color":"黑色","size":"1200cc"},{"car":"法拉利","color":"紅色","size":"1500cc"},{"car":"藍寶堅尼","color":"銀色","size":"2000cc"}]');
});




function convert() {
    var json = $("#_json").val();
    //console.log(json);
    if (json == '')
        return;
    //json = JSON.parse(json).results;
    json = JSON.parse(json);
    // Find the largest element
    var largestEntry = 0;
    var header;
    for (var i = 0; i < json.length; i++) {
        if (!Object.keys) {
            Object.keys = function (obj) {
                var keys = [];
                for (var i in obj) {
                    if (obj.hasOwnProperty(i)) {
                        keys.push(i);
                    }
                }
                return keys;
            };
        }
        if (Object.keys(json[i]).length > largestEntry) {
            largestEntry = Object.keys(json[i]).length;
            header = Object.keys(json[i]);
        }
    };
    // Assemble the header
    var convertedjson = "";
    if (typeof Array.prototype.forEach != 'function') {
        Array.prototype.forEach = function (callback) {
            for (var i = 0; i < this.length; i++) {
                callback.apply(this, [this[i], i, this]);
            }
        };
    }
    header.forEach(function (heading) {
        if (convertedjson != "") {
            convertedjson += ",";
        }
        convertedjson += "\"";
        convertedjson += heading
        convertedjson += "\"";
    });
    convertedjson += "\r\n";
    // Iterate through the header for all elements
    json.forEach(function (entry) {
        header.forEach(function (heading) {
            convertedjson += "\"";
            convertedjson += (entry[heading] || "");
            convertedjson += "\"";
            convertedjson += ",";
        });
        convertedjson = convertedjson.substring(0, convertedjson.length - 1);
        convertedjson += "\r\n";
    });
    $("#_csv").val(convertedjson);
}

function convertAndExport() {
    convert();
    var csv = $("#_csv").val();
    if (csv == '')
        return;
    // Exporting
    var months = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");
    var now = new Date();
    var date = now.getDate();
    var year = now.getFullYear();
    var month = months[now.getMonth()];
    var fileName = "CSV" + year + month + date;
    var uri = 'data:text/csv;charset=utf-8,\uFEFF' + encodeURI(csv); //encodeURI用來轉為UTF-8編碼
    var link = document.createElement("a");
    $(link).hide();
    link.href = uri;
    link.download = fileName + ".csv";
    $("body").append(link);
    link.click();
    $("body").remove(link);
}

下面我在CodePen有做一個範例,可參考。