谷歌可视化数据表CSV下载
Google Visualization Datatable to CSV download
抓取足够长的时间后添加到堆栈溢出。
我所拥有的:
- 谷歌可视化产品
- 从数据库或表中读取并加载到数据表中的数据
- Datatable用于创建Google可视化图形
- 按钮或链接到"下载到CSV",我需要根据数据的当前配置。即在所有处理和更改,包括控制
现在,我想按下带有文件名的数据表(不幸的是全局)的downloadCSV javascript函数。我已经从线程中的一个答案中获取了下载代码。。。当使用数据uri 时,有什么方法可以指定建议的文件名吗
我希望人们觉得这很有帮助。
Raven
<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) {
// https://stackoverflow.com/questions/283956/is-there-any-way-to-specify-a-suggested-filename-when-using-data-uri
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>
我将添加一种稍微简单的方法来将谷歌表导出到CSV。你可以使用谷歌可视化api。假设您的作用域中有一个名为dataTable
的谷歌表。然后使用以下代码将其下载为.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';
});
解释:
这里#Export是一个锚元素,在您的页面中设置为<a id="Export" href="#">Download as csv</a>
。谷歌可视化api的
google.visualization.dataTableToCsv()
完成将表对象重新格式化为csv的所有艰苦工作。有关这方面的更多信息,请访问谷歌可视化文档。
这里我使用的是jQuery选择器$
。如果要在没有jQuery的情况下执行此操作,请将$('#Export').click(function () { // Function definition here.});
替换为document.getElementById("Export").onclick = function() { // function definition here};
一旦通过上述方法返回csv格式的数据,我们就利用download
属性将数据下载为文件名为table-data
的csv文件(您可以随意命名。
重要提示:在回答此问题时,Internet Explorer不支持download
属性。这已经在谷歌Chrome和Mozilla Firefox上进行了测试。有关详细信息,请下载属性。
- PERL-下载CSV文件不完整
- R: 从网站下载.csv
- 从angular js中的webapi下载csv文件
- 可通过Ajax下载CSV文件
- 使用窗口对象下载 CSV 文件
- 使用 AJAX 下载 CSV
- 在满足条件时下载 CSV
- angularjs + 下载 csv 文件 + 错误: [$injector:unpr] 未知提供程序
- 使用 AJAX 和 PHP 的可下载 CSV 出现问题
- 以zip格式下载csv
- 如何通过网页上的ashx程序下载csv数据
- 使用javascript下载.csv
- 如何跳过第一行并添加标题以下载csv文件
- 使用angularjs、nodejs、expressjs点击按钮后,在前端下载Csv文件
- 从第三方网站下载csv文件的PHP代码
- 使用Media Formatters从Web API下载CSV文件
- javascript在Safari中下载csv数据
- 窗口点打开方法得到页面不能显示下载csv文件的问题
- PHP -引导模式对话框,选择日期,下载CSV -不能让浏览器保存文件
- Angular在浏览器上下载csv文件