Exporting HTML Table to Excel using JavaScript

by deepak8 Updated: Dec 20, 2022

Guide Kit

An HTML table is a structured data set in a tabular format consisting of rows and columns of cells containing data. You can create an HTML table using the <table> element, along with the <tr> and <td> elements, to define rows and columns, respectively. JavaScript can be used to give webpages dynamic capabilities and interactivity. An HTML table can modify with JavaScript by adding or removing rows and columns, changing the values of individual cells, sorting the data, and exporting the table.

A JavaScript library called ExcellentExport.js can export data from an HTML table to an Excel file. The library offers a straightforward and user-friendly API for producing the Excel file, and it is simple to incorporate into any web application. You must first use the <script> tag to include the ExcellentExport.js library in your HTML page before you can use it.

You can build an Excel file from an HTML table using the library's excel() function after it has been included. The following arguments are taken by the excel() function:

this: Current context of the script
table: HTML table element to be exported
name: Name for the Excel file
worksheetName: The name of the Excel worksheet ('optional'; the default is "Worksheet")

To export an HTML table to Excel using JavaScript with the ExcellentExport.js library, you can use the following code:

PS: Sample screenshot of the webpage and excel downloaded with it

Code

In this solution we have created a table and exported that into excel using excellentexport script

Excel Formatting table2excel.js

JavaScriptLines of Code : 17License : Strong Copyleft (CC BY-SA 4.0)

<script src="excellentexport.js"></script>

<table id="ExcelTable">
  <tr>
    <td style="color:red">Column 1</td>
    <td style="color:blue">Column 2</td>
    <td style="color:green; font-weight:bold">Column 3</td>
  </tr>
  <tr style="color: purple">
    <td>400</td>
    <td>500</td>
    <td>600</td>
  </tr>
</table>

<a download="myFile.xls" href="#" onclick="return ExcellentExport.excel(this, 'ExcelTable', 'Sheet1');">Export to Excel</a>

Copy the code snippet and insert into a standard HTML template.
Add the below script in the HTML

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/excellentexport@3.4.3/dist/excellentexport.min.js"></script>

Run the HTML to see the webpage
Click the Export to Excel to download the table as excel

I found this code snippet by searching for "Excel formatting" in kandi. You can try any such use case!

Environment Tested

I tested this solution in the following versions. Be mindful of changes when working with other versions.

The solution is created in HTML5 and excellentexport v3.4.3
The solution is tested on chrome browser

Support

For any support on kandi solution kits, please use the chat
For further learning resources, visit the Open Weaver Community learning page.

Open Weaver – Develop Applications Faster with Open Source

Terms
Privacy policy

Exporting HTML Table to Excel using JavaScript

Code

Environment Tested

Support

Open Weaver – Develop Applications Faster with Open Source

kandi

Community and Support

Company

Follow