javascript - 将 highcharts 数据导出到 CSV 文件

Question

我尝试使用 Highcharts 导出功能，如其网站上所示:http://jsfiddle.net/highcharts/cqjvD/但我希望能够下载 csv 文件而不是提醒/显示它。

这是我的图表:http://jsfiddle.net/uF4H7/10/

显示 csv 的代码很简单，您只需添加:

$('#getcsv').click(function () {
   alert(chart.getCSV());
 });

这可以在 html/js/highcharts 中完成吗？

Answer 1

检查以下内容http://jsfiddle.net/uF4H7/11/

$('#getcsv').click(function () {
    var chart = $('#container').highcharts();
    alert(chart.getCSV());
    window.open();
    //this line was added to your code to download the CSV
    window.open("data:text/csv;charset=utf-8," + escape(chart.getCSV()));
});

以下行告诉浏览器在新窗口中打开数据 - 浏览器无法识别文本/csv mime，因此它们要求您下载 CSV 文件

window.open("data:text/csv;charset=utf-8," + escape(chart.getCSV()));

或者您可以使用 HTML 的新功能 - 使用 download 属性强制下载的链接。在您的情况下，将此代码添加到 javascript:

$('#getcsvAnchor').click(function() {
    var chart = $('#container').highcharts();
    $(this).attr('href', 'data:text/csv;charset=utf-8,'+escape(chart.getCSV())); 
    $(this).attr('download', "data-visualisation.csv");
});

将其添加到您的 HTML - 下载链接:

<a id="getcsvAnchor" href="#">download</a>

JavaScript 获取 CSV 内容并将其作为 anchor href，然后将 download 属性添加到值为文件名的 anchor 。您可以在这里查看预览 http://jsfiddle.net/uF4H7/12/ (点击“警报 CSV”旁边的“下载”)