tableexport
Version:
The simple, easy-to-implement library to export HTML tables to xlsx, xls, csv, and txt files
177 lines (147 loc) • 6.08 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ExportButtons</title>
<link href="../dist/css/tableexport.min.css" rel="stylesheet">
<link href="./examples.css" rel="stylesheet">
</head>
<body>
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-TL44T9" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<a id="example-link" href="./"> << Examples</a>
<iframe src="./defaults.html" frameborder="0" width="100%" scrolling="no" onload="this.height=screen.height/2.5;"></iframe>
<main>
<h1>ExportButtons
<code class="small">exportButtons: false</code>
</h1>
<div>
<button id="customXLSButton">I am a BIG custom XLS button</button>
</div>
<br>
<div>
<button id="customCSVButton">I am a SMALL custom CSV button</button>
</div>
<br>
<table id="export-buttons-table">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Age</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Thor Walton</td>
<td>Regional Director</td>
<td>45</td>
<td>$98,540</td>
</tr>
<tr>
<td>Travis Clarke</td>
<td>Software Engineer</td>
<td>30</td>
<td>$275,000</td>
</tr>
<tr>
<td>Suki Burks</td>
<td>Office Manager</td>
<td>22</td>
<td>$67,670</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="disabled"></td>
<td class="disabled"></td>
<td class="disabled"></td>
<th>$441,210</th>
</tr>
</tfoot>
</table>
<br>
<div class="info">
Your own custom export button can be easily created by simply capturing the <i>TableExport</i> instance.
<ol>
<li>First, save the TableExport <b>instance</b> to a variable.</li>
<li>Second, call <code>getExportData()</code> on the instance from <b>step 1</b>. The return value will be
an object literal with keys corresponding to the table selector(s) <code>id</code> attribute (or a
unique <i>uuid</i> generated by TableExport if an <code>id</code> is not provided).
</li>
<li>Lastly, call <code>export2file(data, mimeType, filename, fileExtension)</code>. The arguments correspond
to the keys of the Object returned from <b>step 2</b> above.
</li>
</ol>
First, in a variable
</div>
<br>
<div class="info code">
<pre>
var ExportButtons = document.getElementById('export-buttons-table');
var instance = new TableExport(ExportButtons, {
formats: ['xls'],
exportButtons: false
});
// // "id" of selector // format
var exportData = instance.getExportData()['export-buttons-table']['xls'];
var XLSbutton = document.getElementById('customXLSButton');
XLSbutton.addEventListener('click', function (e) {
// // data // mime // name // extension
instance.export2file(exportData.data, exportData.mimeType, exportData.filename, exportData.fileExtension);
});
</pre>
</div>
<br>
<div class="info">Additionally, the raw binary data (and byte length) can be retrieved using the <code>getBinaryData</code> prototype method.
<div class="info code nested">
<pre>
// get raw binary data (i.e. filesize)
var bytes = TableExport.prototype.getBinaryData(exportData.data, exportData.fileExtension);
var byteLength = bytes.byteLength;
</pre>
</div>
</div>
</main>
<script type="text/javascript" src="../bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../bower_components/js-xlsx/dist/xlsx.core.min.js"></script>
<script type="text/javascript" src="../bower_components/blobjs/Blob.min.js"></script>
<script type="text/javascript" src="../bower_components/file-saverjs/FileSaver.min.js"></script>
<script type="text/javascript" src="../dist/js/tableexport.min.js"></script>
<script type="text/javascript" src="../assets/js/analytics.js"></script>
<script>
var tableId = 'export-buttons-table';
var ExportButtons = document.getElementById(tableId);
var instance = new TableExport(ExportButtons, {
formats: ['xls', 'csv'],
exportButtons: false
});
// **** jQuery **************************
// $(ExportButtons).tableExport({
// formats: ['xls'],
// exportButtons: false
// });
// **************************************
var XLS = instance.CONSTANTS.FORMAT.XLS;
var CSV = instance.CONSTANTS.FORMAT.CSV;
// // "id" // format
var exportDataXLS = instance.getExportData()[tableId][XLS];
var exportDataCSV = instance.getExportData()[tableId][CSV];
// get filesize
var bytesXLS = instance.getFileSize(exportDataXLS.data, exportDataXLS.fileExtension);
var bytesCSV = instance.getFileSize(exportDataCSV.data, exportDataCSV.fileExtension);
console.log('filesize (XLS):', bytesXLS + 'B');
console.log('filesize (CSV):', bytesCSV + 'B');
var XLSbutton = document.getElementById('customXLSButton');
XLSbutton.addEventListener('click', function (e) {
// // data // mime // name // extension
instance.export2file(exportDataXLS.data, exportDataXLS.mimeType, exportDataXLS.filename, exportDataXLS.fileExtension);
});
var CSVbutton = document.getElementById('customCSVButton');
CSVbutton.addEventListener('click', function (e) {
// // data // mime // name // extension
instance.export2file(exportDataCSV.data, exportDataCSV.mimeType, exportDataCSV.filename, exportDataCSV.fileExtension);
});
</script>
</body>
</html>