Home > JavaScript > Export HTML Table to Excel (XLSX or XLS) Using JavaScript

Export HTML Table to Excel (XLSX or XLS) Using JavaScript

In this tutorial, we will learn about how to export an HTML table to an excel file (XLSX or XLS) using javascript.

There are many libraries that you can use to convert your HTML table data into excel (XLSX or XLS) file. So in this tutorial, we will see two examples, one with a library and the second without the library only pure javascript.

Let’s get started.

Export HTML Table to Excel (XLSX or XLS) File with Libraries

First, we will see how to use third-party libraries to convert HTML table data to XLSX or XLS format and download it as an excel file.

As I said there are many libraries that you can use but for now we will take references from two libraries and convert HTML to excel using them.

Using TabletoExcel Library

The TabletoExcel library is very simple and easy to use. You can export your HTML table to valid excel file effortlessly.

You just have to embed this library in your page where the HTML table shows that you want to convert it into an excel file.

Create an HTML page for example and have a sample table as follows.

Now just add the following script tag for the TabletoExcel library to your page’s footer. You can also add a CDN link.

Now we will write a javascript code using the library function to export the HTML table to an excel file in XLSX or XLS format.

In the above code, we used the convert() function of the TabletoExcel library to convert the HTML data to an excel file. Then we get the table content by ID and pass the file name and sheet name parameters.

Using TableExport Library

The TableExport library is also easy to implement on your web page to export the HTML table to an excel file in .xlsx or .xls format.

You can also use this library to convert HTML table to CSV, and text files.

To use this library, you also have to include the FileSaver.js library along with TableExport library before closing the <body> tag of HTML document.

Let’s take the same above HTML table for reference. You can create your own as your requirements or use the existing one.

Add the following script tag for the TableExport library to your page’s footer before closing the <body> tag. You can also add a CDN link.

Note: If you want to export the HTML table to XLSX file format then you also have to add one more library script tag for xlsx core.

Now it’s ready. Now we can use this library’s function to make the javascript onclick function export the HTML table to an excel file.

Here in the above code, we used the TableExport function by passing the table ID and additional parameters for filename, sheet name, default formats, etc. There are more parameters you can check here.

Export HTML Table to Excel (XLSX or XLS) File without Library

Now we will make a pure javascript functionality to convert the HTML table data into an excel file and export it in XLS file format.

Let’s see how to export the HTML table to excel without any third-party library and only with pure javascript.

Let’s take the same above HTML table that we want to convert and export to an excel file. See the following javascript code.

In the above code, we made a javascript function called topStudents_sheet() and take the important variables like dataType, table content, etc.

Then take the filename with the .xls extension and then create a download link dynamically and then use javascript the blob function to convert the HTML table to an excel file and download it.

You can run this function on click event to targetting to table. So simply add the button to your page and add the click event for it as follows.

You can target the specific table ID and give the dynamic filename by modifying the above function and button code by passing the table ID and filename as function parameters.

Hope it is helpful for you. Please send your opinions or suggestions in your comment sections. Also, share this tutorial with your friends.

Photo of author

About Aman Mehra

Hey there! I'm Aman Mehra, a full-stack developer with over six years of hands-on experience in the industry. I've dedicated myself to mastering the ins and outs of PHP, WordPress, ReactJS, NodeJS, and AWS, so you can trust me to handle your web development needs with expertise and finesse. In 2021, I decided to share my knowledge and insights with the world by starting this blog. It's been an incredible journey so far, and I've had the opportunity to learn and grow alongside my readers. Whether you're a seasoned developer or just dipping your toes into the world of web development, I'm here to provide valuable content and solutions to help you succeed. So, stick around, explore the blog, and feel free to reach out if you have any questions or suggestions. Together, let's navigate the exciting world of web development!

Leave a Comment