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

时间：2021-09-01 20:26:51

JSExcelXML 使用指南

先来个效果预览

 a.前端显示

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

b.导出excel效果

表头部分

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

表尾部分

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

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

单元格背景色

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

标签：

相关文章