Search code examples
javascriptjsgrid

how to make a csv file from jsgrid data


I have a jsgrid table with data from mysql. I want to make a csv (or something else) from data what I filtered. How I can do that.

I find something like this:

var csv = $("#grid").jsGrid("exportData", {
    type: "csv", //Only CSV supported
    subset: "all" | "visible", //Visible will only output the currently displayed page
    delimiter: "|", //If using csv, the character to seperate fields
    includeHeaders: true, //Include header row in output
    encapsulate: true, //Surround each field with qoutation marks; needed for some systems
    newline: "\r\n", //Newline character to use

    //Takes each item and returns true if it should be included in output.
    //Executed only on the records within the given subset above.
    filter: function(item){return true},

    //Transformations are a way to modify the display value of the output.
    //Provide a key of the field name, and a function that takes the current value.
    transformations: {
        "Married": function(value){
            if (value === true)
                return "Yes"
            if (value !== false)
                return "No"
        }
    }
});

How to make a file from this variable ?


Solution

  • you can save the data on a array and then use this function.

    function JSONToCSVConvertor(JSONData, Label, ShowLabel) {
        //If JSONData is not an object then JSON.parse will parse the JSON string in an Object
        var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;
        var CSV = '';
        //Set Report title in first row or line
        CSV += Label + '\r\n\n';
        //This condition will generate the Label/Header
        if (ShowLabel) {
            var row = "";
            //This loop will extract the label from 1st index of on array
            for (var index in arrData[0]) {
                //Now convert each value to string and comma-seprated
                row += index + ',';
    
            }
            row = row.slice(0, -1);
            //append Label row with line break
            CSV += row + '\r\n';
        }
        //1st loop is to extract each row
        for (var i = 0; i < arrData.length; i++) {
            var row = "";
            //2nd loop will extract each column and convert it in string comma-seprated
            for (var index in arrData[i]) {
    
                row += '"' + arrData[i][index] + '",';
    
            }
            row.slice(0, row.length - 1);
            //add a line break after each row
            CSV += row + '\r\n';
        }
        if (CSV == '') {
            alert("Invalid data");
            return;
        }
        //Generate a file name
        var fileName = "FileTitle";
    
        //Initialize file format you want csv or xls
        var uri = 'data:text/csv;charset=utf-8,' + escape(CSV);
        //alert(uri);
        // Now the little tricky part.
        // you can use either>> window.open(uri);
        // but this will not work in some browsers
        // or you will not get the correct file extension
        //this trick will generate a temp <a /> tag
        var link = document.createElement("a");
        link.href = URL.createObjectURL(new Blob([CSV], { type: "application/octet-stream" })); //added to fix network error problem in chrome
        //set the visibility hidden so it will not effect on your web-layout
        link.style = "visibility:hidden";
        link.download = fileName + ".csv";
        //this part will append the anchor tag and remove it after automatic click
        document.body.appendChild(link);
        link.click();
        // document.body.removeChild(link);
    }