ExtJS实现Excel导出

ExtJS是一种基于客户端开发的AJAX应用,是一个与后台技术无关的前台ajax框架。由于项目需求,我们需要实现Excel的导出功能,前台界面是用ExtJS实现。如何实现呢?


1. 使用POI组件实现excel导出功能

//获取问题列表
List<Suggestion> targetStockList = suggestionService.getSuggestionList(map);
 
		//创建一个新的Excel
		HSSFWorkbook workBook = new HSSFWorkbook();
		//创建sheet页
		HSSFSheet sheet = workBook.createSheet();
		//sheet页名称
		workBook.setSheetName(0, "targetStockList");
		//创建header页
		HSSFHeader header = sheet.getHeader();
		//设置标题居中
		header.setCenter("标题");
		
		//设置第一行为Header
		HSSFRow row = sheet.createRow(0);
		HSSFCell cell0 = row.createCell(Short.valueOf("0"));
		HSSFCell cell1 = row.createCell(Short.valueOf("1"));
		HSSFCell cell2 = row.createCell(Short.valueOf("2"));
 
		
		// 设置字符集
		cell0.setEncoding(HSSFCell.ENCODING_UTF_16);
		cell1.setEncoding(HSSFCell.ENCODING_UTF_16);
		cell2.setEncoding(HSSFCell.ENCODING_UTF_16);

		
		cell0.setCellValue("问题标题");
		cell1.setCellValue("问题描述");
		cell2.setCellValue("反馈时间");
	
		
		if(targetStockList != null && !targetStockList.isEmpty()) {
			for(int i = 0; i < targetStockList.size(); i++) {
				Suggestion targetStock = targetStockList.get(i);
				row = sheet.createRow(i + 1);
				cell0 = row.createCell(Short.valueOf("0"));
				cell1 = row.createCell(Short.valueOf("1"));
				cell2 = row.createCell(Short.valueOf("2"));

				
				// 设置字符集
				cell0.setEncoding(HSSFCell.ENCODING_UTF_16);
				cell1.setEncoding(HSSFCell.ENCODING_UTF_16);
				cell2.setEncoding(HSSFCell.ENCODING_UTF_16);

				
				cell0.setCellValue(targetStock.getType());
				cell1.setCellValue(targetStock.getContent());
				cell2.setCellValue(targetStock.getPublishTime());
	 
 
				
				sheet.setColumnWidth((short) 0, (short) 4000);
				sheet.setColumnWidth((short) 1, (short) 4000);
				sheet.setColumnWidth((short) 2, (short) 4000);
			}
		}
		
		//通过Response把数据以Excel格式保存
		response.reset();
		response.setContentType("application/msexcel;charset=UTF-8");
		try {
			response.addHeader("Content-Disposition", "attachment;filename=\""
					+ new String(("用户意见信息表" + ".xls").getBytes("GBK"),
							"ISO8859_1") + "\"");
			OutputStream out = response.getOutputStream();
			workBook.write(out);
			out.flush();
			out.close();
		} catch (Exception e) {
			e.printStackTrace();
		}
		return null;

2.ExtJS调用此函数,实现Excel的导出

我们知道在界面上通过一个按钮实现Excel的导出,ExtJS的按钮一般都是通过Ext.Ajax.request的异步请求实现数据提交的。但是在这里我们不能使用异步调用,我们需要在直接提示给用户是否保存或打开此文档。如何实现呢?

       其实很简单,我们如果了解了ExtJS就是Javascript开发的,我们就能够很容易实现此功能了。我们在按钮的触发事件中写入此段代码就能实现Excel的函数调用了。

	// 初始化 Excel导出 的按钮
	var exportExcel = Ext.get('exportExcel');
	exportExcel.on('click', exportButtonClick);
	
	function exportButtonClick (){
		 window.location.href = Ext.CONTEXT + '/admin/suggestion.do?method=exportTargetList';
};




  • 7
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 20
    评论
以下是一个使用ExtJS 4.2.1的完整例子,可以将Grid表格导出Excel文件: ``` Ext.require([ 'Ext.grid.*', 'Ext.data.*', 'Ext.util.*', 'Ext.toolbar.Paging', 'Ext.ux.exporter.Exporter' ]); Ext.onReady(function() { // 模拟数据 var data = []; for (var i = 0; i < 20; i++) { data.push({ name: 'User ' + i, email: 'user' + i + '@example.com', phone: '555-' + Ext.Number.randomInt(1000, 9999) }); } // 创建数据模型 Ext.define('User', { extend: 'Ext.data.Model', fields: ['name', 'email', 'phone'] }); // 创建数据源 var store = Ext.create('Ext.data.Store', { model: 'User', data: data, proxy: { type: 'memory', reader: { type: 'json', root: 'data' } } }); // 创建Grid表格 var grid = Ext.create('Ext.grid.Panel', { store: store, columns: [{ text: 'Name', dataIndex: 'name' }, { text: 'Email', dataIndex: 'email', flex: 1 }, { text: 'Phone', dataIndex: 'phone' }], width: 400, height: 200, dockedItems: [{ xtype: 'toolbar', dock: 'top', items: [{ xtype: 'button', text: 'Export to Excel', handler: function() { // 导出Excel Ext.ux.exporter.Exporter.exportGrid(grid, 'Excel', { title: 'User List' }); } }] }, { xtype: 'pagingtoolbar', store: store, dock: 'bottom', displayInfo: true }] }); // 渲染Grid表格 Ext.create('Ext.container.Viewport', { layout: 'fit', items: [grid] }); }); ``` 在上面的代码中,我们首先定义了一个模拟数据数组,然后创建了一个数据模型和一个数据源。接下来,我们创建了一个Grid表格,将数据源绑定到该表格中,并添加了一个工具栏和一个页工具栏。在工具栏中,我们添加了一个按钮,当用户单击该按钮时,将调用Ext.ux.exporter.Exporter.exportGrid函数将Grid表格导出Excel文件。 需要注意的是,我们使用了Ext.ux.exporter.Exporter类来执行导出操作。该类是ExtJS的一个扩展,需要在应用程序中明确声明。在本例中,我们使用了Ext.require函数来加载必需的类和扩展。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 20
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值