Sample function to download ExtJS grid data to CSV with filters, hidden columns

extjs_grid_exporter.md

Exjts grids make it very easy to filter data, rearrange columns, hide/show columns, and many other things. The problem is that many grid download plugins go back to the store (database) to get the data. All the data modification that is happening on the client-side is not reflected in the download file.

Here is a hacked workaround that takes what is literally displayed on the grid and stuffs it in a CSV for the user. Probably not the most elegant or efficient implementation, but with my grid of ~800 rows and a dozen columns it still is instantaneous.

Credit to this gist and this SO post, which I combined and made a few modifications to to get this.

Further, some of the hardcoded values might need to be changed depending on your grid. I have row numbers in mine, which I skip in download by starting the column iteration (j on inner loop) at 1 rather than 0.

download_csv:function(button){
    var grid = button.up('gridpanel');
    var csvContent = "data:text/csv;charset=utf-8\n";

    var columns = grid.columnManager.columns;
    var columnsCount = columns.length;
    for (var i = 0; i < columnsCount; i++) {
        if (!columns[i].hidden) {
            csvContent += columns[i].text + ",";
        }
    }
    csvContent = csvContent.substring(0, csvContent.length-1);
    csvContent += "\r";

    for (var j = 0; j<columnsCount; j++) {
        if(!columns[j].hidden){
            console.log(columns[j]);
        }
    }

    var rows = grid.store.data.items;
    var rowsCount = rows.length;

    for (var i = 0; i < rowsCount; i++) {
        var row = rows[i].data;
        for (var j = 1; j<columnsCount; j++) {
            if (!columns[j].hidden) {
                var value = row[columns[j].dataIndex];
                csvContent += "\"" + value + "\"" + ",";
            }
        }
        csvContent = csvContent.substring(0, csvContent.length-1);
        csvContent += "\r";
    }


    var encodedUri = encodeURI(csvContent);
    var is_safari = navigator.userAgent.toLowerCase().indexOf('safari/') > -1;

    if(!is_safari){
        var link = document.createElement("a");
        link.setAttribute("href", encodedUri);
        link.setAttribute("download", "my_data.csv");
        document.body.appendChild(link); // Required for FF
        link.click(); // This will download the data file named "my_data.csv".
    }else{
        var link = document.createElement("a");
        link.setAttribute("href", encodedUri);
        link.setAttribute("target", "_blank");
        document.body.appendChild(link); // Required for FF
        link.click(); // This will download the data file named "my_data.csv".
    }
}