How to Convert HTML to Excel File using jQuery
Hello, web developers! In this article, we'll see how to convert HTML to Excel using jQuery. Here, we'll use the jQuery plugin to convert HTML to an Excel file. You can click on the download button and Excel file download from the HTML.
Recently, I needed to convert an HTML table to an Excel file for a project I was working on. After some research and experimentation, I found an easy way to do it using jQuery and a library called SheetJS. Here's a step-by-step guide on how I did it.
SheetJS Community Edition offers battle-tested open-source solutions for extracting useful data from almost any complex spreadsheet and generating new spreadsheets.
How to Convert HTML to Excel File using jQuery
First, I created a simple HTML table that I wanted to convert to an Excel file. Here’s what my table looked like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML to Excel</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<table id="example-table" border="1">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>30</td>
<td>Los Angeles</td>
</tr>
</tbody>
</table>
<button id="export-button">Export to Excel</button>
</body>
</html>
Next, I included the SheetJS library in my project. This library helps with creating and manipulating Excel files.
<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script>
Then, I wrote a jQuery script to convert the HTML table to an Excel file and trigger the download when I clicked the button:
<script>
$(document).ready(function() {
$('#export-button').click(function() {
// Get the HTML table element
var table = document.getElementById('example-table');
// Convert the HTML table to a workbook
var workbook = XLSX.utils.table_to_book(table, {sheet: "Sheet1"});
// Generate an Excel file and trigger the download
XLSX.writeFile(workbook, 'example.xlsx');
});
});
</script>
You might also like:
- Read Also: How to Create Laravel 11 API with MongoDB Database
- Read Also: Top 20 jQuery Tricks and Tips with Example
- Read Also: Laravel 10 Generate PDF Using DomPDF
- Read Also: How To Convert HTML To PDF Using jsPDF
