Excel files are commonly used in business settings to manage data and create reports. Creating an Excel file can be a bit tricky, especially if you’re not familiar with programming. Fortunately, Sheet JS provides a simple way to create Excel files using JavaScript. In this blog post, we’ll show you how to use Sheet JS to create Excel file from HTML table and provide the HTML code and CDN you’ll need to get started.
Step 1: Set Up Your HTML Code
To get started, you’ll need to create an HTML file with a table that you want to export to Excel. Here’s an example of what your HTML file should look like:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Export HTML Table to Excel Using Sheet JS</title>
<script src="https://cdn.sheetjs.com/xlsx-0.19.2/package/dist/xlsx.full.min.js"></script>
</head>
<body>
<table id="myTable">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>30</td>
<td>Male</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>25</td>
<td>Female</td>
</tr>
<tr>
<td>Bob Johnson</td>
<td>40</td>
<td>Male</td>
</tr>
</tbody>
</table>
<button onclick="exportToExcel()">Export to Excel</button>
<script>
function exportToExcel() {
/* Your code to export the HTML table to Excel goes here */
}
</script>
</body>
</html>In the code above, we’ve included an HTML table with some sample data and a button that you’ll click to export the table to Excel. We’ve also included the Sheet JS CDN, which you’ll need to import into your HTML file to use Sheet JS.
Step 2: Export the HTML Table to Excel
Now that your HTML file is set up, you can start writing the code to export your table to Excel. Here’s an example of what your code might look like:
function exportToExcel() {
/* Select the HTML table */
var table = document.getElementById("myTable");
/* Convert the HTML table to a worksheet */
var worksheet = XLSX.utils.table_to_sheet(table);
/* Create a new workbook */
var workbook = XLSX.utils.book_new();
/* Add the worksheet to the workbook */
XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");
/* Export the workbook */
XLSX.writeFile(workbook, "example.xlsx");
}In the code above, we’re selecting the HTML table using its ID and using Sheet JS to convert the table to a worksheet. We’re then creating a new workbook and adding the worksheet to it. Finally, we’re exporting the workbook to an Excel file named “example.xlsx”. You can customize the code to export a table that meets your needs.
Step 3: Test Your Code
Once you’ve written your code, you can test it by clicking the “Export to Excel” button in your HTML file. When you click the button, Sheet JS will export the table to an Excel file based on the code you wrote.
Conclusion
Exporting HTML tables to Excel files using Sheet JS is a simple and powerful way to manage data and create reports. By following the steps above, you can get started with Sheet JS and create your own Excel files from HTML tables. Remember to customize your code to meet your specific needs, and feel free to experiment with different features and options offered by Sheet JS.