ext的grid导出为excel 方法(转http://leoni236.blog.163.com/blog/static/4814624920109892520226/)

本文介绍了一种使用ExtJS将网格数据导出到真实Excel文件的方法,该方法适用于安装了Office的Windows平台,并通过IE浏览器激活ActiveX。演示代码展示了如何创建Excel文件并填充数据。
摘要由CSDN通过智能技术生成

ext的grid导出为excel 方法(转)

Extjs 2010-10-08 09:25:20 阅读82 评论0   字号: 订阅

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

Demo :

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值