Ext Grid数据导出到excel

最新推荐文章于 2015-05-25 14:57:00 发布

原创最新推荐文章于 2015-05-25 14:57:00 发布 · 4.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ext #function #excel #include #工作 #null

js 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种使用JavaScript和Ext框架将表格数据导出到Excel的方法。通过创建Excel应用程序对象，实现工作簿和工作表的操作，并填充表格数据，包括表头、主体和合计行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目前，写了一个将Grid的数据，导出到EXCEL的简单应用，本文中的一些常量，来自我的前一篇：《JS中，操作EXCEL时，常用的常量定义》，本代码需要EXT2.1支持，以下是具体代码实现：

excel_app.js:

/**
*
* Microsoft Excel 应用，导出功能
* @author 张尧伟 zhangyw@icss.com.cn
*/
Ext.namespace("Ext.icss");
Ext.icss.ExcelApp = function() {
return {
excelApp : null,
EXCEL_APP : "Excel.Application",
/**
* 创建Excel应用程序对象
* @param visible{} true or false 表示主程序窗口对象是否可见
* @param displayAlerts{} true or false 如果不想在宏运行时被无穷无尽的提示和警告消息所困扰，
* 请将本属性设置为 False；这样每次出现需用户应答的消息时，Microsoft Excel 将选择默认应答。
* @return Application 对象
*/
createApp : function(visible, displayAlerts) {
if (!this.excelApp) {
this.excelApp = new ActiveXObject(this.EXCEL_APP);
}
if (this.excelApp) {
this.excelApp.Visible = visible;
this.excelApp.DisplayAlerts = displayAlerts;
}
return this.excelApp;
},
/**
* 关闭指定的应用程序对象
* @param exApp 需要关闭的EXCEL应用程序对象
*/
closeApp : function(exApp) {
if (exApp) {
exApp.Quit();
}
},
/**
* 在指定的应用程序对象中，创建一个新的工作簿
* @param exApp EXCEL应用程序对象
* @return Workbook 对象
*/
addWorkbook : function(exApp) {
if (!exApp) {
return;
}
var workbook = exApp.Workbooks.Add();
if (workbook) {
workbook.Activate();
}
return workbook;
},
/**
* 在指定的workbook对象中，查找索引为index的工作表对象
* @param workbook Workbook 对象
* @param index 工作表的索引
* @return Worksheet 对象
*/
findWorksheet : function(workbook, index) {
var worksheet = null;
if (index) {
worksheet = workbook.Worksheets(index);
} else {
worksheet = workbook.ActiveSheet;
}
return worksheet;
},
/**
* 设置指定的单元格值
* @param cell 单元格对象，取Worksheet.Cells属性
* @param row cell的行
* @param col cell的列
* @param value 值
*/
setCellValue:function(cell,row,col,value){
cell(row,col).Value = value;
},
/**
* 返回一个指定开始与结束表格的Range对象
* @param worksheet Worksheet对象
* @param startCell eg. cell(1,1)
* @param endCell eg. cell(10,1)
* @return Range对象
*/
getRange:function(worksheet,startCell,endCell){
return worksheet.Range(startCell, endCell);
},
printPreview : function() {
var visible = this.excelApp.Visible;
if (this.excelApp.ActiveSheet) {
if (false == visible) {
this.excelApp.Visible = true;
}
this.excelApp.ActiveSheet.PrintPreview();
this.excelApp.Visible = visible;
}
},
printOut : function() {
if (this.excelApp.ActiveSheet) {
this.excelApp.ActiveSheet.PrintOut();
}
},
close : function() {
this.closeApp(this.excelApp);
this.excelApp = null;
},
getWorksheet:function(index){
if(!this.excelApp){
this.createApp(true,false);
}
var workbook = null;
if(!this.excelApp.ActiveWorkbook){
workbook = this.addWorkbook(this.excelApp);
}
return this.findWorksheet(workbook,index);
}
};
}();
ExcelApp = Ext.icss.ExcelApp;
//excel.js:
1. /**
2. * @include "../js/Ext2.1/icss/excel/excel_const.js"
3. * @include "../js/Ext2.1/icss/excel/excel_app.js"
4. */
5. Ext.namespace("Ext.icss");
6. /**
7. * 数据工具类的基类
8. * @author 张尧伟 zhangyw@icss.com.cn
9. * @param {} config
10. */
11. Ext.icss.DataTool = function(config) {
12. config = config || {};
13. this.initialConfig = config;
14. Ext.icss.DataTool.superclass.constructor.call(this);
15. };
17. Ext.extend(Ext.icss.DataTool,Ext.util.Observable, {
19. });
21. /**
22. * 数据工具类，此类主要实现将表格数据导出到Microsoft Excel功能
23. * @param {} config
24. */
25. Ext.icss.Data2ExcelTool = function(config) {
26. config = config || {};
27. this.excelApp = Ext.icss.ExcelApp;
28. Ext.icss.Data2ExcelTool.superclass.constructor.call(this);
29. };
30. Ext.extend(Ext.icss.Data2ExcelTool,Ext.icss.DataTool,{
32. export2Excel:function(grid,filename){
33. this.excelApp.close();
34. var worksheet = this.excelApp.getWorksheet(1);
35. /*
36. var worksheet = {};
37. worksheet.Cells = {};
38. */
39. var cells = this.fillWorksheet(worksheet,grid,filename);
40. },
41. fillWorksheet : function(worksheet,grid,filename) {
42. var cells = worksheet.Cells;
44. var cm = grid.getColumnModel();
45. var ds = grid.getStore();
47. var cols = cm. getColumnCount();
48. var rows = ds.getCount();
50. this.buildHeader(grid,cells,1,1);
51. this.buildSumRow(grid,cells,2,1);
52. this.buildBody(grid,cells,3,1);
54. rows += 2;
56. worksheet.Range(cells(1, 1), cells(rows,cols)).Borders.LineStyle = Excel.XlBorderWeight.xlHairline;
57. worksheet.Range(cells(2, 1), cells(2,cols)).Font.Bold = Excel.XlBoolean.True;
58. worksheet.Range(cells(1, 1), cells(rows,cols)).Columns.AutoFit();
60. return cells;
61. },
62. /**
63. * 根据grid的cm，生成表格表头
64. * @param {} grid
65. * @param {} cells excel cell对象
66. * @param {} row 开始行
67. * @param {} col 开始列
68. */
70. buildHeader:function(grid,cells,row,col){
71. var cm = grid.getColumnModel();
72. var cfg = null;
73. for(var i=0; i<cm.config.length; ++i){
74. cfg = cm.config[i];
75. if(cfg.id == 'checker')
76. {
77. this.excelApp.setCellValue(cells,row,col+i,'');
78. }else{
79. this.excelApp.setCellValue(cells,row,col+i,cfg.header);
80. }
81. }
82. },
83. /**
84. * 根据GRID的store,导出数据
85. * @param {} grid
86. * @param {} cells
87. * @param {} row
88. * @param {} col
89. */
90. buildBody : function(grid, cells, row, col) {
91. var cm = grid.getColumnModel();
92. var ds = grid.getStore();
94. var cfg = null;
95. ds.each(function(rec) {
97. for (var i = 0; i < cm.config.length; ++i) {
98. cfg = cm.config[i];
99. if (cfg.id == 'checker') {
100. this.excelApp.setCellValue(cells, row, col + i, '');
101. } else {
102. var val = rec.get(cfg.dataIndex);
103. if(cfg.renderer){
104. val = cfg.renderer(val);
105. }
106. if(val){
107. this.excelApp.setCellValue(cells, row, col + i, val );
108. }
110. }
111. }
112. row++;
113. },this);
114. },
116. /**
117. * 增加合计行
118. * @param {} grid
119. * @param {} cells
120. * @param {} row
121. * @param {} col
122. */
123. buildSumRow:function(grid,cells,row,col){
124. var cm = grid.getColumnModel();
125. var cfg = null;
126. for (var i = 0; i < cm.config.length; ++i) {
127. cfg = cm.config[i];
128. if(cfg.sumcaption){
129. this.excelApp.setCellValue(cells,row,col+i,cfg.sumcaption);
130. }
132. if(cfg.sumvalue){
133. this.excelApp.setCellValue(cells,row,col+i,cfg.sumvalue);
134. }
135. }
136. }
138. });
调用示例：
2. /**
3. * 将表格的数据导出到Excel文件
4. * @param {} btn
5. * @param {} event
6. */
7. function export2Excel(btn,event)
8. {
9. var filename = '预计划';
10. var data2Excel = new Ext.icss.Data2ExcelTool();
11. data2Excel.export2Excel(getGrid(),filename);
12. //var ExcelApp.export2Excel(getGrid(),filename);
13. }