Google visualization export DataView to Excel

Question

I’m seeking advice on best practice for providing the user a click button to export a DataView behind chart/table into Excel.

I looked into the Toolbar functionality but found this does not work because the DataView is “hand-populated“ and not a URL required by the API. (Please correct me if I’m mistaken in my understanding.)

I prefer to follow/use methods which are common in the field.

Suggestions?

Answer 1

This is how I solved it for anyone interested.

HTML:

<div id="div_table"></div>
<a id="exportCSV" href="">Excel</a>

My table object is a .ChartWrapper so I can use the .getDataTable() method later.

var table = new google.visualization.ChartWrapper({
    chartType: 'Table',
    containerId: 'div_table',
    options: {allowHtml: true}
});

JavaScript - Google visualization event listener

document.getElementById("exportCSV").addEventListener("click", function () {
    var csvData = table.getDataTable(); //google visualization DataTable to download
    export_CSV("exportCSV", csvData);
});

Javascript - function source material https://stackoverflow.com/a/42956427/7763687

function export_CSV(elementID, data) {

    var csvColumns;
    var csvContent;
    var downloadLink;

    // build column headings
    csvColumns = '';
    for (var i = 0; i < data.getNumberOfColumns(); i++) {
        csvColumns += data.getColumnLabel(i);
        if (i < data.getNumberOfColumns() - 1) {
            csvColumns += ',';
        }
    }
    csvColumns += '\n';

    // get data rows
    csvContent = csvColumns + google.visualization.dataTableToCsv(data);

    //New Download Link - works in chrome and mozilla
    downloadLink = document.getElementById(elementID);
    downloadLink.href = 'data:text/csv;charset=utf-8,' + encodeURI(csvContent);
    downloadLink.download = 'data.csv';
    downloadLink.target = '_blank';
}

This worked ok for my application. Cheers!