{hero}

excelHtml5

自:Buttons 1.0.0

创建一个包含表格中数据(HTML5)的 Excel XLSX 文件并将其保存。
请注意 - 此属性需要 Buttons 扩展,才能用于 DataTables。

说明

此按钮让最终用户能够将表格的数据保存到本地创建的 Excel XLSX 文件中。

必须在页面上提供或使用 DataTable.Buttons.jszip() 注册 JSZip 库,前提是您正在导入模块。JSZip 是一个获得 MIT 许可的库,可提供在浏览器中创建 ZIP 文件的功能,这是构建有效的 XLSX 文件所必需的。

目前,尽管创建了 XLSX 文件,但数据格式、颜色等内容不会保留。导出的文件中仅包含表格中的原始数据。要完全控制生成的文件,可以使用 SheetJS 库构建自定义的按钮。

如果表格具有包含多行表头或表尾,这些内容将全部包含在导出中。如果表头或表尾包含 colspanrowspan 单元格,它们将自动迁移到 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 文件格式及其特性完全详细信息超出了本文档的范围。请参阅 MicrosoftOffice 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),此按钮还可以将其配置文件对象中的以下选项设置为自定义其操作和显示

示例

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
				}
			]
		}
	}
});