find and solve || findandsolve.com
Please wait.....

Export(Convert) HTML Table To Excel Using JavaScript-.NET Core

Export(Convert) HTML Table To Excel Using JavaScript-.NET Core


Export data to Excel is the must important and very useful on the data list for nearly every web application.The export feature helps to download the list of data from html table.Mostly the server-side method is used for export data list to excel using  C#.But if you want a client-side solution to export html table data list to excel format, it can be easily done by multiple JavaScript function.

In the client-side export excel functionality makes the web application user-friendly and also easy to use. Using JavaScript, the HTML table data list can be easily exported without page refresh but in the many more  data list,javascript function is not working convert html table to excel.In the case we should  use c# language and export data. In this blog, we will show you how to export HTML table data to excel using different type of  JavaScript functioin.The JavaScript export functionality can be used in the Studnet product list, or other lists to download the data list in excel file format.

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 and created an HTML table using the following elements as like given below.

  1. <table></table> – for creating a table
  2. <theader></theader> – to create a table header
  3. <tbody></tbody> – for creating a table body
  4. <tr></tr> – to create a table row
  5. <th></th> – to create a table heading
  6. <td></td> – for creating a table data/cell
  7. <tfooter></tfooter> – to create a table footer

Export HTML Table Data to Excel

First create html table like as give below.

<button class="btn btn-primary" id="exportTableToExcel">
<i class="fa fa-file-excel-o">
</button>
<table class="table table-responsive" id="tableToExcel">
  <thead>
   <tr class="headings">
    <th class="column-title">S.N</th>
    <th class="column-title">Code</th>
    <th class="column-title">Name</th>
    <th class="column-title">Class</th>
    <th class="column-title">Email</th>
    <th class="column-title">S.Phone</th>
    <th class="column-title">A.Phone</th>
    <th class="column-title">Father Name</th>
    <th class="column-title">Mother Name</th>
    <th class="column-title">Parent Phone</th>
   </tr>
  </thead> <tbody>     <tr class="even pointer">       <td>1</td>       <td> NSB-46-281 </td>       <td>Prashuna Tamang Bomjan</td>       <td>Play Group</td>       <td></td>       <td>9844254430</td>       <td></td>       <td>No</td>       <td>No</td>       <td></td>      </tr>      <tr class="even pointer">       <td>2</td>       <td> NSB-46-282</td>       <td>Andish Gimire</td>       <td>Play Group</td>       <td></td>       <td>9812048984</td>       <td></td>       <td>Arjun Gimire</td>       <td>Kumari Gimire</td>       <td></td>      </tr>      <tr class="even pointer">        <td>3</td>        <td>NSB-46-283</td>        <td>Supriya Khadka</td>        <td>Play Group</td>        <td></td>         <td>9844950571</td>         <td></td>         <td>No</td>         <td>No</td>         <td></td>        </tr>       <tr class="even pointer">         <td>4</td>         <td>NSB-46-284</td>         <td>Dipen Gole</td>         <td>Play Group</td>         <td></td>         <td></td>         <td></td>         <td>No</td>         <td>No</td>         <td></td>        </tr>        <tr class="even pointer">         <td>5</td>          <td> NSB-46-285</td>          <td>Sonika Lama</td>          <td>Play Group</td>         <td></td>          <td>9823548698</td>          <td></td>          <td>No</td>          <td>No</td>          <td></td>         </tr>        </tbody>     </table>

Option 1.

Create javascript like as given below.

$('#exportTableToExcel').click(function () {
    var downloadLink;
    var dataType = 'application/vnd.ms-excel';
    var tableSelect = document.getElementById('tableToExcel');
    var tableHTML = tableSelect.outerHTML.replace(/ /g, '%20');
    // Specify file name
    filename = 'myFile' + '.xls' : 'excel_data.xls';
    // Create download link element
    downloadLink = document.createElement("a");
    document.body.appendChild(downloadLink);
    if (navigator.msSaveOrOpenBlob) {
        var blob = new Blob(['\ufeff', tableHTML], {
            type: dataType
        });
        navigator.msSaveOrOpenBlob(blob, filename);
    } else {
        // Create a link to the file
        downloadLink.href = 'data:' + dataType + ', ' + tableHTML;
        // Setting the file name
        downloadLink.download = filename;
        //triggering the function
        downloadLink.click();
    }
})

Option 2.

$('#exportTableToExcel').click(function () {
    str = "";
    var tableId = document.getElementById('tableToExcel');
    var rowCount = tableId.rows.length;
    var colCount = tableId.getElementsByTagName("tr")[0].getElementsByTagName("th").length;
    var ExcelApp = new ActiveXObject("Excel.Application");
    var ExcelSheet = new ActiveXObject("Excel.Sheet");
    ExcelSheet.Application.Visible = true;
    for (var i = 0; i < rowCount; i++) {
        for (var j = 0; j < colCount; j++) {
            str = tableId.getElementsByTagName("tr")[i].getElementsByTagName("th")[j].innerHTML;
            ExcelSheet.ActiveSheet.Cells(i + 1, j + 1).Value = str;
        }
    }
});

Option 3.

 In Chrome, Mozilla and Safari

add link in your html page like as given below

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

then

$(function() {
  $('#exportTableToExcel').click(function() {
    var url = 'data:application/vnd.ms-excel,' + encodeURIComponent($('#tableToExcel').html())
    location.href = url
    return false
  })
});

Note:

 I hope I have address html table convert or export to excel in the above using javascript code.Add export functionality in the HTML table without any third-party jQuery plugin or server-side script in the first and second option. You can easily export the html table data list using minimal JavaScript code.In the Option 3  using third party jQuery plugin and export html table data into excel.

Selena  Kandakar

Selena Kandakar

I like working on projects with a team that cares about creating beautiful and usable interfaces.

Comments



Report Response