JSExcelXML 使用指南
先来个效果预览
a.前端显示
b.导出excel效果
表头部分
表尾部分
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属性说明
参数名 | 参数类型 | 作用 |
HeadInfo | Array | 定义输出Excel中表头信息 |
MainTitle | Object | 定义输出Excel中自定主标题信息 |
SecondTitle | Object | 定义输出Excel中自定副标题信息 |
RowInfo | Array | 定义输出Excel 行数据 |
FooterInfo | Array | 定义输出Excel 行末数据 |
MergeCells | Array | 定义需要合并单元格的数据 |
CellStyles | Array | 定义单元格样式 |
RowStart | Number | 定义导出Excle在第几行开始绘制数据 |
ColumStart | Number | 定义导出Excel在第几列开始绘制数据 |
SheetName | String | 定义导出Excel对应Sheet名称 |
SaveName | String | 定义保存文件名称 |
Swf | string | 保存文件swf地址 |
- 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
属性 | 作用 |
field | 取数字段 |
title | 显示名称 |
hidden | 是否隐藏，为true不会在excel中绘制该列，在直接调用easyui会出现此属性 |
rowspan | 跨越行 |
colspan | 跨越列 |
datatype | 数据类型 ‘'Number'’ 默认生成为string类型，若有此标记excel中将自动转换成数字类型 |
bgcolor | 该列背景色标准16进制表示 如：‘#FFFFFF’ |
formatter | 只转换方法 如实现，改列原值为1，调用自定义formatter,可将value*10导出 |
- RowInfo
[{“Field1”:’张三’,’Filed2’:10,’ BgColor’:’#00FF00’},
{“Field1”:’李四’,’Filed2’:20,’ BgColor’:’#0000FF’}]
属性 | 作用 |
‘key’:’value’ | 显示数据列/值 |
BgColor | 行特殊字段，用于绘制改行背景色，若无特别需求，可不用保留改字段 |
- FooterInfo
[{“Field1”:’合计’,’ Filed2’:30 },
{“Field1”:’平均’,’ Filed2’:15 }]
属性 | 作用 |
‘key’:’value’ | 显示数据列/值 |
- MainTitle，SecondTitle 格式
{ Displayname: '主标题/副标题', Alignment: 'Center', BgColor: '#FFFFFF', FontSize: 16, FontColor: "#000000", IsBold: true, IsItalic: false, IsUnderLine: false }
属性 | 作用 |
Displayname | 主标题内容 |
Alignment | 对齐方式 ‘Center’,’Left’,’Right’ |
BgColor | 背景色 |
FontSize | 字体大小 |
FontColor | 字体颜色 |
IsBold | 是否加粗 |
IsItalic | 是否倾斜 |
IsUnderLine | 是否有下划线 |
- HeadStyle，DataStyle，FootStyle
{ Alignment: 'Center', BgColor: '#D8D8D8', FontSize: 12, FontColor: "#000000", IsBold: true, IsItalic: false, IsUnderLine: false }
属性 | 作用 |
Alignment | 对齐方式 ‘Center’,’Left’,’Right’ |
BgColor | 背景色 |
FontSize | 字体大小 |
FontColor | 字体颜色 |
IsBold | 是否加粗 |
IsItalic | 是否倾斜 |
IsUnderLine | 是否有下划线 |
- 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 }]
属性作用
属性 | 作用 |
index | 在数据RowInfo中的索引值，范围0~ RowInfo.Length |
field | 对应Filed列开始合并 |
colspan | 跨越列 |
rowspan | 跨越行 |
- CellStyles
[{ index: 3, field: 'F_MOBILE', BgColor: "#0000ff" }]
属性 | 作用 |
index | 在数据RowInfo中的索引值，范围0~ RowInfo.Length |
field | 对应Filed列开始合并 |
BgColor | 单元格背景色 |
有喜欢聊技术朋友也欢迎入群，若二维码失效可加我微信回复**前端**
