Export html table to Excel with color

In this tutorial you can find the solution of How to Export or Download the HTML Table Data in Excel Sheet by using JavaScript. Exporting Data to Excel is required feature in our web application. Because by export data functionality will helps to download data from web application to different file format for offline use of data and for this excel format is an ideal for exporting data in file for offline use. There many tutorial we have published for export data to excel at server side scripting using PHP. But if we can perform at client-side for export data into Excel sheet, so it will reduce load on server. So for this for export data to excel , here we will use JavaScript for perform client-side export data to excel sheet.

The client-side export feature will makes our web application more user-friendly. So with the help of JavaScript, we can export HTML table data to Excel format without refresh of web page. Under this tutorial, you can learn How to export HTML table data to excel using JavaScript. In this tutorial, we will use SheetJS JavaScript Library for export HTML table data to Excel.


Export html table to Excel with color


Steps to Export HTML Table Data to Excel using JavaScript


  1. HTML Table Data:
  2. JavaScript Code:

1. HTML Table Data


For Export HTML data to Excel, here first we have to load some data in HTML table. So here we have make fetch employee table data and load in HTML table with table column like name, address, gender, designation and age. Here we have create HTML table with id employee_data. So this id we will use for fetch this HTML table data in JavaScript code. Under this HTML code we have make one button tag with id export_button, so when use has click on this button, then HTML table data will be download in Excel file format without refresh of web page using JavaScript.



View Demo



Download Source Code




query($query);

?>




	
	Export HTML table data to excel using JavaScript
	
    

    


    

Export HTML table data to excel using JavaScript

Sample Data
'; } ?>
Name Address Gender Designation Age
'.$row["name"].' '.$row["address"].' '.$row["gender"].' '.$row["designation"].' '.$row["age"].'




2. JavaScript Code


In this tutorial, we have use SheetJS JavaScript Library for export HTML table data to Excel using JavaScript. So first we have to include following SheetJS library link at header of this HTML web page.





In JavaScript code part, first we have make html_table_to_excel(type) function. This function has use SheetJS Library function and convert or Write HTML table data to Excel format and download in browser without refresh of web page.

Once function is ready then we have to called html_table_to_excel(type) function on button click event, so for trigger button click event, we have use addEventListener method. So when user has click on button then html_table_to_excel(type) function has been called with xlsx file type. So it will download HTML table data in .xlsx format Excel file in browser without refresh of web page at client-side.


function html_table_to_excel(type)
    {
        var data = document.getElementById('employee_data');

        var file = XLSX.utils.table_to_book(data, {sheet: "sheet1"});

        XLSX.write(file, { bookType: type, bookSST: true, type: 'base64' });

        XLSX.writeFile(file, 'file.' + type);
    }

    const export_button = document.getElementById('export_button');

    export_button.addEventListener('click', () =>  {
        html_table_to_excel('xlsx');
    });


Conclusion


This tutorial will helps you to add export feature of download HTML table data in Excel sheet without using third-party jQuery plugin or any server-side script. By follow this tutorial you can easily export HTML table data to Excel using minimal JavaScript code.


If you want to get complete source with .sql file, so please write your email address in comment box. We will send you complete source code file at your define email address.

How do I export an HTML table to Excel?

Export HTML tables to Excel using JavaScript First, we get the table by using the getElementsByID() function. Then, once we get the table from the page, we will use the library TableToExcel and convert it into Excel format. We will then define the names of the Excel file and Excel sheet after that.

How do I export HTML table Data as .CSV file?

Step 2: Convert table data into comma-separated values: Write a JavaScript function to retrieve the table data and convert it to comma-separated values. Make use of the document object model to access table data in each column of the rows. This function should be triggered when the user clicks the download button.

How to export a HTML table to Excel using JavaScript?

Steps to export HTML table to excel using JavaScript.
HTML Markup: Add table with some data..
Import SheetJS Library..
Javascript code: Using SheetJS library export table data into an excel file..

How to export HTML table to Excel in asp net c#?

Export DataTable to Excel Using HTML Text in C#.
Export to Excel using Interop objects..
Export to Excel by changing the content type of the HTTP response (applicable in web only).
Creating CSV or TSV (comma separated or tab separated file ).