Flex - 客户端生成并导出Excel文件（使用MecExporter库）
作者：hangge | 2014-11-27 11:06
要在Flex客户端生成并导出Excel文件，原来可以借助第三方的库as3xls。但as3xls很久不更新了，对于高版本的Excel支持不好，用Excel2007，Excel2010打开会报错，于是放弃。
使用方法：我不需要它提供的表格组件，只要导出Excel的功能。所以自己封装了一个类，把数据传进来，这个类会自动在页面上生成一个隐藏的MecGrid表格组件然后导出Excel。等导出完毕后自动移除这个MecGrid表格组件。
后来找了很久，发现还有个MecExporter.swc的库。里面提供了个叫MecGrid的表格组件，同时可以把这个MecGrid组件里的数据导成Excel，虽然这个库也是很老的了，但好歹导出的文件在新版的Excel还是能打开的。
下面先看下导出的效果：
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）