EXCEL导出功能实现参考
2014-11-03 15:33
465 查看
两种方法,这是一种,主要是通过把前台数据传到后台,通过后台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
*/
6
var idTmr = "";
7
Ext.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
};
47
function 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
利用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
*/
6
var idTmr = "";
7
Ext.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
};
47
function 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
相关文章推荐
- 假导出Excel功能实现,按CSV格式快速导出功能代码参考(追求代码追求简洁复用)浙江杭州
- 假导出Excel功能实现,按CSV格式快速导出功能代码参考(追求代码追求简洁复用)浙江杭州
- 假导出Excel功能实现,按CSV格式快速导出功能代码参考(追求代码追求简洁复用)浙江杭州
- 关于“假导出Excel功能实现,按CSV格式快速导出功能代码参考”的一篇回复
- 真导出Excel功能实现(使用Gembox.Spreadsheet v2.9 组件)
- 一种简单方法实现页面导出(Excel)功能
- 水晶报表导出为pdf, word , excel 格式(已经测试过,实现了该功能)
- ASP.NET实现增删改查等功能(Access版)系统之六-导出数据到EXCEL
- 水晶报表导出为pdf, word , excel 格式(已经测试过,实现了该功能)
- NPOI导出Excel表功能实现(多个工作簿)
- 利用SQL*PLUS导出成EXCEL和html的功能实现报表统计:
- JSF中实现导出Excel的功能(转)
- (转)NPOI导出Excel表功能实现(多个工作簿)
- 实现ListView数据导出成Excel的功能
- C# 操作EXCEL 类 可以实现导入导出功能 折腾了好长时间 现在两种方法显示出来
- 实现一个配置简单功能强大的excel工具类搞定excel导入导出(二)
- CarlosAg.ExcelXmlWriter实现.net下Excel导出功能(服务端不需要安装Excel程序)
- 一种简单方法实现页面导出(Excel)功能 选择自 xieyun1977 的 Blog
- NPOI导出Excel表功能实现(多个工作簿)
- 实现了选择、跳页、排序、导出EXCEL等功能的自定义DataGrid(原码)