[英]Google Visualization Datatable to CSV download
浸没足够长的时间后会增加堆栈溢出。
我有的:
现在,我想按下带有文件名的数据表(不幸的是全局)的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) {
// 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>
我将添加一种稍微简单的方法来将Google表格导出为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';
});
说明:
这里#Export是在页面中设置为<a id="Export" href="#">Download as csv</a>
的锚元素。 Google可视化API的
google.visualization.dataTableToCsv()
将表格对象重新格式化为csv的所有艰苦工作。 有关更多信息,请参见Google Visualization Doc 。
在这里,我正在使用jQuery选择器$
。 如果要在没有jQuery的情况下执行此操作,请替换$('#Export').click(function () { // Function definition here.});
使用document.getElementById("Export").onclick = function() { // function definition here};
通过上述方法返回csv格式的数据后,我们将利用download
属性以文件名table-data
将数据下载为csv文件(您可以随意命名。
重要提示:在回答此问题时,Internet Explorer不支持download
属性。 已通过Google Chrome和Mozilla Firefox进行了测试。 有关更多信息,请下载属性 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.