Ext Grid表格导出excel

两种方法，这是一种，主要是通过把前台数据传到后台，通过后台POI API来导出，通用方式！

 

利用Ext grid显示前台数据，然后把前台数据进行Excel表导出，再导出报表的时候要求：

1、要把grid数据显示的表头信息导入Excel表

2、在导出Excle表的时候，可以进行选择，是进行勾选的导出，还是批量导出（勾选导出，根据勾选的记录导出，批量导出，全部导出），

3、在进行批量导出的时候，是分页显示还是显示成一页（sheet标签，在Excel表中用）

 

首先,准备数据，创建grid并把数据填充进去，这里我就不再多说，不是本文的重点：

但需要说明的是，在进行store准备数据的时候，我们要保证命名的规范性，为接下来的利用java反射取得数据打下基础，

 

接下来根据要求，我们设计一个按钮，当点击按钮的时候，弹出一个窗口，为我们提供选择

还有就是要得到grid数据的表头信息

 

关键代码：strBuffer为我们自己重写的StringBuffer类

 for(var j=2; j<columns.getColumnCount(); j++){     
              strBuffer1.append(columns.getColumnHeader(j));   /*得到所有列头信息并放入StringBuffer中*/
              strBuffer1.append(",");       /*添加分隔符*/
  }

那为什么我们要在每一个字段之后加上一个“，”号呢？这里我们把数据传递到后台做准备的，这样我们就只需要把一个字符串传递到后台中，然后再在后台中利用java的split方法把数据再提取出来

得到勾选的数据的编号，即数据在数据库的id号，我们也是利用字符串向后台进行传递：

for(var k=2; k<columns.getColumnCount(); k++){     
                                  strBuffer2.append(columns.getDataIndex(k));   /*得到所有列头信息并放入StringBuffer中*/
                                  strBuffer2.append(",");       /*添加分隔符*/
 }

已经把前台的各项数据都已经得到，那么就需要向后台来传递啦！！

这里我们是做出了一个Ext的一个简单的弹出窗口来实现的，

这里我们是利用Ext.form的submit()方式进行的提交，在这里一定要注意是submit()方式，而不能是Ajax，这与我们后面的弹出导出Excel的窗口是紧密相连的，关键代码：

  var f = new Ext.FormPanel({
              frame:true,
              layout:"form",
              buttonAlign:'center',
              onSubmit: Ext.emptyFn,
              submit: function() {
                      this.getEl().dom.action= url; 
                      this.getEl().dom.method = 'post',
                      this.getEl().dom.submit(),
                      win.close()
              },

           …………

   var btnSubmit = new Ext.Button({
               text: "提交",
               handler: function(){ 
                        f.getForm().submit(); 
               } 
    });   

以这种方式提交，并不是真正的Ajax，而是类似于普通Html的表单提交方式，

看后台代码如何来解析从前台获得的数据：

        String empStr = request.getParameter("headers");   //拆分字符串得到表头信息
        if(!"".equals(empStr) && null!= empStr){
            String str1 = empStr.substring(0, empStr.length()-1);
            headers = str1.split(",");
        }

这样就把前台的数据传递到后台，然后就是进行流的输入输出，生成Excel:关键代码如下

WritableWorkbook wwb = Workbook.createWorkbook(os);

for (int j = 0; j < title.length; j++) {// 开始写入第一行(即标题栏)
            Label label = null;       // 用于写入文本内容到工作表中去
            label = new Label(j, 0, title[j]);  // 在Label对象的构造中指明单元格位置(参数依次代表列数、行数、内容 )
            sheet.setColumnView(j, 30);   // 将定义好的单元格添加到工作表中
            sheet.addCell(label);
        }
        
        for (int row = 0; row < empList.size(); row++) {  // 开始写入内容
            List list = (List) empList.get(row);   // 获取一条(一行)记录
            for (int col = 0; col < list.size(); col++) {  // 数据是文本时(用label写入到工作表中)
                String listvalue = (String) list.get(col).toString();
                Label label = null;
                label = new Label(col, row + 1, listvalue);
                sheet.addCell(label);
            }
        }

然后就是弹出窗口，提示用户进行“打开”或者是“保存”啦！！

        OutputStream out = null;
        InputStream in = null;
        // 获得文件名
        String filename = URLEncoder.encode(file.getName(), "UTF-8");
        // 定义输出类型(下载)
        response.setContentType("application/force-download");
        response.setHeader("Location", filename);

        // 定义输出文件头
        response.setHeader("Content-Disposition", "attachment;filename="
                + filename);
        out = response.getOutputStream();
        in = new FileInputStream(file.getPath());

        byte[] buffer = new byte[1024];
        int i = -1;
        while ((i = in.read(buffer)) != -1) {
            out.write(buffer, 0, i);
        }

        in.close();
        out.flush();
        out.close();
        
        if (isDel) {
            // 删除文件,删除前关闭所有的Stream.
            file.delete();
        }

 

搞定。。。

 

这是第二种，使用EXT控件，直接实现导出grid，方式最为简单，另辟捷径，但需要客户端开activex ！

 

老外的方法：
GridPanel to real Excel file(Only By IE5+,Windows,Office) 


What ? 
There is only one static function in the object Ext.ux.Grid2Excel , 
You can use it anywhere to convert the data from a gridpanel to a local real excel file. 

Where ? 
It use a object(ActiveXObject("Excel.application") to create a real excel file,so it works at only windows platform with the office software installed.And then modifying the settings of the IE security to activate the activex may be necessary too. 

How ? 
Like this: 
Ext.ux.Grid2Excel.Save2Excel(grid); 

Core Code List and Demo 

grid2excel.js: 

 1/**  
 2 * @author qinjinwei  
 3 *   
 4 * time: 2008-7-24 20:28:02  
 5 */  
 6var  idTmr  =  "";    
 7Ext.ux.Grid2Excel = {   
 8    
 9 Save2Excel : function(grid)   
10 {   
11  var cm = grid.getColumnModel();   
12  var store = grid.getStore();   
13     
14  var it = store.data.items;   
15  var rows = it.length;   
16     
17  var   oXL   =   new   ActiveXObject("Excel.application");        
18  var   oWB   =   oXL.Workbooks.Add();        
19  var   oSheet   =   oWB.ActiveSheet;    
20     
21  for (var i = 0; i < cm.getColumnCount(); i++) {   
22      
23   if (!cm.isHidden(i)) {   
24    oSheet.Cells(1, i + 1).value = cm.getColumnHeader(i);   
25   }   
26      
27   for (var j = 0; j < rows; j++) {   
28    r = it[j].data;   
29    var v = r[cm.getDataIndex(i)];   
30    var fld = store.recordType.prototype.fields.get(cm.getDataIndex(i));   
31    if(fld.type == 'date')   
32    {   
33     v = v.format('Y-m-d');       
34    }   
35       
36    oSheet.Cells(2 + j, i + 1).value = v;   
37   }   
38  }   
39        oXL.DisplayAlerts = false;   
40  oXL.Save();   
41  oXL.DisplayAlerts = true;                       
42  oXL.Quit();   
43  oXL = null;   
44    idTmr = window.setInterval("Cleanup();",1);   
45  }   
46};   
47function Cleanup() {   
48    window.clearInterval(idTmr);   
49    CollectGarbage();   
50};  
51

Demo : 

  1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">   
  2<html>   
  3    <head>   
  4        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   
  5        <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">   
  6        <link rel="stylesheet" type="text/css" href="./ext/resources/css/ext-all.css">   
  7        <script type="text/javascript" src="./ext/adapter/ext/ext-base.js">   
  8        </script>   
  9        <script type="text/javascript" src="./ext/ext-all-debug.js">   
 10        </script>   
 11        <script type="text/javascript" src="grid2excel.js">   
 12        </script>   
 13    </head>   
 14    <body>   
 15        <script type="text/javascript">   
 16            Ext.onReady(function(){   
 17               
 18                var myData = [['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'], ['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'], ['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'], ['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am']];   
 19                   
 20                var store = new Ext.data.SimpleStore({   
 21                    fields: [{   
 22                        name: 'company'  
 23                    }, {   
 24                        name: 'price',   
 25                        type: 'float'  
 26                    }, {   
 27                        name: 'change',   
 28                        type: 'float'  
 29                    }, {   
 30                        name: 'pctChange',   
 31                        type: 'float'  
 32                    }, {   
 33                        name: 'lastChange',   
 34                        type: 'date',   
 35                        dateFormat: 'n/j h:ia'  
 36                    }]   
 37                });   
 38                store.loadData(myData);   
 39                   
 40                // create the Grid   
 41                var grid = new Ext.grid.GridPanel({   
 42                    id: 'static-grid',   
 43                    store: store,   
 44                    renderTo: 'grid-example',   
 45                    columns: [{   
 46                        id: 'company',   
 47                        header: "Company",   
 48                        width: 160,   
 49                        sortable: true,   
 50                        dataIndex: 'company'  
 51                    }, {   
 52                        header: "Price",   
 53                        width: 75,   
 54                        sortable: true,   
 55                        //renderer: 'usMoney',   
 56                        dataIndex: 'price'  
 57                    }, {   
 58                        header: "Change",   
 59                        width: 75,   
 60                        sortable: true,   
 61                        dataIndex: 'change'  
 62                    }, {   
 63                        header: "% Change",   
 64                        width: 75,   
 65                        sortable: true,   
 66                        dataIndex: 'pctChange'  
 67                    }, {   
 68                        header: "Last Updated",   
 69                        width: 85,   
 70                        sortable: true,   
 71                        renderer: Ext.util.Format.dateRenderer('m/d/Y'),   
 72                        dataIndex: 'lastChange'  
 73                    }],   
 74                    //stripeRows: true,   
 75                    //autoExpandColumn: 'company',   
 76                    height: 350,   
 77                    width: 600,   
 78                    title: 'Array Grid',   
 79                    bbar: new Ext.Toolbar({   
 80                        buttons: [{   
 81                            text: 'µ¼³öExcel',   
 82                            tooltip: 'µ¼³öExcel',   
 83                            handler: onItemClick // °´Å¥Ê¼þ    
 84                        }]   
 85                    })   
 86                });   
 87                   
 88                function onItemClick(item){   
 89                   
 90                    Ext.ux.Grid2Excel.Save2Excel(grid);   
 91                }   
 92                   
 93                //grid.render('grid-example');   
 94                //grid.getSelectionModel().selectFirstRow();   
 95            });   
 96        </script>   
 97        <div id="grid-example">   
 98        </div>   
 99    </body>   
100</html>  
101