Question

我尝试在其网站上使用Highcharts导出功能作为示例：http://jsfiddle.net/highcharts/cqjvD/但我希望能够下载csv文件而不是警告/显示它。

显示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()));
});

以下行告诉浏览器在新窗口中打开数据 - 浏览器无法识别text / 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内容并将其作为锚点href，然后将download属性添加到锚点，其中值为filename。您可以在此处查看预览http://jsfiddle.net/uF4H7/12/（点击“提醒CSV”旁边的“下载”）

Answer 2

exporting: {
           buttons: {
               contextButton: {
                   menuItems: [{
                       textKey: 'downloadXLS',
                       onclick: function () {
                           this.downloadXLS();
                       }
                   }, {
                       textKey: 'downloadCSV',
                       onclick: function () {
                           this.downloadCSV();
                       }
                   }]
               }
           }
       },

您可以在创建高级图时直接添加此选项。

Answer 3

只有在我添加以下Highcharts插件后，Asiya Shaikh的建议才对我有用：

<script src="http://highcharts.github.io/export-csv/export-csv.js"></script>

考虑到插件主页如何提及downloadXLS（），这有点奇怪;功能

如果这不起作用，您还应该尝试使用：

<script src="http://code.highcharts.com/modules/exporting.js"></script>

您可以使用EXPORT-CSV plugin homepage作为参考，但正如我所说，它没有提及downloadXLS（）。

将highcharts数据导出为CSV文件

3 个答案: