Jquery plugin that exports an HTML table to JSON, CSV, TXT, or PDF and force the browser to download the generated file.
Live Demo
# | First | Last | Handle |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
How to Use
1. CSS
Add the css below to your html page
<link rel="stylesheet" media="all" href="bootstrap4.min.css" />
2. HTML
Create a container where you want to render table
<table class="table" id="example">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
<p class="lead">
<button id="json" class="btn btn-primary">TO JSON</button>
<button id="csv" class="btn btn-info">TO CSV</button>
<button id="pdf" class="btn btn-danger">TO PDF</button>
</p>
3. Javascript
Load jQuery library together with the TableHTMLExport library into your code
<script src="src/slim.min.js"></script>
<script src="src/jspdf.min.js"></script>
<script src="src/jspdf.plugin.autotable.min.js"></script>
<script src="src/tableHTMLExport.js"></script>
<script>
$('#json').on('click', function () {
$("#example").tableHTMLExport({
type: 'json',
filename: 'sample.json'
});
})
$('#csv').on('click', function () {
$("#example").tableHTMLExport({
type: 'csv',
filename: 'sample.csv'
});
})
$('#pdf').on('click', function () {
$("#example").tableHTMLExport({
type: 'pdf',
filename: 'sample.pdf'
});
})
</script>
Source Code
DownloadFor more Advanced Usages, please check the demo page or visit the official website.