Highcharts：如何从浏览器中导出多个图表？答案

【问题标题】：Highcharts: how to export several charts from the browser?Highcharts：如何从浏览器中导出多个图表？
【发布时间】：2014-09-21 12:38:50
【问题描述】：

我有一个页面，上面有四个折线图。通过拥有

exporting: {
    enabled: false
}

我可以看到 Highcharts 生成的导出下拉列表，其中包含每个图表上的下载为 PDF 等选项。这些导出选项不涉及对服务器的任何访问。这是一个纯粹的客户端解决方案。

我想知道是否有任何方法可以在浏览器中使用 Javascript 让我将页面上的所有图表导出到单个 PDF 文档中？

感谢和问候。

【问题讨论】：

FAQ 怎么样？ ;)
Pawel, “我可以看到 Highcharts 生成的导出下拉菜单，其中包含每个图表上的下载为 PDF 等选项。这些导出选项不涉及对服务器的任何访问。这是一个纯客户端-side 解决方案。”-- 这是正确的吗？
不是 - Highcharts 导出功能需要外部服务器。我的评论是关于在一个 pdf/jpeg/png 文件中呈现多个图表，抱歉不清楚。

标签： highcharts

【解决方案1】：

好吧，我不想成为一个向您打破这一点的人，但需要澄清一下，默认导出选项并不是真正的纯客户端。他们利用highcharts' own exporting server，可以使用exporting.url 配置选项覆盖导出服务器的url

url:                            String
The URL for the server module converting the SVG string to an image format. 
By default this points to Highslide Software's free web service. Defaults to http://export.highcharts.com.

您可能想阅读他们的 disclaimer & privacy statement 并阅读有关导出模块 here 的更多信息

你可以考虑setting up your own exporting server，重写导出功能，将页面上所有图表的SVG发送出去，在服务器端进行拼接，然后返回图片。

exporting: {
    buttons: {
        contextButton: {
            menuItems: [{
                text: 'Export All Charts',
                onclick: function() {
                    var allCharts=Highcharts.charts;
                    var svgArray=[];
                    for(var i=0;i<Highcharts.charts.length;i++){
                        svgArray[]=Highcharts.charts[i].getSVG();
                    }     
                    // ... Post svgArray to your exporting server                        
                }                    
            }]
        }
    }
}

话虽如此，现代浏览器确实支持保存 HTML5 画布元素的内容，请查看使用 canvg 库导出单个图表的 this jsFiddle。 附注这不是 highcharts 的默认行为

【讨论】：