将 Highcharts 图表导出到 Excel？答案

【问题标题】：Exporting Highcharts charts to Excel?将 Highcharts 图表导出到 Excel？
【发布时间】：2018-06-24 14:27:44
【问题描述】：

我在基于 Jsf 的网站上使用 highcharts。我正在导出我的页面以导出，但我无法导出图表。

我的excel代码是这样的

var tableToExcel = (function() {
    var uri = 'data:application/vnd.ms-excel;base64,'
      , template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>'
      , base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) }
      , format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) }
    return function(table, name) {
      if (!table.nodeType) table = document.getElementById(table)
      var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
      window.location.href = uri + base64(format(template, ctx))
    }
  })()

我的图表 html

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

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

我的图表 js

$(function () {
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Monthly Average Rainfall'
        },
        subtitle: {
            text: 'Source: WorldClimate.com'
        },
        xAxis: {
            categories: [
                'Jan',
                'Feb',
                'Mar'
            ]
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Rainfall (mm)'
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: 'Tokyo',
            data: [49.9, 71.5, 106.4]

        }, {
            name: 'New York',
            data: [83.6, 78.8, 98.5]

        }]
    });
});

如何将图表导出到 Excel 中？

【问题讨论】：

您的意思是像图表的屏幕截图一样，包含在 Excel 中？
是的，或者类似的，只是我想在excel上显示图表
这里至少有一些提示：stackoverflow.com/questions/7325363/…
为什么不能在 Highcharts 中使用默认导出功能？我的意思是，下载图像并稍后在您的导出中使用。请参阅exportChart 方法。
谢谢@PawełFus，网上有没有这种解决方案的例子？

标签： javascript excel charts highcharts

【解决方案1】：

<script src="http://code.highcharts.com/modules/offline-exporting.js"></script>
<script src="http://highcharts.github.io/export-csv/export-csv.js"></script>

当你点击excel按钮时在你的脚本中使用它

var chart=$("#container").highcharts();

chart.exportChartLocal({ type: 'application/vnd.ms-excel'});

【讨论】：