---
title: How to Export Html table to Excel using JQuery
url: https://www.velsof.com/blog/how-to-export-html-table-to-excel-using-jquery/
date: 2026-03-16
type: blog_post
author: Velocity Software Solutions
categories: Blog
tags: Excel, How to export data, JQuery, table to Excel using JQuery, table2excel
---
*Last reviewed: November 2026.*
# 1. Introduction
This document describes how to export the HTML table data into excel using the jquery plugin table2Excel. This plugin is used to convert and download HTML tables to an xlsx-file that can be opened in Microsoft Excel. Data present between the <table> </table> tag will be exported only. All the detailed steps for using this library are defined later.
# 2. How to use table2excel
1. Create the html table and provide a button there through which user will able to export the data.
| <body>
<div>
<button onclick=”exportReport()” style=”background-color:#4CAF50;color:white;”>
Export to Excel
</button>
<br />
<br />
</div>
<div>
<table id=”studentTable”>
<thead>
<tr>
<th>
Student Name
</th>
<th>
Age
</th>
<th>
Marks
</th>
<th>
Board
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Rajeev
</td>
<td>
17
</td>
<td>
88
</td>
<td>
CBSE
</td>
</tr>
<tr>
<td>
Sandhya
</td>
<td>
18
</td>
<td>
67
</td>
<td>
CBSE
</td>
</tr>
<tr>
<td>
Ramesh
</td>
<td>
16
</td>
<td>
78
</td>
<td>
Bihar
</td>
</tr>
<tr>
<td>
Sanjay
</td>
<td>
17
</td>
<td>
89
</td>
<td>
CBSE
</td>
</tr>
<tr>
<td>
Ramya
</td>
<td>
18
</td>
<td>
90
</td>
<td>
UP
</td>
</tr>
</tbody>
</table>
</div>
</body> |
| --- |
2. Add some css and scripts in the header section. Add jquery and table2excel.js file under script section in the <head> tag. Create exportReport() method which will export the data of the table in the excel.
| <head>
<style>
#studentTable {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
}
#studentTable td, #studentTable th {
border: 1px solid #ddd;
padding: 8px;
}
#studentTable th {
padding-top: 6px;
padding-bottom: 6px;
text-align: left;
background-color: #4CAF50;
color: white;
}
</style>
<script src=”jquery.min.js” type=”text/javascript”></script>
<script src=”table2excelmodified.js” type=”text/javascript”></script>
<script type=”text/javascript”>
function exportReport() {
var table = $(“#studentTable”);
$(table).table2excel({
// exclude CSS class
exclude: “.noExl”,
name: “Student_List”,
filename: “Student_List_” + $.now(),//do not include extension
fileext: “.xls”, // file extension
preserveColors: true,
sheetName: “Student_List_”
});
}
</script>
</head> |
| --- |
3. Under table2excel method following are the options.
exclude: “.noExl”, -> the data will not export where ever the class is applied
name: “Student_List”,
filename: “Student_List_” + $.now(), -> provide the file name here
fileext: “.xls”, -> provide the file extension here
preserveColors: true, -> true when wants to preserve colors
sheetName: “Student_List_” -> provide the sheet name here
4. Open the html in browser and click on export button. The excel will be downloaded as mentioned in the below screenshot.
# 3. Source Code
| <!Doctype>
<html>
<head>
<style>
#studentTable {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
}
#studentTable td, #studentTable th {
border: 1px solid #ddd;
padding: 8px;
}
#studentTable th {
padding-top: 6px;
padding-bottom: 6px;
text-align: left;
background-color: #4CAF50;
color: white;
}
</style>
<script src=”jquery.min.js” type=”text/javascript”></script>
<script src=”table2excelmodified.js” type=”text/javascript”></script>
<script type=”text/javascript”>
function exportReport() {
var table = $(“#studentTable”);
$(table).table2excel({
// exclude CSS class
exclude: “.noExl”,
name: “Student_List”,
filename: “Student_List_” + $.now(),//do not include extension
fileext: “.xls”, // file extension
preserveColors: true,
sheetName: “Student_List_”
});
}
</script>
</head>
<body>
<div>
<button onclick=”exportReport()” style=”background-color:#4CAF50;color:white;”>
Export to Excel
</button>
<br />
<br />
</div>
<div>
<table id=”studentTable”>
<thead>
<tr>
<th>
Student Name
</th>
<th>
Age
</th>
<th>
Marks
</th>
<th>
Board
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Rajeev
</td>
<td>
17
</td>
<td>
88
</td>
<td>
CBSE
</td>
</tr>
<tr>
<td>
Sandhya
</td>
<td>
18
</td>
<td>
67
</td>
<td>
CBSE
</td>
</tr>
<tr>
<td>
Ramesh
</td>
<td>
16
</td>
<td>
78
</td>
<td>
Bihar
</td>
</tr>
<tr>
<td>
Sanjay
</td>
<td>
17
</td>
<td>
89
</td>
<td>
CBSE
</td>
</tr>
<tr>
<td>
Ramya
</td>
<td>
18
</td>
<td>
90
</td>
<td>
UP
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html> |
| --- |
# 3. Advantages of the plugin
1. No need to code on the server-side for exporting any data which is available at web pages in tabular format.
2. Reduces the chances of error occurs.
3. Time-saving process.
# 4. Disadvantages of the plugin
1. This plugin will only export only first page if server-side pagination is using in the table.
Check out more at [velsof.com](https://www.velsof.com/)
# Frequently Asked Questions
## How do I export an HTML table to Excel using JavaScript without jQuery?
Use the **SheetJS (xlsx.js)** library — it has no jQuery dependency and supports modern .xlsx (Excel 2007+) format. Include it via CDN, then: `const wb = XLSX.utils.table_to_book(document.getElementById('myTable')); XLSX.writeFile(wb, 'export.xlsx');`. SheetJS handles cell types, formulas, dates, and styling far better than the old TableExport.js + .xls approach. For a CDN-free build, install via npm: `npm install xlsx`.
## Can I export an HTML table to .xlsx (Excel 2007+) instead of .xls?
Yes. The TableExport.js plugin shown above produces .xls (the old binary format) which works but throws a “file format doesn’t match extension” warning in newer Excel versions. To export native .xlsx (OpenXML), switch to **SheetJS (xlsx.js)** — it generates fully-compliant .xlsx files that Excel, Google Sheets, and LibreOffice open without warnings. The migration is straightforward: replace `$('#myTable').tableExport({type:'excel'})` with `XLSX.writeFile(XLSX.utils.table_to_book(document.getElementById('myTable')), 'export.xlsx')`.
## Why does my exported Excel file show formatting issues or “file corrupted” warnings?
Three common causes: **(1) wrong MIME type / extension mismatch** — the file is HTML pretending to be .xls. Excel opens it but warns the user. Fix: use a library that produces real binary .xls (SheetJS, ExcelJS) instead of HTML-to-Excel hacks. **(2) Incorrect cell types** — numbers exported as strings, dates as text. SheetJS lets you set `cellDates: true` and explicit cell types. **(3) Special characters not UTF-8 encoded** — non-ASCII characters (Hindi, Chinese, emoji) appear as garbled text. Ensure your HTML page is served with `Content-Type: text/html; charset=utf-8` and that the export library properly handles UTF-8.
## How do I export HTML table data when server-side pagination is in use?
Client-side libraries (TableExport.js, SheetJS) only see the rows currently rendered in the DOM. If your table has 10,000 rows but only 50 are visible (paginated by server), the export will only contain those 50. Solutions: **(1)** Add a separate “Export All” button that triggers a server-side endpoint returning the full dataset as .xlsx (use ExcelJS in Node, OpenPyXL in Python, Apache POI in Java, or EPPlus in .NET). **(2)** Use AJAX to fetch all rows, render them off-screen, then run the client-side export. **(3)** Stream a CSV from the server — Excel opens CSV directly and it’s the fastest format to generate at scale.
## What are the best jQuery plugins for table export besides TableExport.js?
The most-used jQuery table-export options are: **DataTables Buttons extension** (Excel, CSV, PDF, print, copy — most polished, requires DataTables), **jQuery.table2excel** (lightweight, .xls output only, well-maintained), **jQuery-table-to-excel** (simplest API, smallest footprint), and **TableExport.js** (shown in this tutorial — supports .xls, .csv, .txt, .doc). For new projects in 2026, we’d recommend dropping jQuery entirely and using **SheetJS** — the .xlsx output is correct, the bundle is smaller, and it works with any framework (React, Vue, Angular, vanilla JS).
## How do I add a download button to export an HTML table to Excel?
With the TableExport.js plugin used in this tutorial, the plugin auto-injects download buttons when you initialize it: `$('#myTable').tableExport({formats: ['xlsx', 'csv'], position: 'top'});`. With SheetJS, wire a manual button: `<button onclick="exportTable()">Download Excel</button>` and the JS handler `function exportTable() { XLSX.writeFile(XLSX.utils.table_to_book(document.getElementById('myTable')), 'data.xlsx'); }`. Style the button with your own CSS — the plugins don’t enforce any visual styling on the button.
## What’s the difference between exporting to .xls, .xlsx, and .csv?
**.xls** is the legacy Excel 97–2003 binary format. Smaller file size for simple data, but limited to 65,536 rows and 256 columns. **.xlsx** is Excel 2007+ OpenXML — a zipped XML archive supporting 1,048,576 rows × 16,384 columns, cell formulas, formatting, charts, and pivot tables. **.csv** (Comma Separated Values) is plain text — universally readable, fastest to generate, smallest file, but loses all formatting, formulas, and multi-sheet structure. For most analytics exports, **.csv** is the right choice (works in Excel, Google Sheets, Python, R, Tableau). For invoices, reports with formatting, or anything end-users will open in Excel, choose **.xlsx**.