谷歌可视化数据表到 CSV 下载

Question

谷歌可视化数据表到 CSV 下载

Rav*_*ven 2 javascript json google-chrome google-visualization

在吸取足够长的时间后添加到 Stack Overflow。

我拥有的：

谷歌可视化产品
从数据库或表中读取数据并加载到数据表中。
Datatable 用于创建 Google Visualization 图形。
我需要根据数据的当前配置加载“下载到 CSV”的按钮或链接。即在所有处理和更改之后，包括控件。

现在我想使用带有文件名的数据表（不幸的是全局）按下 downloadCSV javascript 函数。我已经从线程的一个答案中获取了下载代码...在使用数据 uri 时，有什么方法可以指定建议的文件名

我希望人们觉得这很有帮助。

掠夺

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
    // Initial Part extracted from [Visualization: Area Chart][2]

      google.load("visualization", "1", {packages:["corechart"]});

      google.setOnLoadCallback(drawChart);
      var data;

      function drawChart() {
        data = google.visualization.arrayToDataTable([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var options = {
          title: 'Company Performance',
          hAxis: {title: 'Year',  titleTextStyle: {color: 'red'}}
        };

        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }


// Additional Code

    function downloadCSV(filename) {
        jsonDataTable = data.toJSON();
        var jsonObj = eval('(' + jsonDataTable + ')'); 
        output = JSONObjtoCSV(jsonObj,',');
    }

    function JSONObjtoCSV(jsonObj, filename){
    filename = filename || 'download.csv';
        var body = '';      var j = 0;
        var columnObj = []; var columnLabel = []; var columnType = [];
        var columnRole = [];    var outputLabel = []; var outputList = [];
        for(var i=0; i<jsonObj.cols.length; i++){
            columnObj = jsonObj.cols[i];
            columnLabel[i] = columnObj.label;
            columnType[i] = columnObj.type;
            columnRole[i] = columnObj.role;
            if (columnRole[i] == null) {
                outputLabel[j] = '"' + columnObj.label + '"';
                outputList[j] = i;
                j++;
            }           
        }
        body += outputLabel.join(",") + String.fromCharCode(13);

        for(var thisRow=0; thisRow<jsonObj.rows.length; thisRow++){
            outputData = [];
            for(var k=0; k<outputList.length; k++){
                var thisColumn = outputList[k];
                var thisType = columnType[thisColumn];
                thisValue = jsonObj.rows[thisRow].c[thisColumn].v;
                switch(thisType) {
                    case 'string':
                        outputData[k] = '"' + thisValue + '"'; break;
                    case 'datetime':
                        thisDateTime = eval("new " + thisValue);
                        outputData[k] = '"' + thisDateTime.getDate() + '-' + (thisDateTime.getMonth()+1) + '-' + thisDateTime.getFullYear() + ' ' + thisDateTime.getHours() + ':' + thisDateTime.getMinutes() + ':' + thisDateTime.getSeconds() + '"';  
                        delete window.thisDateTime;
                        break;
                    default:
                        outputData[k] = thisValue;
                }
            }
            body += outputData.join(",");
            body += String.fromCharCode(13);
        }       
        uriContent = "data:text/csv;filename=download.csv," + encodeURIComponent(body);
        newWindow=downloadWithName(uriContent, 'download.csv');
        return(body);
    }

    function downloadWithName(uri, name) {
     // /sf/ask/19876951/
    function eventFire(el, etype){
        if (el.fireEvent) {
            (el.fireEvent('on' + etype));
        } else {
            var evObj = document.createEvent('Events');
            evObj.initEvent(etype, true, false);
            el.dispatchEvent(evObj);
        }
    }
    var link = document.createElement("a");
    link.download = name;
    link.href = uri;
    eventFire(link, "click");
    }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
        <button id="CSVDownload" onclick="downloadCSV('download.csv')" title="Download to CSV">Download to CSV</Button>

  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

Answer 1

swd*_*don 5

我将添加一种稍微简单的方法来将谷歌表导出到 CSV。您可以使用 Google Visualization api。假设您dataTable在范围内调用了 google 表。然后使用以下代码将其下载为 .csv。

代码：

$('#Export').click(function () {
        var csvFormattedDataTable = google.visualization.dataTableToCsv(dataTable);
        var encodedUri = 'data:application/csv;charset=utf-8,' + encodeURIComponent(csvFormattedDataTable);
        this.href = encodedUri;
        this.download = 'table-data.csv';
        this.target = '_blank';
    });

Run Code Online (Sandbox Code Playgroud)

解释：

这里的#Export 是<a id="Export" href="#">Download as csv</a>在您的页面中设置的锚元素。谷歌可视化api

google.visualization.dataTableToCsv()

Run Code Online (Sandbox Code Playgroud)

完成将表对象重新格式化为 csv 的所有艰苦工作。有关更多信息，请参阅Google Visualization Doc。

这里我使用 jQuery 选择器$。如果您想在没有 jQuery 的情况下执行此操作，请替换$('#Export').click(function () { // Function definition here.});为document.getElementById("Export").onclick = function() { // function definition here};

通过上述方法返回 csv 格式的数据后，我们利用download属性将数据下载为具有文件名的 csv 文件table-data（您可以随意命名。

重要提示：download在此回答时，Internet Explorer 不支持该属性。这已经过 Google Chrome 和 Mozilla Firefox 的测试。有关详细信息，请下载属性。

归档时间：	12 年，3 月前
查看次数：	8905 次
最近记录：	9 年，4 月前