Highcharts再次出口

时间:2012-08-08 10:20:39

标签: php excel export highcharts xls

所以我有这样的图表http://jsfiddle.net/9uDmV/

我编写了函数来获取xls的导出链接

 {
  text: 'Download as xls',
  onclick: function() {
  location.href="getXLS.php?param1=param&param2=para2";}
   }

但我不想将GET用作导出,因为它会将我重定向到页面getXLS。 我想让它像其他功能一样(例如导出到png,我点击它并出现下载窗口)

我想我应该使用AJAX,但不知道如何使用它......

将数据保存到xls我将使用http://phpexcel.codeplex.com/但首先我需要POST该数据而不将页面重新加载到getXLS。

依靠你们,伙计们!

抱歉英语不好; - )

index_ajax.html

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Highcharts Example</title>

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript">
$(function () {
    var chart;
    $(document).ready(function() {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'column',
                zoomType: 'xy'
            },
            title: {
                text: 'inbound datas'
            },
            subtitle: {
                text: 'last ten days'
            },
            xAxis: [{
                categories: ['2012-08-01', '2012-08-02', '2012-08-03', '2012-08-04', '2012-08-05', '2012-08-06', '2012-08-07', '2012-08-08', '2012-08-09', '2012-08-10', '2012-08-11', '2012-08-12']
            }],
            exporting: {
            buttons: {
                exportButton: {
                    menuItems: [{},
                    {},
                    {},
                    {}, /* leave standard buttons */
                    {
                        text: 'Download as xls',
                        onclick: function() {
                                    $.get("ajax.php", { param1: "param1", param2: "param2" } );
                                }
                    }]
                }
            }
        },
            yAxis: [{ 
                min: 0,
                max: 100,
                minorGridLineWidth: 0,
                gridLineWidth: 0,
                alternateGridColor: null,
                plotBands: [{ // High wind
                    from: 90,
                    to: 100,
                    color: 'rgba(68, 170, 213, 0.1)',
                    label: {
                        text: 'AR to get',
                        style: {
                            color: '#606060'
                        }
                    }
                }],
                title: {
                    text: 'AR'
                },
                stackLabels: {
                    enabled: true,
                    style: {
                        fontWeight: 'bold',
                        color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                    }
                }
            },{ 
                min: 0,
                max: 8000,
                gridLineWidth: 1,
                title: {
                    text: 'Inbound',
                    style: {
                        color: '#AA4643'
                    }
                },
                labels: {
                    formatter: function() {
                        return this.value;
                    },
                    style: {
                        color: '#AA4643'
                    }
                },
                opposite: true
            }],
            tooltip: {
                formatter: function() {
                    var unit = {
                        'AR': '% ',
                        '1': '1',
                        '2': '2',
                        '3': '3'
                    }[this.series.name];

                    return ''+
                        this.x +': '+ this.y +' '+ unit;
                }
            },
            legend: {
                align: 'right',
                x: -100,
                verticalAlign: 'top',
                y: 20,
                floating: true,
                backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
                borderColor: '#CCC',
                borderWidth: 1,
                shadow: false
            },
            plotOptions: {
                column: {
                    stacking: 'normal',
                    dataLabels: {
                        enabled: true,
                        color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
                    }
                }
            },
            series: [{
                yAxis: 1,
                name: '1',
                data: [2000, 1000, 3000, 2000, 1000]
            }, {
                yAxis: 1,
                name: '2',
                data: [4000, 7000, 4000, 6000, 5000]
            }, {
                name: '3',
                type: 'spline',
                color: '#F7801F',
                yAxis: 0,
                data: [90, 80, 70, 90, 85],    
            }]
        });
    });

});
        </script>
    </head>
    <body>
<script src="js/highcharts.js"></script>
<script src="js/modules/exporting.js"></script>

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

    </body>
</html>

ajax.php

<?php
   echo 'a prompt windows should apper';
?>

2 个答案:

答案 0 :(得分:1)

如果我弄错了,你想强制下载而不是重定向吗?如果是,请将这些标题添加到getXLS.php

的顶部
<?php
  // We'll be outputting an excel file
header('Content-Type: application/vnd.ms-excel;'); // This should work for IE & Opera
header("Content-type: application/x-msexcel");    // This should work for the rest       
// It will be called dataAsExcel.xls
  header('Content-Disposition: attachment; filename="dataAsExcel.xls"');
?>

这将指示您正在发送类型为excel的文件的浏览器,因此浏览器将使用save as对话框提示用户。

有关php @ http://php.net/manual/en/function.header.php

中标题的更多信息

答案 1 :(得分:0)

好的,怎么做:

Firtst,make function

function postajax(datas)
{
$.post('PHPExcel/export/ajax.php', datas, function(retData) {
  $("body").append("<iframe src='PHPExcel/export/ajax.php' style='display: none;' ></iframe>");
}); 
}

现在创建下载xls文件的按钮

buttons: {
            exportButton: {
                menuItems: [{},
                {},
                {},
                {}, /* leave standard buttons */
                {
                    text: 'Download as xls',
                    onclick: function() {
                        postajax('My vaariable') 
                    }
                }]
            }
        }

就是这样,现在从http://phpexcel.codeplex.com/下载库 而且你做完了!

非常感谢@Jugal Thakkar的帮助和耐心!

相关问题