1

So i have chart like this http://jsfiddle.net/9uDmV/

I wrote function to get export link to xls

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

But i don't want to use GET as export because it's redirect me to page getXLS. I want to make it like other functions (for example export to png, i click on it and download window appears)

I think I should use AJAX for this but don't know how exacly use it....

for saveing data to xls I will use http://phpexcel.codeplex.com/ but first I need to POST that data without reloading the page to getXLS.

count on you, guys!

and sorry for bad english ;-)

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';
?>
4

2 回答 2

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中的标头

于 2012-08-08T11:09:22.937 回答
0

好的，如何做到这一点：

首先，制作函数

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 的帮助和耐心！

于 2012-08-09T09:52:39.610 回答