highcharts教程：調用Excel.Application實現圖表數據導出至EXCEL

時間 2019-11-11

標籤 highcharts 教程調用 excel.application excel application 實現圖表數據導出欄目 Microsoft Office 简体版

原文原文鏈接

highcharts教程之highcharts線性圖結合瀏覽器調用Excel.Application完美實現圖表數據導出至Excel。javascript

highcharts圖表數據的保存咱們知道的有不少種，最多見的是如下3種：html

一、導出成爲圖片文件：jpg、png等；java

二、導出成爲pdf文件；jquery

三、將其數據保存成文文本信息；web

今天咱們將重點介紹另一種比較簡單和直接的圖表數據導出方法，那就是結合瀏覽器調用其內部固有的Excel的ActiveX插件，實現highcharts圖表數據導出至Excel。ajax

我其實也只是結合了以上二者實現了將其highcharts圖表數據導出至Excel的，具體示例請見下列完整代碼：
api

<!DOCTYPE HTML5>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>將Highcharts線性圖表數據導出至Excel內</title>
    <script type="text/javascript" language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript">
        var chart = null;
        $(function () {
            $('#divChart').highcharts({
                chart: {
                    plotBorderWidth: 1
                },
                title: {
                    text:"highcharts 導出至 Excel示例"
                },
                xAxis: {
                    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                },
                credits: {
                    enabled: false   //右下角不顯示LOGO
                },
                series: [{
                    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
                }, {
                    data: [23, 45.5, 78.4, 89.2, 100.0, 135.0, 76.6, 32.5, 22.4, 67.1, 60.6, 123]
                }]
            });
        });

        ///將highcharts線性圖表數據導出至Excel內
        function ExportToExcel() {
            //獲取chart對象
            chart = $('#divChart').highcharts();
            //獲取chart的橫座標x軸上的刻度集合
            var categoriesObj = chart.xAxis[0].categories;
            //獲取chart的series對象集合
            var seriesObj = chart.series;
            //建立AX對象excel
            var oXL = new ActiveXObject("Excel.Application");
            //獲取workbook對象 
            var oWB = oXL.Workbooks.Add();
            //激活當前sheet
            var oSheet = oWB.ActiveSheet; 
            //設置工做薄名稱
            oSheet.name = chart.options.title.text;
            //設置表頭
            //設置series一欄
            oSheet.Cells(1, 1).value = "Series名稱";
            //設置x橫座標標籤做爲表頭
            for (var i = 0; i < categoriesObj.length; i++) {
                oSheet.Cells(1, i + 2).value = categoriesObj[i];
            }
            //設置內容部分
            for (var i = 0; i < seriesObj.length; i++) {
                //動態設置第一列的series名稱
                oSheet.Cells(i + 2, 1).value = seriesObj[i].name;
                //動態獲取每一sereis 每個點y軸上的數據值                
                for (var j = 0; j < categoriesObj.length; j++) {
                    oSheet.Cells(i + 2, j + 2).value = seriesObj[i].yData[j];
                }
            }
            oXL.Visible = true; //設置excel可見屬性
        }        
		</script>
</head>
<body>
    <script type="text/javascript" language="javascript" src="http://code.highcharts.com/highcharts.js"></script>
    <script type="text/javascript" language="javascript" src="http://code.highcharts.com/modules/exporting.js"></script>
    <div id="divChart" style="width: 500px; height: 400px; margin: 0 auto">
    </div>
    <div style="margin-top: 15px; text-align: center; width: 100%;">
        <input type="button" id="btnReport" value="導出Excel" onclick="ExportToExcel()" />
    </div>
</body>
</html>

效果圖以下所示：瀏覽器