無服務端純前台導出數據到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	單元格背景色

有喜歡聊技術朋友也歡迎入群，若二維碼失效可加我微信回復**前端**