tableexport
Version:
The simple, easy-to-implement library to export HTML tables to xlsx, xls, csv, and txt files
159 lines (142 loc) • 5.38 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Filename</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>Filename<span class="small">- string</span>
<code class="small">filename: 'super-secret-data'</code>
<span class="note"> ... OR any <code>string</code> besides <code>"id"</code></span>
</h1>
<table id="filename-table-1">
<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>
<p class="info">export the table to <code>.xlsx</code> and look at the filename of the downloaded file. Compared to the export from the <b>defaults</b> table above, you will notice that, <code>filename: 'super-secret-data'</code><i>creates a download with the same name as the provided string </i>(<b>super-secret-data</b>.xls)<i> instead of the table element's</i> <code>id</code>.</p>
</main>
<br>
<main>
<h1>Filename<span class="small">- falsey</span>
<code class="small">filename: false</code>
<span class="note"> ... OR any <code>falsey: false|null|undefined|""</code> value</span>
</h1>
<table id="filename-table-2">
<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>
<p class="info">
export the table to <code>.xlsx</code> and look at the filename of the downloaded file. Compared to the export from the <b>defaults</b> table above, you will notice that, <code>filename: false</code><i> uses a <b>fallback</b> value for the filename; the fallback (or default) can be configured with the </i>(<code>defaultFilename</code> prototype property).
</p>
<p>
<b>NOTE:</b> <code>defaultFilename</code> is also used for <code>filename: 'id'</code> if the export <i>table</i> element does <b>NOT</b> have an <code>id</code> attribute.
</p>
<br>
</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>
// Default filename if `filename: false|null|undefined|""`
TableExport.prototype.defaultFilename = 'fallback-name';
// **** jQuery **************************
// $.fn.tableExport.defaultFilename = 'fallback-name';
// **************************************
var FilenameTable1 = document.getElementById('filename-table-1');
new TableExport(FilenameTable1, {
filename: 'super-secret-data'
});
// **** jQuery **************************
// $(FilenameTable1).tableExport({
// filename: 'super-secret-data'
// });
// **************************************
var FilenameTable2 = document.getElementById('filename-table-2');
new TableExport(FilenameTable2, {
filename: false // OR null OR undefined OR ""
});
// **** jQuery **************************
// $(FilenameTable2).tableExport({
// filename: null
// });
// **************************************
</script>
</body>
</html>