前端导出excel无后台语言处理（JS+easyUI+Flash）

淩亂°似流年 2022-08-06 10:17 173阅读 0赞

http://www.cnblogs.com/yfrs/p/4110381.html

\*：demo需iis环境

DEMO:[http://download.csdn.net/detail/u010730458/8356567][http_download.csdn.net_detail_u010730458_8356567]

ps:感谢‘[yy浮萍人生][yy]’大神帮我解决问题。

# [无服务端纯前台导出数据到Excel-JSExcelXML.js 使用指南][Excel-JSExcelXML.js] #

JSExcelXML 使用指南

先来个效果预览

a.前端显示

![201322405008635.png][]

b.导出excel效果

表头部分

![201323499063698.png][]

表尾部分

![201324375318248.png][]

1.功能描述

JsExcelXml 采用js生成excel中可显示的xml格式文本，将输出文本保存为.xls格式即可,可实现所见即所得，该版本和上个版本有较多的改动，现在的版本更加灵活，该版本分别在IE8,9,10，chrome，Firefox,Opera下完全测试通过，并实现一下功能：

*  自定义显示位置
 *  自定义主标题以及样式
 *  自定义副标题以及样式
 *  多表头
 *  数据行合并，列合并
 *  指定单元格样式
 *  行背景色
 *  列背景色
 *  自定义统计行数据及样式

2.依赖资源

Jquery.js

Easyui.js

3.使用方式

var obj = $.ExportExcelDlg(\{options\});

obj.ExportExcelDlg('open');

4. options属性说明

<table style="margin:0px; padding:0px; border-collapse:collapse; border-spacing:0px; border:1px solid silver; word-break:break-word"> 
 <tbody style="margin:0px; padding:0px"> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 参数名 </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 参数类型 </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 作用 </td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> HeadInfo </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> Array </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 定义输出Excel中表头信息 </td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> MainTitle </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> Object </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 定义输出Excel中自定主标题信息 </td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> SecondTitle </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> Object </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 定义输出Excel中自定副标题信息 </td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> RowInfo </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> Array </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 定义输出Excel 行数据 </td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> FooterInfo </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> Array </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 定义输出Excel 行末数据 </td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> MergeCells </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> Array </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 定义需要合并单元格的数据 </td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> CellStyles </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> Array </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 定义单元格样式 </td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> RowStart </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> Number </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 定义导出Excle在第几行开始绘制数据 </td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> ColumStart </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> Number </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 定义导出Excel在第几列开始绘制数据 </td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> SheetName </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> String </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 定义导出Excel对应Sheet名称 </td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> SaveName </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> String </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 定义保存文件名称 </td> 
 </tr> 
 <tr style="margin:0px; padding:0px"> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> Swf </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> string </td> 
 <td style="margin:0px; padding:3px; border:1px solid silver; border-collapse:collapse"> 保存文件swf地址 </td> 
 </tr> 
 </tbody> 
</table>

*  HeadInfo 格式

\[\[

\{ field: 'F\_UserID', title: '公告ID', hidden: true, rowspan:3,formatter:function(value,x,x), datatype: 'Number' \},

\{ field: 'F\_RealName', title: '姓名', rowspan: 3 bgcolor:"\#FF0000"\},

\{ field: 'F\_LoginName', title: '登录名',rowspan: 3 \},

\{ field: 'F\_Password', title: '密码', rowspan: 3，datatype: 'Number'\},

\{ title: '多表头', colspan: 5 \}

\], \[

\{ field: 'F\_UserNick', title: '昵称',rowspan:2\},

\{ field: 'F\_IdNumber', title: '身份证号', rowspan:2 \},

\{ title: '多表3', colspan: 3\}

\], \[

\{ field: 'F\_Tel', title: '电话'\},

\{ field: 'F\_BirthDate', title: '生日' \},

\{ field: 'F\_EMail', title: '邮箱' \},

\]\]

采用easyui-datagrid 定义列格式，采用多维数组标记实现多维表头绘制方式，直接在easyui-datagrid 中可使用 $(‘xxx’).datagrid(‘options’). Columns 获取,但为获得更好显示效果，扩展属性 datatype，bgcolor

*  RowInfo

\[\{“Field1”:’张三’,’Filed2’:10,’ BgColor’:’\#00FF00’\},

\{“Field1”:’李四’,’Filed2’:20,’ BgColor’:’\#0000FF’\}\]

*  FooterInfo

\[\{“Field1”:’合计’,’ Filed2’:30 \},

\{“Field1”:’平均’,’ Filed2’:15 \}\]

*  MainTitle，SecondTitle 格式

\{ Displayname: '主标题/副标题', Alignment: 'Center', BgColor: '\#FFFFFF', FontSize: 16, FontColor: "\#000000", IsBold: true, IsItalic: false, IsUnderLine: false \}

*  HeadStyle，DataStyle，FootStyle

\{ Alignment: 'Center', BgColor: '\#D8D8D8', FontSize: 12, FontColor: "\#000000", IsBold: true, IsItalic: false, IsUnderLine: false \}

*  MergeCells

\[\{ index: 1, field: 'F\_USERNAME', colspan: 4, rowspan: 2 \},

\{ index: 3, field: 'F\_COMPANYNAME', colspan: 2, rowspan: 2 \},

\{ index: 3, field: 'F\_MOBILE', colspan: 2 \}\]

属性作用

*   CellStyles

\[\{ index: 3, field: 'F\_MOBILE', BgColor: "\#0000ff" \}\]

,上传一段时间，没想到还是有朋友需要这样的功能，苦于以前没有demo，很多朋友表示不会使用，现在将迟来的demo奉上，找了半天，都没找到博客园上传附件的地方，需要的朋友还是到我的git上不去down，[https://github.com/464884492/JSExcelXml/tree/master/demo][https_github.com_464884492_JSExcelXml_tree_master_demo]

[http_download.csdn.net_detail_u010730458_8356567]: http://download.csdn.net/detail/u010730458/8356567
[yy]: http://home.cnblogs.com/u/yfrs/
[Excel-JSExcelXML.js]: http://www.cnblogs.com/yfrs/p/4110381.html
[201322405008635.png]: /images/20220806/0afb634ef5cc4927b614e62441e3ca60.png
[201323499063698.png]: /images/20220806/c1acb06f2ab94bef9d63f630352acbf0.png
[201324375318248.png]: /images/20220806/8fdc60a15aee44ed87f87cb54e566104.png
[https_github.com_464884492_JSExcelXml_tree_master_demo]: https://github.com/464884492/JSExcelXml/tree/master/demo