javascript export to excel Example

javascript export to excel: Learn how to import and export Excel files, and provide users with an interface to interact with those files, all in pure JavaScript Source code.

A quick JavaScript library to create export to Excel/CSV from HTML tables in the browser.

javascript export to excel

Export HTML Table Data to Excel using JavaScript : How in javascript export html table data into excel (.xslx). Easily convert HTML table data, into an excel file.

Steps to export HTML table to excel using JavaScript

HTML Markup: index.html
Add table with data and button tag.

<table id="tbl_exporttable_to_xls" border="1">
	<thead>
		<th>Sr</th>
		<th>Name</th>
		<th>Address</th>
		<th>Job Profile</th>
	</thead>
	<tbody>
		<tr>
			<td>1</td>
			<td><p>Kishan Tala</p></td>
			<td>Ganesh</td>
			<td>Laravel Devloper</td>
		</tr>
		<tr>
			<td>2</td>
			<td><p>Mayur Dhameliya</p></td>
			<td>Swati</td>
			<td>AngularJS Devloper</td>
		</tr>
		<tr>
			<td>3</td>
			<td><p>Rekha Talpada</p></td>
			<td>Ranjua</td>
			<td>PHP Devloper</td>
		</tr>           
	</tbody>
</table>
<button onclick="ExportToExcel('xlsx')">Export table to excel</button>

Download and Import SheetJS Library on our webpage

<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/xlsx.full.min.js"></script>

JavaScript code

Using Sheetjs library export table data into an excel file.

function ExportToExcel(type, fn, dl) {
       var elt = document.getElementById('tbl_exporttable_to_xls');
       var wb = XLSX.utils.table_to_member(elt, { sheet: "sheet1" });
       return dl ?
         XLSX.write(wb, { memberType: type, memberSST: true, type: 'base64' }):
         XLSX.writeFile(wb, fn || ('MySheetName.' + (type || 'xlsx')));
    }

Example 2: Export HTML Table Data to Excel using JavaScript

Export HTML Table Data to Excel

function exportTableToExcel(tableID, docname = ''){
    var fourceDLink;
    var dataType = 'application/vnd.ms-excel';
    var tableSelect = document.getElementById(tableID);
    var tableHTML = tableSelect.outerHTML.replace(/ /g, '%20');
    
    docname = docname?docname+'.xls':'excel_data.xls';
    
    fourceDLink = document.createElement("a");
    
    document.body.appendChild(fourceDLink);
    
    if(navigator.msSaveOrOpenBlob){
        var blob = new Blob(['\ufeff', tableHTML], {
            type: dataType
        });
        navigator.msSaveOrOpenBlob( blob, docname);
    }else{
        fourceDLink.href = 'data:' + dataType + ', ' + tableHTML;
    
        fourceDLink.download = docname;
        
        fourceDLink.click();
    }
}

HTML Code

<table id="memberInfo">
    <tr>
        <th>Name</th>
        <th>Email</th>
        <th>City</th>
    </tr>
    <tr>
        <td>Krishna Dave</td>
        <td>[email protected]</td>
        <td>Rajkot</td>
    </tr>
    <tr>
        <td>Jagruti Bhavshdiya</td>
        <td>[email protected]</td>
        <td>Surat</td>
    </tr>
    <tr>
        <td>Hitesh Ajera</td>
        <td>[email protected]</td>
        <td>Kalavad</td>
    </tr>
</table>

<button onclick="exportTableToExcel('memberInfo')">Export Table Data To Excel File</button>
<button onclick="exportTableToExcel('memberInfo', 'members-data')">Export Table Data To Excel File</button>

Don’t Miss : JavaScript export to Excel with formatting

Also Read This ๐Ÿ‘‰   List of JavaScript Objects and Functions with Example

I hope you get an idea about javascript export to excel.
I would like to have feedback on my infinityknow.com.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, donโ€™t forget to share.