Export HTML Form Data To Excel Using JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Dikshita
In this article we will show you the solution of export html form data to excel using JavaScript, any business can benefit greatly from the Data List web application's data export to Excel function.
Each time, exporting data using the custom export option makes it possible to download the table's data list in an Excel file or CSV format for usage offline.
I had to perform that on several real projects as a web developer. Excel format is the best for exporting data to files in businesses.
The majority of the time, we exported data using PHP employing server-side methods to Excel.
Javascript, however, makes it simple for export table data into Excel utilising a client-side view. Let's talk about the idea of exporting data from an HTML form to Excel via javascript.
Step By Step Guide On Export Html Form Data To Excel Using Javascript :-
Nearly all web applications that handle data have an Excel export option that is quite helpful.
The data list can be downloaded as just a file format of offline use with the help of the export feature.
<html>
<head>
<title> Export html form data to excel using javascript </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >
<script type="text/javascript">
function exportToExcel(tableID, filename = ''){
var downloadurl;
var dataFileType = 'application/vnd.ms-excel';
var tableSelect = document.getElementById(tableID);
var tableHTMLData = tableSelect.outerHTML.replace(/ /g, '%20');
filename = filename?filename+'.xls':'export_excel_data.xls';
downloadurl = document.createElement("a");
document.body.appendChild(downloadurl);
if(navigator.msSaveOrOpenBlob){
var blob = new Blob(['\ufeff', tableHTMLData], {
type: dataFileType
});
navigator.msSaveOrOpenBlob( blob, filename);
}else{
downloadurl.href = 'data:' + dataFileType + ', ' + tableHTMLData;
downloadurl.download = filename;
downloadurl.click();
}
}
</script>
</head>
<body>
<div class="container">
<table id="tblexportData" class="table">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Age</th>
<th>Mobile</th>
</tr>
</thead>
<tbody>
<tr>
<td>Harry</td>
<td>harry@gmail.com</td>
<td>01</td>
<td>9999999999</td>
</tr>
<tr>
<td>Mike</td>
<td>mike@gmail.com</td>
<td>0</td>
<td>9999999999</td>
</tr>
<tr>
<td>Romeo</td>
<td>romeo@gmail.com</td>
<td>03</td>
<td>9999999999</td>
</tr>
<tr>
<td>Tommy</td>
<td>tommy@gmail.com</td>
<td>04</td>
<td>9999999999</td>
</tr>
</tbody>
</table>
<button onclick="exportToExcel('tblexportData', 'user-data')" class="btn btn-success">Export Table Data To Excel File</button>
</div>
</body>
</html>
- We begin by including the title for the web page in the HTML & Head elements of our code.
- Then, we link the CSS stylesheet for Bootstrap in our code. Then we begin the script.
- The data from the HTML table is then converted to an Excel spreadsheet using the exportTableToExcel() function, which also requires the table id and file name.
- Then, we define several variables with the values getelementbyid, tablehtmldata, and downloadurl, datafiletype, etc.
- Next we make a download link element after specifying the file name.
- After that, to navigate the data or file, we employ the if else statement.
- Next, we specify the file name & activate the function before creating a link to a file name.
- At this point, our script comes to an end and the body of the code, which contains the div class container, begins.
- Next, the table is created with the appropriate class and ID.
- We enter some random information such as name, email, age, and mobile number into that table.
- Next, we design the button whose onclick event executes the exporttoexcel method.
- DIV, BODY, and HTML tags serve as the last code tags.
Conclusion :-
So we were able to understand the idea of exporting data from an HTML form to Excel using javascript.
We also learned that the best format for exporting data into a file is Excel.
PHP's server-side technique is typically used to export data to Excel.
JavaScript, however, makes it simple for export table data into Excel if you prefer a client-side approach.
The web application is user-friendly thanks to the client-side export functionality.
The data from an HTML table can be quickly exported using JavaScript without refreshing the page.
I hope this article on export html form data to excel using JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Dikshita
