Skip to content

Instantly share code, notes, and snippets.

@kiritodeveloper

kiritodeveloper/export-excel-by-js.markdown

Created August 16, 2020 18:27
Show Gist options
  • Save kiritodeveloper/8bb6b0b4ab766272a9658653fe6dc089 to your computer and use it in GitHub Desktop.
Save kiritodeveloper/8bb6b0b4ab766272a9658653fe6dc089 to your computer and use it in GitHub Desktop.
Download ZIP
export excel by JS
Raw
index.html
<html>
<head></head>
<body>
<div class="container">
<h2>Bordered Table</h2>
<p>The .table-bordered class adds borders to a table:
<button type="button" class="btn saveAsExcel">export excel</button>
</p>
<div class="wrapper">
<table id="mytable" class="table table-bordered exportable">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@example.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Raw
script.js
$(document).ready(function(){
$(".saveAsExcel").click(function(){
var workbook = XLSX.utils.book_new();
//var worksheet_data = [['hello','world']];
//var worksheet = XLSX.utils.aoa_to_sheet(worksheet_data);
var worksheet_data = document.getElementById("mytable");
var worksheet = XLSX.utils.table_to_sheet(worksheet_data);
workbook.SheetNames.push("Test");
workbook.Sheets["Test"] = worksheet;
exportExcelFile(workbook);
});
})
function exportExcelFile(workbook) {
return XLSX.writeFile(workbook, "bookName.xlsx");
}
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.12.13/xlsx.full.min.js"></script>
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment