excelHtml5
创建一个包含表格中数据(HTML5)的 Excel XLSX 文件并将其保存。
请注意 - 此属性需要 Buttons 扩展,才能用于 DataTables。
说明
此按钮让最终用户能够将表格的数据保存到本地创建的 Excel XLSX 文件中。
必须在页面上提供或使用 DataTable.Buttons.jszip()
注册 JSZip 库,前提是您正在导入模块。JSZip 是一个获得 MIT 许可的库,可提供在浏览器中创建 ZIP 文件的功能,这是构建有效的 XLSX 文件所必需的。
目前,尽管创建了 XLSX 文件,但数据格式、颜色等内容不会保留。导出的文件中仅包含表格中的原始数据。要完全控制生成的文件,可以使用 SheetJS 库构建自定义的按钮。
如果表格具有包含多行表头或表尾,这些内容将全部包含在导出中。如果表头或表尾包含 colspan
或 rowspan
单元格,它们将自动迁移到 Excel 文档中进行导出。
自定义
Buttons 创建的 Excel 文件故意相当简单 - 默认样式为
- Calibri 字体,大小 11(匹配 Excel 默认值)
- 表头和表尾加粗
- 自动调整列宽使之适合其内容(最小:5,最大:52)
但是,您可能希望向文档中添加额外信息或格式,以满足您的输出要求。此按钮类型通过 customize
选项提供了这种可能性。
customize
方法传递一个参数 - 一个具有以下结构的对象(请注意,xml
只是一个用于表示 XML 文档的占位符 - 当然,每个 XML 文档都不同)
{
"_rels": {
".rels": xml
},
"xl": {
"_rels": {
"workbook.xml.rels": xml
},
"workbook.xml": xml,
"styles.xml": xml,
"worksheets": {
"sheet1.xml": xml
}
},
"[Content_Types].xml": xml
}
如果您之前使用过 XLSX 文件,您会发现此对象的结构模仿了 XLSX 文件的文件结构。此文件结构在压缩后会创建一个 XLSX 文件 - 这正是此按钮类型执行的操作。customize
方法使您能够修改其中的任何 XML 文档,甚至添加其他文件(这些文件会在结构中自动检测,并会包含在 zip 文件中)。
例如,让我们修改显示在单元格 A1 中的文本
customize: function ( xlsx ) {
var sheet = xlsx.xl.worksheets['sheet1.xml'];
$('c[r=A1] t', sheet).text( 'Custom text' );
}
在第二行,我们获得用于电子表格数据的 XML 文档。然后在第四行中,使用一点点 jQuery 来选择正确的单元格文本节点(c
元素的 r
特性是单元格将显示在哪里,t
元素是文本节点)。然后设置单元格的文本。如果您愿意,可以使用 DOM 方法。
我们可以使用类似的方法自定义文档中单元格的样式。这是通过向 c
元素添加 s
特性完成的,此处的特性值是您希望使用的样式索引。Buttons 创建的 XLSX 文件具有许多内置样式,这些样式在下面进行了说明。
这只是如何自定义 XLSX 文件的简要总结。XLSX 文件格式及其特性完全详细信息超出了本文档的范围。请参阅 Microsoft 和 Office Open XML 文档以了解详细信息。
内置样式
以下索引来自编辑器的 XLSX 样式中预定义的样式。这些索引可以应用于生成电子表格中的任何单元格,更改其外观。
0
- 普通文本1
- 白色文本2
- 粗体3
- 倾斜4
- 下划线5
- 普通文本,灰色背景6
- 白色文本,灰色背景7
- 粗体,灰色背景8
- 倾斜,灰色背景9
- 下划线,灰色背景10
- 普通文本,红色背景11
- 白色文本,红色背景12
- 粗体,红色背景13
- 倾斜,红色背景14
- 下划线,红色背景15
- 普通文本,绿色背景16
- 白色文本,绿色背景17
- 粗体,绿色背景18
- 倾斜,绿色背景19
- 下划线,绿色背景20
- 普通文本,蓝色背景21
- 白色文本,蓝色背景22
- 粗体,蓝色背景23
- 倾斜,蓝色背景24
- 下划线,蓝色背景25
- 普通文本,细黑边框26
- 白色文本,细黑边框27
- 粗体,细黑边框28
- 倾斜,细黑边框29
- 下划线,细黑边框30
- 普通文本,灰色背景,细黑边框31
- 白色文本,灰色背景,细黑边框32
- 粗体,灰色背景,细黑边框33
- 倾斜,灰色背景,细黑边框34
- 下划线,灰色背景,细黑边框35
- 普通文本,红色背景,细黑边框36
- 白色文本,红色背景,细黑边框37
- 粗体,红色背景,细黑边框38
- 倾斜,红色背景,细黑边框39
- 下划线,红色背景,细黑边框40
- 普通文本,绿色背景,细黑边框41
- 白色文本,绿色背景,细黑边框42
- 粗体,绿色背景,细黑边框43
- 倾斜,绿色背景,细黑边框44
- 下划线,绿色背景,细黑边框45
- 普通文本,蓝色背景,细黑边框46
- 文本白色,背景蓝色,黑色细边框47
- 文本粗体,背景蓝色,黑色细边框48
- 文本倾斜,背景蓝色,黑色细边框49
- 文本下划线,背景蓝色,黑色细边框50
- 左对齐文本(自 1.2.2 起)51
- 居中文本(自 1.2.2 起)52
- 右对齐文本(自 1.2.2 起)53
- 两端对齐文本(自 1.2.2 起)54
- 文本旋转 90°(自 1.2.2 起)55
- 换行文本(自 1.2.2 起)56
- 百分比整数值(从 1.2.3 起按钮自动检测和使用)57
- 美元货币值(从 1.2.3 起按钮自动检测和使用)58
- 英镑货币值(从 1.2.3 起按钮自动检测和使用)59
- 欧元货币值(从 1.2.3 起按钮自动检测和使用)60
- 小数点后一位的百分比(从 1.2.3 起按钮自动检测和使用)61
- 用括号表示的负数(从 1.2.3 起按钮自动检测和使用)62
- 用括号表示的负数 - 小数点后两位(从 1.2.3 起按钮自动检测和使用)63
- 带千位分隔符的数字(自 1.2.3 起按钮自动检测和使用)64
- 带千位分隔符的数字 - 小数点后两位(从 1.2.3 起按钮自动检测和使用)65
- 不带千位分隔符的数字(从 1.2.4 起自动检测和使用)66
- 不带千位分隔符的数字 - 小数点后两位(从 1.2.4 起自动检测和使用)
备注
- 灰色是 #d9d9d9
- 红色是 #d99795
- 绿色是 #6efce
- 蓝色是 #c6cfef
选项
除了适用于所有按钮的选项(例:buttons.buttons.text
),此按钮还可以将其配置文件对象中的以下选项设置为自定义其操作和显示
名称 | 类型 | 默认 |
---|---|---|
action | ||
创建并保存 Excel XLSX 文件。 | ||
autoFilter 自:1.5.4 起 | false | |
为表中的头单元格启用 Excel 的自动筛选器功能,以便用户可以在 Excel 中快速筛选和排序导出的电子表格。请注意,它在 LibreOffice 中不起作用(尽管电子表格仍然可读)。 | ||
className | buttons-excel buttons-html5 | |
按钮的类名称。有关详细信息,请参见 | ||
createEmptyCells 自:1.5.0 起 | false | |
指示 Excel 导出创建空单元格的选项。默认情况下,如果单元格包含 | ||
customize 自:1.2.0 起 | 未定义 | |
此方法可用于修改按钮所创建的 XLSX 文件。作为参数传入的第一个对象包含 XML 文件且对象结构与 XLSX 文件中那些文件的文件系统路径相匹配。自定义 XLSX 文件是较为复杂的话题 - 有关完整详细信息,请参阅 在 Buttons 1.5.2 中,此函数被传入三个参数
| ||
exportOptions | {} | |
选择要从 DataTable 中导入用于导出的数据。这包括列、行、排序和搜索的选项。有关完整详细信息,请参阅 | ||
extension | .xlsx | |
赋予创建的文件名的扩展名。 | ||
filename | * | |
赋予创建的文件的文件名(加上 | ||
footer | true | |
指示是否应将表尾包含在导出数据中。请注意,此参数的默认值在 Buttons 3.0 中已更新为 | ||
header | true | |
指示是否应将表头包含在导出数据中。 | ||
messageBottom 自:1.4.0 | * | |
显示在表底部的消息,如果是 | ||
messageTop 自:1.4.0 | * | |
显示在表顶部的消息,如果是 | ||
sheetName | Sheet1 | |
为创建的 Excel 文件中的工作表命名的名称。字符 [] \ /: *? : 不允许出现,且如果出现,将会被删除。 | ||
text | Excel | |
按钮的显示文本。可以通过此选项配置文本(请参阅 | ||
title 自:1.4.0 | * | |
将包含在所导出数据中的数据表格的标题。有关此参数的所有选项,请参阅 |
示例
DataTables 初始化:使用 HTML5 Excel 按钮
new DataTable('#myTable', {
layout: {
topStart: {
buttons: ['excelHtml5']
}
}
});
DataTables 初始化:使用 excel
按钮类型为 HTML 按钮选项创建别名。
new DataTable('#myTable', {
layout: {
topStart: {
buttons: ['excel']
}
}
});
DataTables 初始化:使用 exportOptions
仅保存当前 DataTable 页面中显示的数据
new DataTable('#myTable', {
layout: {
topStart: {
buttons: [
{
extend: 'excelHtml5',
text: 'Save current page',
exportOptions: {
modifier: {
page: 'current'
}
}
}
]
}
}
});
启用 Excel 中的自动筛选选项
new DataTable('#myTable', {
layout: {
topStart: {
buttons: [
{
extend: 'excelHtml5',
autoFilter: true
}
]
}
}
});