-
Notifications
You must be signed in to change notification settings - Fork 154
Expand file tree
/
Copy pathexcelHtml5.xml
More file actions
288 lines (236 loc) · 13.5 KB
/
excelHtml5.xml
File metadata and controls
288 lines (236 loc) · 13.5 KB
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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
<?xml version="1.0" encoding="UTF-8" ?>
<dt-button library="Buttons">
<name>excelHtml5</name>
<summary>Create and save an Excel XLSX file that contains the data from the table (HTML5)</summary>
<since>1.0.0</since>
<requires>
* Buttons' _HTML5 export button_ plug-in.
* [JSZip](https://stuk.github.io/jszip/)
* A browser that supports local file saving (IE10+, Chrome, Firefox, Opera).
To ensure that all files required for Excel HTML5 export are included, the [DataTables download builder](/download) is recommend - select the _HTML5 export_ and _JSZip_ options.
</requires>
<description>
< library must be available on the page or registered with `DataTable.Buttons.jszip()` if you are importing modules. JSZip is an MIT licensed library provides the ability to create a ZIP file in the browser, which is required to build a valid XLSX file.
At this time, although an XLSX file is created, data formatting, colours, etc are not retained. Only the raw data from the table is included in the exported file. For complete control over the generated file, a custom button could be constructed using the [SheetJS](http://sheetjs.com/) library.
If your table has a header or footer with multiple rows, these will all be included in the export. If the header or footer contains `colspan` or `rowspan` cells, they will automatically be migrated to the Excel document for export.
## Customisation
< ## XLSX file format
<
< It is important to note that Buttons does not provide any kind of abstraction for the XLSX XML! If you want to modify the output Excel file you need to understand the [XML used for the spreadsheet](https://msdn.microsoft.com/en-us/library/aa140066(office.10).aspx). If you require an abstraction layer, consider creating a custom button that uses [js-xlsx](https://github.com/SheetJS/js-xlsx).
The Excel file that Buttons creates is intentionally quite simple - the default styling is:
* _Calibri_ font, size 11 (matching Excel default)
* Header and footer are bold
* Column widths are auto sized to fit their contents (min: _5_, max: _52_)
However, you may wish to add additional information or formatting to the document to suit your output requirements. This ability is provided by the `customize` option of this button type.
The `customize` method is passed a single parameter - an object with the following structure (note that `xml` is simply a place holder to represent an XML document - each XML document is of course different):
```js
{
"_rels": {
".rels": xml
},
"xl": {
"_rels": {
"workbook.xml.rels": xml
},
"workbook.xml": xml,
"styles.xml": xml,
"worksheets": {
"sheet1.xml": xml
}
},
"[Content_Types].xml": xml
}
```
If you've developed with XLSX files before you will notice that this object's structure mimics the file structure of the XLSX file. When zipped this file structure will create an XLSX file - which is exactly what this button type does. The `customize` method provides you with the ability to modify any of the XML documents inside it, and even to add extra files (these are automatically detected in the structure and will be included in the zip).
As an example, let's modify the text shown in cell _A1_:
```js
customize: function ( xlsx ) {
var sheet = xlsx.xl.worksheets['sheet1.xml'];
$('c[r=A1] t', sheet).text( 'Custom text' );
}
```
On line two we get the XML document used for the spreadsheet's data. Then on line four a little bit of jQuery is used to select the correct cell's text node (the `r` attribute of the `-tag c` element is where the cell will be shown and the `-tag t` element is the text node). Then set the text for the cell. You could just as readily use DOM methods if you prefer.
We can use the a similar method to customize the styling of the cells in the document. This is done by adding the `s` attribute to the `-tag c` element(s), where the attribute value is the style index you wish to use. The XLSX file created by Buttons has a number of built in styles which are documented below.
This is only a brief summary of how to customise the XLSX files. Full details of the XLSX file format and its features are outside the scope of this documentation. Please refer to the [Microsoft](https://msdn.microsoft.com/en-us/library/aa140066(office.10).aspx) and [Office Open XML](http://officeopenxml.com/SSstyles.php) documentation for details.
### Built in styles
The following indexes are available form the styles that are predefined in the Editor XLSX style file. These indexes can be applied to any cells in the generated spreadsheet, altering their appearance.
* `0` - Normal text
* `1` - White text
* `2` - Bold
* `3` - Italic
* `4` - Underline
* `5` - Normal text, grey background
* `6` - White text, grey background
* `7` - Bold, grey background
* `8` - Italic, grey background
* `9` - Underline, grey background
* `10` - Normal text, red background
* `11` - White text, red background
* `12` - Bold, red background
* `13` - Italic, red background
* `14` - Underline, red background
* `15` - Normal text, green background
* `16` - White text, green background
* `17` - Bold, green background
* `18` - Italic, green background
* `19` - Underline, green background
* `20` - Normal text, blue background
* `21` - White text, blue background
* `22` - Bold, blue background
* `23` - Italic, blue background
* `24` - Underline, blue background
* `25` - Normal text, thin black border
* `26` - White text, thin black border
* `27` - Bold, thin black border
* `28` - Italic, thin black border
* `29` - Underline, thin black border
* `30` - Normal text, grey background, thin black border
* `31` - White text, grey background, thin black border
* `32` - Bold, grey background, thin black border
* `33` - Italic, grey background, thin black border
* `34` - Underline, grey background, thin black border
* `35` - Normal text, red background, thin black border
* `36` - White text, red background, thin black border
* `37` - Bold, red background, thin black border
* `38` - Italic, red background, thin black border
* `39` - Underline, red background, thin black border
* `40` - Normal text, green background, thin black border
* `41` - White text, green background, thin black border
* `42` - Bold, green background, thin black border
* `43` - Italic, green background, thin black border
* `44` - Underline, green background, thin black border
* `45` - Normal text, blue background, thin black border
* `46` - White text, blue background, thin black border
* `47` - Bold, blue background, thin black border
* `48` - Italic, blue background, thin black border
* `49` - Underline, blue background, thin black border
* `50` - Left aligned text (since 1.2.2)
* `51` - Centred text (since 1.2.2)
* `52` - Right aligned text (since 1.2.2)
* `53` - Justified text (since 1.2.2)
* `54` - Text rotated 90° (since 1.2.2)
* `55` - Wrapped text (since 1.2.2)
* `56` - Percentage integer value (automatically detected and used by buttons - since 1.2.3)
* `57` - Dollar currency values (automatically detected and used by buttons - since 1.2.3)
* `58` - Pound currency values (automatically detected and used by buttons - since 1.2.3)
* `59` - Euro currency values (automatically detected and used by buttons - since 1.2.3)
* `60` - Percentage with 1 decimal place (automatically detected and used by buttons - since 1.2.3)
* `61` - Negative numbers indicated by brackets (automatically detected and used by buttons - since 1.2.3)
* `62` - Negative numbers indicated by brackets - 2 decimal places (automatically detected and used by buttons - since 1.2.3)
* `63` - Numbers with thousand separators (automatically detected and used by buttons - since 1.2.3)
* `64` - Numbers with thousand separators - 2 decimal places (automatically detected and used by buttons - since 1.2.3)
* `65` - Numbers without thousand separators (automatically detected and used by buttons - since 1.2.4)
* `66` - Numbers without thousand separators - 2 decimal places (automatically detected and used by buttons - since 1.2.4)
Notes:
* Grey is <span style="background:#d9d9d9">#d9d9d9</span>
* Red is <span style="background:#d99795">#d99795</span>
* Green is <span style="background:#6efce">#6efce</span>
* Blue is <span style="background:#c6cfef">#c6cfef</span>
]]>
</description>
<option type="string" name="text" default="Excel">
The button's display text. The text can be configured using this option (see `b-init buttons.buttons.text`) or the `buttons.copy` option of the DataTables `dt-init language` object.
</option>
<option type="string" name="className" default="buttons-excel buttons-html5">
The button's class name. See `b-init buttons.buttons.className` for details.
</option>
<option type="function" name="action">
Create and save a Excel XLSX file.
</option>
<option type="object" name="exportOptions" default="{}">
Select the data to be gathered from the DataTable for export. This includes options for which columns, rows, ordering and search. Please see the `b-api buttons.exportData()` method for full details - the object given by this parameter is passed directly into that action to gather the required data.
</option>
<option type="boolean" name="header" default="true">
Indicate if the table header should be included in the exported data or not.
</option>
<option type="boolean" name="footer" default="true">
Indicate if the table footer should be included in the exported data or not. Please note that the default for this parameter was updated in Buttons 3.0 to be `true`. In earlier versions it was `false`.
</option>
<option type="string|function" name="filename" default="*">
File name to give the created file (plus the extension defined by the `extension` option). The special character `*` is automatically replaced with the value read from the host document's `-tag title` tag.
</option>
<option type="string" name="extension" default=".xlsx">
The extension to give the created file name.
</option>
<option type="string" name="sheetName" default="Sheet1">
Name for the worksheet in Excel file created. The characters [] \ /: *? : are not allowed and will be removed if present.
</option>
<option type="boolean" name="createEmptyCells" default="false" since="1.5.0">
Option to instruct the Excel export to create empty cells. By default if a cell contains `null` or empty data, it will not be created in the exported spreadsheet. You may however wish for it to do so, based on styling requirements.
</option>
<option type="function" name="customize" default="undefined" since="1.2.0">
This method can be used to modify the XLSX file that is created by Buttons. The first parameter that is passed in is an object that contains the XML files and the object structure matches the file system paths for those files in an XLSX file. Customisation of the XLSX file is a complex topic - please refer to the _Customisation_ section in the `b-button excelHtml5` button documentation for full details.
As of Buttons 1.5.2 this function is passed three parameters:
1. An object that contains the XML files in the ZIP file structure used by Excel
2. The button configuration object
3. A DataTables API instance for the table the button belongs to.
</option>
<option type="string|function" name="title" default="*" since="1.4.0">
Title of the table that will be included in the exported data. Please see `-api buttons.exportInfo()` for all options relating to this parameter.
</option>
<option type="string|function" name="messageTop" default="*" since="1.4.0">
Message to be shown at the top of the table, or the `-tag caption` tag if displayed at the top of the table.
</option>
<option type="string|function" name="messageBottom" default="*" since="1.4.0">
Message to be shown at the bottom of the table, or the `-tag caption` tag if displayed at the bottom of the table.
</option>
<option type="boolean" name="autoFilter" default="false" since="1.5.4">
Enable Excel's auto filter feature for the header cells in the table allowing the user to quickly filter and sort the exported spreadsheet in Excel. Note that this does not operate in LibreOffice (although the spreadsheet is still readable).
</option>
<option type="boolean" name="fixedHeader" default="false" since="3.0.2">
Freeze the header cells in the table allowing the user to always see the header as they scroll the spreadsheet.
</option>
<example title="DataTables initialisation: Use the HTML5 Excel button"><![CDATA[
new DataTable('#myTable', {
layout: {
topStart: {
buttons: ['excelHtml5']
}
}
});
]]></example>
<example title="DataTables initialisation: Use the `b-button excel` button type to alias the HTML button options."><![CDATA[
new DataTable('#myTable', {
layout: {
topStart: {
buttons: ['excel']
}
}
});
]]></example>
<example title="DataTables initialisation: Use the `exportOptions` to save only the data shown on the current DataTable page"><![CDATA[
new DataTable('#myTable', {
layout: {
topStart: {
buttons: [
{
extend: 'excelHtml5',
text: 'Save current page',
exportOptions: {
modifier: {
page: 'current'
}
}
}
]
}
}
});
]]></example>
<example title="Enable the auto filter option in Excel"><![CDATA[
new DataTable('#myTable', {
layout: {
topStart: {
buttons: [
{
extend: 'excelHtml5',
autoFilter: true
}
]
}
}
});
]]></example>
</dt-button>