Highcharts再次出口

所以我有這樣http://jsfiddle.net/9uDmV/Highcharts再次出口

圖我寫函數來獲得出口鏈接到XLS

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

但我不希望使用GET作爲出口，因爲它重定向我頁面getXLS。我想使它像其他功能（例如導出到PNG，我點擊它和下載窗口出現）

我想我應該使用AJAX的，但不知道如何exacly使用它....

用於將數據保存到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'; 
?>

來源

2012-08-08 breq

如果我得到了它正確的，要強制下載，而不是重定向？如果是這樣，這些頭添加到頂部的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-08 11:09:22

是和不，我從圖表發送變量，然後getXLS.php生成XLS文件並顯示另存爲對話框的窗口。 simplier：如果您在圖表中點擊「下載爲PNG」，它將提示窗口下載PNG文件。現在我想選擇保存XLS，並提示窗口應該apper – breq 2012-08-08 11:15:05

我想我失去了你，你有沒有把上面的頭文件包含到你的getXLS.php中？如果你想使用ajax，你可以在onclick事件處理函數$ .get（「getXLS.php」，{param1：「param1」，param2：「param2」}）中做到這一點。 – 2012-08-08 11:21:49

是的，你有沒有試過這段代碼？這就是它的作用 – 2012-08-08 11:32:48

OK，如何做到這一點：

Firtst，使功能

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-09 09:52:39 breq

Highcharts再次出口

回答

相關問題