Google 可视化将 DataView 导出到 Excel

Question

我正在寻求有关为用户提供单击按钮以将图表/表格后面的 DataView 导出到 Excel 的最佳做法的建议。

我查看了Toolbar 功能，但发现这不起作用，因为DataView 是“手动填充的”，而不是 API 所需的 URL。 （如果我的理解有误，请纠正我。）

我更喜欢遵循/使用该领域常见的方法。

建议？

Answer 1

这就是我为感兴趣的人解决它的方法。

HTML：

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

我的表格对象是.ChartWrapper，所以我可以稍后使用.getDataTable() 方法。

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

JavaScript - Google 可视化事件监听器

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

Javascript-函数源码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';
}

这适用于我的应用程序。干杯！