• Skip to main content
  • Skip to secondary menu
  • Skip to primary sidebar
  • Skip to secondary sidebar

CodingStatus

- Level Up Your Status with Coding Expertise!

  • Tutorials
    • React Js Tutorials
    • JavaScript Tutorials
    • PHP Tutorials
    • HTML Tutorials
    • SQL Tutorials
    • Laravel Tutorials
  • Snippets
    • React Js Code Snippets
    • Ajax Code Snippets
    • Node.js Code Snippets
    • JavaScript Code Snippets
    • jQuery Code Snippets
    • SQL Code Snippets
  • Programs
    • PHP Program
    • Python Programs
    • Java Programs
  • How To
    • React Js How To
    • Node Js How To
    • Ajax How To
    • PHP How To
    • jQuery How To
    • JavaScript How to
  • Scripts
    • PHP Script
    • Js Script
    • React Js Script
    • JQuery Script
  • Projects
    • PHP Project
  • Interview Questions
  • Guide
  • API Integration
  • Installation

Export HTML Table Data to Excel File Using javaScript

June 2, 2020 By Md Nurullah

If you want to Export HTML Table Data to Excel file using javascript for offline use. You can quickly do it with my javascript source code. I have provided a general script to use multiple times. This script is explained with a simple example. But you can easily implement it with any type of HTML table.

Exporting HTML Table to Excel is the most popular & common feature. Every Web application needs this feature to export the largest table data to excel format. Even It will work with dynamic table data coming from the database.

export html table data to excel using javascript

Table of Contents

  • What is HTML Table?
  • What is Excel File?
  • How to Export HTML Table Data to Excel
    • 1. Create HTML Table With Data
    • 2. Export HTML Table Data to Excel using Javascript
    • My Suggestion

What is HTML Table?

An HTML table is a group of rectangle cells that is used to store data in the form of rows & columns.

You can create an HTML table using the following elements –

  • <table></table> – for creating a table
  • <theader></theader> – to create a table header
  • <tbody></tbody> – for creating a table body
  • <tr></tr> – to create a table row
  • <th></th> – to create a table heading
  • <td></td> – for creating a table data/cell
  • <tfooter></tfooter> – to create a table footer

What is Excel File?

Excel File is a spreadsheet that is created by Microsoft for different operating systems like Windows, Mac & Linux.

Using Excel File, You can easily calculate, edit, view, modify data. Even you can quickly manage &  share the largest data in the form of a table.

Excel File has lots of features that help us to perform complex & largest tasks quickly. You can know more from its official website. To get the best information, you can search ‘excel’ on the google.

How to Export HTML Table Data to Excel

I’m going to learn you how to export HTML table data to excel using javascript. But before starting the next steps, You should have knowledge of basic HTML. Even Excel software must be installed on your computer.

You can convert  HTML Table data to excel format by clicking an HTML button. Whenever you click the HTML button, Table data will begin to converted automatically on an excel file. After that, then you can view & edit table data in an excel file.

Read Also –

Convert HTML to PDF Using javaScript

Now, configure the following steps. It is very simple to understand & learn.

1. Create HTML Table With Data

Create an HTML table with a few data. Even declare table id="tableData" within opening HTML tag. Table id will be used to access for exporting its data using javascript.

Also, create an HTML button with  id="export" . This button will be used to execute javascript code exporting table tada.

You must include an external javascript file custom.js in the following HTML file.

File Name – index.php

<!DOCTYPE html>
<html>
<body>
<button id="export">Export Now</button>
<table id="tableData" border="1" cellpadding="5" cellspacing="0">
    <tr>
        <th>S.N</th>
        <th>Full Name</th>
        <th>Gender</th>
        <th>Age</th>
        <th>City</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Noor Khan</td>
        <td>Male</td>
        <td>25</td>
        <td>Patna</td>
    </tr>
 <tr>
        <td>2</td>
        <td>Sunil Kumar</td>
        <td>Male</td>
        <td>24</td>
        <td>Chennai</td>
    </tr>
 <tr>
        <td>3</td>
        <td>Monika Kumari</td>
        <td>Female</td>
        <td>20</td>
        <td>Noida</td>
    </tr>
     <tr>
        <td>4</td>
        <td>Ayush Aryan</td>
        <td>Male</td>
        <td>26</td>
        <td>Patna</td>
    </tr>
     <tr>
        <td>5</td>
        <td>Avaneesh Mishra</td>
        <td>Male</td>
        <td>25</td>
        <td>New Delhi</td>
    </tr>
</table>
<script src="custom.js" type="text/javascript"></script>
</body>
</html>

 

2. Export HTML Table Data to Excel using Javascript

You have to do the following works for exporting HTML table data to excel.

  • Select the HTML button through its id and create  onclick function with it.
  • Get the value of the table id and store it in a variable tableId.
  • call custom function htmlTableToExcel(tableId, filename = '') and pass the value of the table id tableId or filename as a parameter. This function will convert Table data to excel on the HTML button click.

File Name – custom.js

    document.getElementById('export').onclick=function(){
        var tableId= document.getElementById('tableData').id;
        htmlTableToExcel(tableId, filename = '');
    }


   var htmlTableToExcel= function(tableId, fileName = ''){

    var excelFileName='excel_table_data';
    var TableDataType = 'application/vnd.ms-excel';
    var selectTable = document.getElementById(tableId);
    var htmlTable = selectTable.outerHTML.replace(/ /g, '%20');
    
    filename = filename?filename+'.xls':excelFileName+'.xls';
    var excelFileURL = document.createElement("a");
    document.body.appendChild(excelFileURL);
    
    if(navigator.msSaveOrOpenBlob){
        var blob = new Blob(['\ufeff', htmlTable], {
            type: TableDataType
        });
        navigator.msSaveOrOpenBlob( blob, fileName);
    }else{
        
        excelFileURL.href = 'data:' + TableDataType + ', ' + htmlTable;
        excelFileURL.download = fileName;
        excelFileURL.click();
    }
}

 

My Suggestion

Dear Developer, I hope you have understood the above javascript code. Now, you are able to quickly export another largest & complex table data. If you like my tutorial, share it with your friends.

If you have any queries or suggestions related to web development coding. you can ask me through the comment box. I will definitely reply as soon as possible.

Filed Under: JavaScript Code Snippets

Hello Developer, Welcome to my Blog. I'm Md Nurullah, a software engineer with 5+ years in full-stack web development. As the founder of CodingStatus.com, I'm passionate about sharing coding knowledge and collaborating for a brighter future. Let's connect and code together!

Primary Sidebar

Secondary Sidebar

JavaScript Code Snippets,
  • Dynamic tree view in React JS
  • Detect an Internet Connection using JavaScript
  • Get Query String Value From URL Using JavaScript
  • JavaScript Password Strength Checker
  • Fill Current Address same as Permanent address in JavaScript
  • HTML to PDF in JavaScript – Convert Web Page to PDF File
  • Javascript Redirect URL to Another Web Page
  • JavaScript Form Validation
  • PHP MySQL Connection | Connect PHP To MySQL Database
  • Export HTML Table Data to Excel File Using javaScript
  • Home
  • About Us
  • Privacy Policy
  • Disclaimer
  • Terms & Conditions
  • Sitemap
  • Contact Us

Copyright © 2023 CodingStatus - All Rights Reserved