extjs导出Excel文档

最新推荐文章于 2016-03-23 10:21:00 发布

冷静BB

最新推荐文章于 2016-03-23 10:21:00 发布

阅读量3.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： js系列——extjs 文章标签： excel 文档 ext

本文链接：https://blog.youkuaiyun.com/love_java_cc/article/details/50457001

js系列——extjs 专栏收录该内容

11 篇文章

订阅专栏

本文介绍使用ExtJS实现从Web应用导出数据至Excel的方法。重点讲解如何配置ExtJS表格组件以支持导出功能，并提供后端Java代码示例以完成实际的数据导出过程。

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

1.extjs前台代码(export4excel.js)

Ext
		.onReady(function() {
			Ext.QuickTips.init();// 浮动信息提示
			
			// 表格日期显示转换成日期格式
			function Todate(v) {
				if (v == null) {
					return null;
				}
				var d = new Date();
				var str = v.toString();
				var str1 = str.replace("/Date(", "");
				var str2 = str1.replace(")/", "");
				var dd = parseInt(str2);
				d.setTime(dd);
				return d;
			};

			// 定义数据源为远程代理和JSON数据格式
			var ds = new Ext.data.Store({
				autoLoad : false,
				proxy : new Ext.data.HttpProxy({
					url : 'userAction_findAllUsers'
				}),
				// jsonreader的字段名称要与glut.bean中的类属性名一致，不要去匹配数据库字段
				reader : new Ext.data.JsonReader({
					totalProperty : 'totalProperty',
					root : 'root'
				}, [ {
					name : 'id'
				}, {
					name : 'name'
				}, {
					name : 'sex'
				}, {
					name : 'birthday',
					type : "date",
					dateFormat : "Y-m-d",
					convert : Todate
				}])
			});
			// 加载数据
//			ds.load();

			// 定义复选框
			var sm = new Ext.grid.CheckboxSelectionModel();

			// 定义列模型
			var cm = new Ext.grid.ColumnModel(
					[
							new Ext.grid.RowNumberer(),// 添加自动行号
							sm,// 添加复选框
							{
								header : '序号',
								width : 40,
								sortable : true,
								dataIndex : 'id'
							},

							{
								header : '姓名',
								width : 40,
								sortable : true,
								dataIndex : 'name'
							},
							{
								header : '性别',
								width : 40,
								sortable : true,
								dataIndex : 'sex'
							},
							{
								header : '出生日期',
								width : 40,
								sortable : true,
								dataIndex : 'birthday',
								type : 'date',
								renderer : Ext.util.Format
										.dateRenderer('Y-m-d')
							}
							 ]);

			// 定义一个表格面板
			var grid = new Ext.grid.EditorGridPanel(
					{
						id : 'user-grid',// 设置标识ID，方便以后引用！
						title : 'export_word',// 标题
						renderTo : Ext.getBody(),// 显示表格的地方
						sm : sm,// 复选框
						cm : cm,// 列模型
						ds : ds,// 数据源
						stripeRows : true,// 加上行条纹
						loadMask : true,// 加载数据时遮蔽表格
						border : true,// 加上边框
						frame : true,// 显示天蓝色圆角框
						autoHeight : true,// 自动设置高度，这个配置很重要
						width : '100%',
						x : 1,// 设置初始位置横坐标
						y : 1,// 设置初始位置纵坐标
						// floating : true,// 设置浮动，能否拖动成功就靠它了,注意设置浮动后它就置顶了
						// 实现拖曳效果，参考官方文档
						draggable : {
							insertProxy : false,
							onDrag : function(e) {
								var pel = this.proxy.getEl();
								this.x = pel.getLeft(true);
								this.y = pel.getTop(true);
								var s = this.panel.getEl().shadow;// 拖曳中消除原位置的阴影
								if (s) {
									s.realign(this.x, this.y, pel.getWidth(),
											pel.getHeight());
								}
							},
							endDrag : function(e) {// 拖曳结束后保存位置效果
								this.panel.setPosition(this.x, this.y);
							}
						},
						// UI视图配置
						viewConfig : {
							forceFit : true
						// 强制适应分布宽度
						},
						// 表格顶部动作或按钮工具栏
						tbar : new Ext.Toolbar({
							items : [
									'-',
									{
										text : '导出excel(已勾选的字段)',
										iconCls : 'icon-excel',
										handler : function() {
											// 获得选中的列
											var selectedColDataIndex = "";
											var selectedColHeader = "";
											for (var i = 2; i < cm.getColumnCount(); i++) {
												if (!cm.isHidden(i)) {
													selectedColDataIndex += cm.getDataIndex(i)
															+ ",";
													selectedColHeader += cm.getColumnHeader(i)
															+ ",";
												}
											}
											Ext.Ajax.request({
												url : 'userAction_exportExcelData',
												method : 'POST',
												params : {
													dataIndex : selectedColDataIndex,
													header : selectedColHeader
												},
												success : function(response, options) {
													window.open(response.responseText);
												},
												failure : function(response, options) {
													Ext.MessageBox
															.alert('失败', '请求超时或网络故障,错误编号：'
																	+ response.status);
												}
											});
										}
									},
									'-',
									{
										text : '导出excel(所有字段)',
										iconCls : 'icon-excel',
										handler : function() {

											Ext.Ajax.request({
												url : 'userAction_exportExcelData',
												method : 'POST',
												success : function(response, options) {
													window.open(response.responseText);
												},
												failure : function(response, options) {
													Ext.MessageBox
															.alert('失败', '请求超时或网络故障,错误编号：'
																	+ response.status);
												}
											});
										}
									}, '-', new Ext.PagingToolbar({
										pageSize : 10,
										store : ds,
										style : 'padding: 0 0 0 535 ',
										displayInfo : true,
										displayMsg : '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
										emptyMsg : "没有记录"
									}) ]
						}),
						// 表格底部分页工具栏（分页功能需要传start,limit参数到后台进行处理传回来才能实现）
						bbar : new Ext.PagingToolbar({
							pageSize : 10,
							store : ds,
							displayInfo : true,
							displayMsg : '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
							emptyMsg : "没有记录"
						})
					});

		})

2.userAction_exportExcelData()方法代码

// 导出Excel文档
	public String exportExcelData() throws Exception {
		// 通过客户端选择的字段来查询会员信息
		List excelData = null;
		if (header != null && header.split(",").length == 1) {
			excelData = (ArrayList<Object>) userService
					.loadExcelFromDB(dataIndex);
		} else {
			excelData = (ArrayList<Object[]>) userService
					.loadExcelFromDB(dataIndex);
		}

		String folderName = "createdExcel";
		String subPath = "/sys_user/" + folderName;

		String tempExcelPath = ServletActionContext.getServletContext()
				.getRealPath(subPath);

		String tempExcelName = "tempExcel.xls";

		try {
			createExcel(excelData, tempExcelPath, tempExcelName);

			sendMsg2Client("sys_user/" + folderName + "/" + tempExcelName);
		} catch (Exception e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
			// 创建excel失败要告诉客户端
			sendMsg2Client(Constants.JSON_FAILURE);
		}

		return null;
	}

3.userAction_createExcel()方法代码

private void createExcel(List excelData, String tempExcelPath,
			String tempExcelName) throws IOException, RowsExceededException,
			WriteException {

		File excelFile = new File(tempExcelPath, tempExcelName);

		if (!excelFile.getParentFile().exists()) {
			excelFile.getParentFile().mkdirs();
		}

		WritableWorkbook wwb = Workbook.createWorkbook(excelFile);
		WritableSheet ws = wwb.createSheet("Sheet1", 0);

		if (header != null) {
			String[] headers = header.split(",");
			for (int col = 0; col < headers.length; col++) {
				ws.addCell(new Label(col, 0, headers[col]));
			}
			// 用于防止只选择了一列的情况.因为如果只选择一列,返回的list会是Object类型,而不是Object[]
			if (headers.length == 1) {
				for (int row = 0; row < excelData.size(); row++) {
					Object rowData = excelData.get(row);
					String cellData = "";
					if (rowData instanceof Date) {
						cellData = new SimpleDateFormat("yyyy-MM-dd")
								.format(rowData);
					} else {
						cellData = "" + rowData;
					}
					ws.addCell(new Label(0, row + 1, cellData));
				}
				wwb.write();

				wwb.close();

				return;
			}

		} else {
			for (int col = 0; col < ((Object[]) excelData.get(0)).length; col++) {
				ws.addCell(new Label(col, 0, Constants.EXCEL_MB_COL_NAME[col]));
			}
		}

		for (int row = 0; row < excelData.size(); row++) {
			Object[] rowData = (Object[]) excelData.get(row);
			for (int col = 0; col < rowData.length; col++) {
				String cellData = "";
				if (rowData[col] instanceof Date) {
					cellData = new SimpleDateFormat("yyyy-MM-dd")
							.format(rowData[col]);
				} else {
					cellData = "" + rowData[col];
				}
				ws.addCell(new Label(col, row + 1, cellData));
			}
		}

		wwb.write();

		wwb.close();

	}

5.userService_loadExcelFromDB()方法代码

@Override
	public List loadExcelFromDB(String fields) {
		if (fields == null) {
			return userDAO.findByArgs("*", "member", null, null, null, null,
					true);
		} else {
			return userDAO.findByArgs(
					fields.substring(0, fields.length() - 1), "Member", null,
					null, null, null, false);
		}
	}

附上源码：

http://download.youkuaiyun.com/detail/love_java_cc/9389390