Ext的Grid导出为Excel 方法

最新推荐文章于 2015-11-12 11:45:00 发布

Ares

最新推荐文章于 2015-11-12 11:45:00 发布

阅读量853

点赞数

分类专栏： extjs学习文章标签： Excel EXT CSS JavaScript Office ViewUI

本文链接：https://blog.csdn.net/zanchaow/article/details/83441914

版权

extjs学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

转载的一个extjs的grid数据生成excel的好方法，这里面没有选择框，是将grid所有的数据转为excel。可以选择要输出的列，若你想自己选择某些行输出，只要做稍微的改动就可以了。这里面使用了js来调用ActiveX控件来生成Excel。

老外的方法：
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:

/**//**  
 * @author qinjinwei  
 *   
 * time: 2008-7-24 20:28:02  
 */  
var  idTmr  =  "";    
Ext.ux.Grid2Excel = {   
    
Save2Excel : function(grid)   
 {  
  var cm = grid.getColumnModel();  //返回Grid的列模型（ColumnModel）。
  var store = grid.getStore();   
  
  var it = store.data.items;   //数据数组
  var rows = it.length;   //数组的长度
  //初始化excel相关的  ActiveX
  var   oXL   =   new   ActiveXObject("Excel.application");        
  var   oWB   =   oXL.Workbooks.Add();        
  var   oSheet   =   oWB.ActiveSheet;    
  for (var i = 0; i < cm.getColumnCount(); i++) {   
      
   if (!cm.isHidden(i)) { //首先在第一行设置列的名字（那些没有被隐藏的显示）  
    oSheet.Cells(1, i + 1).value = cm.getColumnHeader(i);   
   }   
      
   for (var j = 0; j < rows; j++) {   //写入excel数据，for循环写入
    r = it[j].data;   
    var v = r[cm.getDataIndex(i)];   
    var fld = store.recordType.prototype.fields.get(cm.getDataIndex(i));  //得到对应的数据 
    
    if(fld.type == 'date')   //如果是日期类型的话，那么明确格式
    {   
         v = v.format('Y-m-d');       
       }   
      
    oSheet.Cells(2 + j, i + 1).value = v;   //写入
   }   
  }   
        oXL.DisplayAlerts = false;   
  oXL.Save();   
  oXL.DisplayAlerts = true;                       
  oXL.Quit();   
  oXL = null;   
    idTmr = window.setInterval("Cleanup();",1);   
  }   
};   
function Cleanup() {   
    window.clearInterval(idTmr);   
    CollectGarbage();   
};

Demo : 一个小的实例。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">   
<html>   
    <head>   
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   
        <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css">   
        <link rel="stylesheet" type="text/css" href="./ext/resources/css/ext-all.css">   
        <script type="text/javascript" src="./ext/adapter/ext/ext-base.js">   
        </script>   
        <script type="text/javascript" src="./ext/ext-all-debug.js">   
        </script>   
        <script type="text/javascript" src="grid2excel.js">   
        </script>   
    </head>   
    <body>   
        <script type="text/javascript">   
            Ext.onReady(function(){   
               
                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']];   
                   
                var store = new Ext.data.SimpleStore({   
                    fields: [{   
                        name: 'company'  
                    }, {   
                        name: 'price',   
                        type: 'float'  
                    }, {   
                        name: 'change',   
                        type: 'float'  
                    }, {   
                        name: 'pctChange',   
                        type: 'float'  
                    }, {   
                        name: 'lastChange',   
                        type: 'date',   
                        dateFormat: 'n/j h:ia'  
                    }]   
                });   
                store.loadData(myData);   
                   
                // create the Grid   
                var grid = new Ext.grid.GridPanel({   
                    id: 'static-grid',   
                    store: store,   
                    renderTo: 'grid-example',   
                    columns: [{   
                        id: 'company',   
                        header: "Company",   
                        width: 160,   
                        sortable: true,   
                        dataIndex: 'company'  
                    }, {   
                        header: "Price",   
                        width: 75,   
                        sortable: true,   
                        //renderer: 'usMoney',   
                        dataIndex: 'price'  
                    }, {   
                        header: "Change",   
                        width: 75,   
                        sortable: true,   
                        dataIndex: 'change'  
                    }, {   
                        header: "% Change",   
                        width: 75,   
                        sortable: true,   
                        dataIndex: 'pctChange'  
                    }, {   
                        header: "Last Updated",   
                        width: 85,   
                        sortable: true,   
                        renderer: Ext.util.Format.dateRenderer('m/d/Y'),   
                        dataIndex: 'lastChange'  
                    }],   
                    //stripeRows: true,   
                    //autoExpandColumn: 'company',   
                    height: 350,   
                    width: 600,   
                    title: 'Array Grid',   
                    bbar: new Ext.Toolbar({   
                        buttons: [{   
                            text: 'µ¼³öExcel',   
                            tooltip: 'µ¼³öExcel',   
                            handler: onItemClick  
                        }]   
                    })   
                });   
                   
                function onItemClick(item){   
                   
                    Ext.ux.Grid2Excel.Save2Excel(grid);   
                }   
                   
                //grid.render('grid-example');   
                //grid.getSelectionModel().selectFirstRow();   
            });   
        </script>   
        <div id="grid-example">   
        </div>   
    </body>   
</html>

这个我试过了，可用，是个简单易行的好方法。

来源：http://www.cnblogs.com/crazybird/archive/2008/08/13/1267304.html