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

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	单元格背景色

有喜欢聊技术朋友也欢迎入群，若二维码失效可加我微信回复**前端**