当前位置: > > > Flex - 客户端生成并导出Excel文件(使用MecExporter库)

Flex - 客户端生成并导出Excel文件(使用MecExporter库)

要在Flex客户端生成并导出Excel文件,原来可以借助第三方的库as3xls。但as3xls很久不更新了,对于高版本的Excel支持不好,用Excel2007,Excel2010打开会报错,于是放弃。
后来找了很久,发现还有个MecExporter.swc的库。里面提供了个叫MecGrid的表格组件,同时可以把这个MecGrid组件里的数据导成Excel,虽然这个库也是很老的了,但好歹导出的文件在新版的Excel还是能打开的。

使用方法:我不需要它提供的表格组件,只要导出Excel的功能。所以自己封装了一个类,把数据传进来,这个类会自动在页面上生成一个隐藏的MecGrid表格组件然后导出Excel。等导出完毕后自动移除这个MecGrid表格组件。

下面先看下导出的效果:
1,表格1 - 最简单的表格

2,表格2 - 列添加样式

3,表格3 - 列头合并

4,表格4 - 行头合并

5,表格5 - 添加汇总行


--- 封装类 MecExporterHelper.as ---
package
{
	import com.mechan.MecGrid.MecGrid;
	import com.mechan.MecGrid.mecGridClasses.MecGridEvent;
	import com.mechan.export.MecExporter;
	import flash.net.FileReference;
	import flash.utils.ByteArray;
	import mx.controls.Alert;
	import mx.core.FlexGlobals;
	import mx.events.CloseEvent;
	import mx.utils.Base64Encoder;
	import spark.components.Application;

	/**
	 * Excel导出助手
	 */
	public class MecExporterHelper
	{
		/**
		 * 实例对象
		 */
		private static var instance:MecExporterHelper;
		
		/**
		 * MecGrid表格组件对象
		 */
		private var _mgrid:MecGrid = new MecGrid();
		
		/**
		 * 导出文件名
		 */
		private var _fileName:String;
		
		/**
		 * MecGrid表格组件放置容器
		 */
		private var _parent:Application = FlexGlobals.topLevelApplication as Application;
		
		public function MecExporterHelper()
		{
		}
		
		/**
		 * 单例模式
		 */
		public static function getInstance():MecExporterHelper{
			if(instance == null){
				instance = new MecExporterHelper();
			}
			return instance;
		}
		
		/**
		 * 开始导出
		 * @param dataProviderUpdatedHandler: MecGrid数据更新响应函数(比如在这设置统计行)
		 * @param debug:true表示调试模式,导出时界面上会显示MecGrid表格
		 */
		public function export(fileName:String, config:XML, data:Object, 
							   dataProviderUpdatedHandler:Function = null, debug:Boolean = false):void{
			_fileName = fileName;
			
			if(debug){
				_mgrid.width = 600;
				_mgrid.height = 600;
			}
			
			if(dataProviderUpdatedHandler!=null){
				_mgrid.addEventListener(MecGridEvent.DATAPROVIDER_UPDATE_FINISHED, dataProviderUpdatedHandler);
			}
			
			_mgrid.ResourceXML = config;			
			_mgrid.dataProvider = data; 			
			_parent.addElement(_mgrid);
				
			confirm();
		}
		
		/**
		 * 弹出下载确认框(不能直接下载,因为MecGrid表格还没初始化完毕)
		 */
		private function confirm():void{
			Alert.show("文件生成成功,是否下载?","",(Alert.YES|Alert.NO),null,function(event:CloseEvent):void{
				if(event.detail == Alert.YES){
					try 
					{ 
						var exp:MecExporter=new MecExporter(); 
						
						// add MecGrid with sheetname 
						exp.charset="zh_CN"; 
						exp.AddDataGrid(_mgrid, "Sheet1"); //页标题中文好像不行
						// exporting to binary data 
						var ebt:ByteArray=exp.Export2BiffExcel(); 
						
						var b64encoder:Base64Encoder=new Base64Encoder(); 
						b64encoder.encodeBytes(ebt); 
						var file:FileReference=new FileReference(); 
						file.save(ebt, _fileName); 
						/* b64encoder.insertNewLines = false; 
						b64encoder.encodeBytes(ebt); 
						ExternalInterface.call("loadExcelFile", b64encoder.flush()); */ 
					} 
					catch (e:Error) 
					{ 
						Alert.show(e.message); 
					} 
				}
				
				_parent.removeElement(_mgrid);
			});
		}
	}
}
--- 测试类 Test.mxml ---
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx">
	
	<fx:Script>
		<![CDATA[
			import com.mechan.MecGrid.MecGrid;
			import com.mechan.MecGrid.mecGridClasses.MecGridConst;
			import com.mechan.MecGrid.mecGridClasses.MecGridEvent;
			/**
			 * 生成excel表格
			 */
			protected function exportExcel(fileName:String, config:XML, dataProviderUpdatedHandler:Function = null):void
			{
				MecExporterHelper.getInstance().export(fileName, config, myData, dataProviderUpdatedHandler, true);
			}
			
			/**
			 * MecGrid数据更新响应函数(给表格5添加汇总行)
			 */
			private function dataProviderUpdatedHandler(event:MecGridEvent):void
			{
				var mgrid:MecGrid = event.currentTarget as MecGrid;
				mgrid.removeEventListener(MecGridEvent.DATAPROVIDER_UPDATE_FINISHED, dataProviderUpdatedHandler);
				mgrid.redraw = false;
				mgrid.clearSubTotal();
				mgrid.AddSubTotal("总数", [0, 1], MecGridConst.SUBTOTAL_SUM, -1, [2, 3, 4, 5], MecGridConst.SUBTOTAL_BELOWDATA, "s1");
				mgrid.AddSubTotal("城市 总数", [1], MecGridConst.SUBTOTAL_SUM, 0, [2, 3, 4, 5], MecGridConst.SUBTOTAL_BELOWDATA);
				mgrid.updateSubTotal();
				mgrid.redraw = true;
			}
		]]>
	</fx:Script>
	
	<fx:Declarations>
		<s:ArrayCollection id="myData">
			<fx:Object country="中国" city="杭州" qt1="12.3" qt2="36.3" qt3="36.2" qt4="31"/>
			<fx:Object country="中国" city="北京" qt1="15.3" qt2="33.3" qt3="36.2" qt4="27"/>
			<fx:Object country="中国" city="上海" qt1="17.3" qt2="36.3" qt3="31.2" qt4="31"/>
			<fx:Object country="日本" city="东京" qt1="19.3" qt2="36.8" qt3="26.2" qt4="31"/>
		</s:ArrayCollection>
		<!-- 表格1的配置 -->
		<fx:XML id="config1">
			<List>  
				<option cols="6" fixedrows="1"/>
				<columns>  
					<column datafield="country" visible="T" colindex="0" autowidth="T" width="61" datatype="5" textalign="4" textalign_fixed="10"  header="国家"/>  
					<column datafield="city" visible="T"  colindex="1" autowidth="T" width="61" datatype="5" textalign="4" textalign_fixed="10"  header="城市"/>  
					<column datafield="qt1" visible="T" colindex="2" autowidth="T" width="88" datatype="4" textalign="10" textalign_fixed="10"  header="最高温度"/>  
					<column datafield="qt2" visible="T" colindex="3" autowidth="T" width="92" datatype="4" textalign="10" textalign_fixed="10"  header="最低温度"/>  
					<column datafield="qt3" visible="T" colindex="4" autowidth="T" width="90" datatype="4" textalign="10" textalign_fixed="10"  header="最高湿度"/>  
					<column datafield="qt4" visible="T" colindex="5" autowidth="T" width="90" datatype="4" textalign="10" textalign_fixed="10"  header="最低湿度"/>  
				</columns>  
			</List>
		</fx:XML>
		<!-- 表格2的配置 -->
		<fx:XML id="config2">
			<List>  
				<option cols="6" fixedrows="1"/>
				<columns>  
					<column datafield="country" visible="T" colindex="0" autowidth="T" width="61" datatype="5" textalign="4" textalign_fixed="10"  header="国家"/>  
					<column datafield="city" visible="T"  colindex="1" autowidth="T" width="61" datatype="5" textalign="4" textalign_fixed="10"  header="城市" style="s1"/>  
					<column datafield="qt1" visible="T" colindex="2" autowidth="T" width="88" datatype="4" textalign="10" textalign_fixed="10"  header="最高温度"/>  
					<column datafield="qt2" visible="T" colindex="3" autowidth="T" width="92" datatype="4" textalign="10" textalign_fixed="10"  header="最低温度"/>  
					<column datafield="qt3" visible="T" colindex="4" autowidth="T" width="90" datatype="4" textalign="10" textalign_fixed="10"  header="最高湿度"/>  
					<column datafield="qt4" visible="T" colindex="5" autowidth="T" width="90" datatype="4" textalign="10" textalign_fixed="10"  header="最低湿度"/>  
				</columns>  
				<styles>
					<style name="s1" backcolor1="13434879" backcolor2="16777215" backalpha1="1" backalpha2="1" bordercolor="12566463" borderthickness="1" bt_top="1" bt_bottom="1" bt_left="1" bt_right="1" fontstyle="5" forecolor="3355443" fontsize="10"/>
				</styles>
			</List>
		</fx:XML>
		<!-- 表格3的配置 -->
		<fx:XML id="config3">
			<List>  
				<option cols="6" fixedrows="2" merge_option="4"  merge_option_fixedrow="2"/>
				<columns>  
					<column datafield="country" visible="T" colindex="0" autowidth="T" width="61" datatype="5" textalign="4" textalign_fixed="10"  header="国家;国家"/>  
					<column datafield="city" visible="T"  colindex="1" autowidth="T" width="61" datatype="5" textalign="4" textalign_fixed="10"  header="城市;城市"/>  
					<column datafield="qt1" visible="T" colindex="2" autowidth="T" width="88" datatype="4" textalign="10" textalign_fixed="10"  header="温度;最高温度"/>  
					<column datafield="qt2" visible="T" colindex="3" autowidth="T" width="92" datatype="4" textalign="10" textalign_fixed="10"  header="温度;最低温度"/>  
					<column datafield="qt3" visible="T" colindex="4" autowidth="T" width="90" datatype="4" textalign="10" textalign_fixed="10"  header="湿度;最高湿度"/>  
					<column datafield="qt4" visible="T" colindex="5" autowidth="T" width="90" datatype="4" textalign="10" textalign_fixed="10"  header="湿度;最低湿度"/>  
				</columns>  
			</List>
		</fx:XML>
		<!-- 表格4的配置 -->
		<fx:XML id="config4">
			<List>  
				<option cols="6" fixedrows="1"/>
				<columns>  
					<column datafield="country" visible="T" colindex="0" autowidth="T" width="61" datatype="5" textalign="4" textalign_fixed="10" merge="T" header="国家"/>  
					<column datafield="city" visible="T"  colindex="1" autowidth="T" width="61" datatype="5" textalign="4" textalign_fixed="10"  header="城市"/>  
					<column datafield="qt1" visible="T" colindex="2" autowidth="T" width="88" datatype="4" textalign="10" textalign_fixed="10"  header="最高温度"/>  
					<column datafield="qt2" visible="T" colindex="3" autowidth="T" width="92" datatype="4" textalign="10" textalign_fixed="10"  header="最低温度"/>  
					<column datafield="qt3" visible="T" colindex="4" autowidth="T" width="90" datatype="4" textalign="10" textalign_fixed="10"  header="最高湿度"/>  
					<column datafield="qt4" visible="T" colindex="5" autowidth="T" width="90" datatype="4" textalign="10" textalign_fixed="10"  header="最低湿度"/>  
				</columns>  
			</List>
		</fx:XML>
		<!-- 表格5的配置 -->
		<fx:XML id="config5">
			<List>  
				<option cols="6" fixedrows="1"/>
				<columns>  
					<column datafield="country" visible="T" colindex="0" autowidth="T" width="61" datatype="5" textalign="4" textalign_fixed="10" merge="T" header="国家"/>  
					<column datafield="city" visible="T"  colindex="1" autowidth="T" width="61" datatype="5" textalign="4" textalign_fixed="10"  header="城市"/>  
					<column datafield="qt1" visible="T" colindex="2" autowidth="T" width="88" datatype="4" textalign="10" textalign_fixed="10"  header="最高温度"/>  
					<column datafield="qt2" visible="T" colindex="3" autowidth="T" width="92" datatype="4" textalign="10" textalign_fixed="10"  header="最低温度"/>  
					<column datafield="qt3" visible="T" colindex="4" autowidth="T" width="90" datatype="4" textalign="10" textalign_fixed="10"  header="最高湿度"/>  
					<column datafield="qt4" visible="T" colindex="5" autowidth="T" width="90" datatype="4" textalign="10" textalign_fixed="10"  header="最低湿度"/>  
				</columns>  
				<styles>
					<style name="s1" backcolor1="13434879" backcolor2="16777215" backalpha1="1" backalpha2="1"  fontstyle="1" forecolor="3355443" fontsize="10"/>
				</styles>
			</List>
		</fx:XML>
	</fx:Declarations>
	<s:HGroup verticalCenter="0" horizontalCenter="0">
		<s:Button label="表格1" click="{exportExcel('表格1.xls',config1)}" />
		<s:Button label="表格2" click="{exportExcel('表格2.xls',config2)}" />
		<s:Button label="表格3" click="{exportExcel('表格3.xls',config3)}" />
		<s:Button label="表格4" click="{exportExcel('表格4.xls',config4)}" />
		<s:Button label="表格5" click="{exportExcel('表格5.xls',config5,dataProviderUpdatedHandler)}" />
	</s:HGroup>
</s:Application>

评论0