How to Export HTML Table to Excel File in Asp.net Core MVC

In this article we learn a step by step process, How to Export HTML Table to Excel File in Asp.net Core MVC.

Also Check Previous Article Create Multi Select dropdownlist with checkbox in Asp.Net Core MVC C#

Prerequisites

• Download and install .Net Core 6.0 SDK from here
• Download and Install Microsoft Visual Studio 2022 from here

Create an Asp.Net Core Web App

• Open visual studio and click the Create New Project Option
• Select the Template

• Enter the name of the Application

Export HTML Table Without Client Library

 Use the below code to export HTML Table to Excel file Without Client-side Library or Server-Side packages.

Create Controller

Need to import the following namespace

using System.Text;

using Export_HTML_Table_Excel.Models;
using Microsoft.AspNetCore.Mvc;
using System.Diagnostics;
using System.Text;

namespace Export_HTML_Table_Excel.Controllers
{
    public class HomeController : Controller
    {
        private readonly ILogger<HomeController> _logger;

        public HomeController(ILogger<HomeController> logger)
        {
            _logger = logger;
        }

        public IActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public FileResult ExporttoExcel(string HtmlTable)
        {
            return File(Encoding.ASCII.GetBytes(HtmlTable),"application/vnd.ms-excel","htmltable.xls" );
        } 
    }
}

Create View

@{
    ViewData["Title"] = "Home Page";
}

<div class="text-left">
    <div id="idEmployee">

        <table class="table table-hover table-responsive table-striped", id="tblExporttoExcel">
            <tr>
                <th>Employee Name
                </th>
                <th>
                    Address
                </th>
                <th>
                    Designation
                </th> 
            </tr>
            <tr>
                <td>John Fleming</td>
                <td>USA</td>
                <td>Software Engineer</td>

            </tr>
            <tr>
                <td>Ricky Mick</td>
                <td>England</td>
                <td>Software Developer</td>
            </tr>
            <tr>
                <td>Nathan</td>
                <td>Brazil</td>
                <td>Data Scientist</td>
            </tr> 

        </table>

       

    </div> 
</div>
<br/>
<form asp-action="ExporttoExcel" asp-controller="Home" method="post">
    <input type="hidden" name="HtmlTable" />
    <input type="submit" id="btnsubmit" value="Export to Excel" class="btn btn-primary" />   
</form>

 <script>

        $(function() {

            $("#btnsubmit").click(function () {

                $("input[name='HtmlTable']").val($("#idEmployee").html());
            });

        });
    </script>

Export HTML Table With Client Library

Install FileSaver.js           

Right click on wwwroot folder then click Add and select Client-Side Library, then Search FileSaver.js  and click the install button to install the library

Install TableExport.js

 Right click on wwwroot folder then click Add and select Client-Side Library, then Search TableExport  and click the install button to install the library

Create View

@{
    ViewData["Title"] = "Home Page";
}

 <script src="~/filesaver.js/filesaver.min.js"></script>
    <script src="~/filesaver.js/filesaver.js"></script>
    <script src="~/tableexport/js/tableexport.min.js"></script>
    <script src="~/tableexport/js/tableexport.js"></script>
    <link href="~/tableexport/css/tableexport.min.css" rel="stylesheet" />
    <link href="~/tableexport/css/tableexport.css" rel="stylesheet" />

<div class="text-left">
    <div id="idEmployee">

        <table class="table table-hover table-responsive table-striped", id="tblExporttoExcel">
            <tr>
                <th>Employee Name
                </th>
                <th>
                    Address
                </th>
                <th>
                    Designation
                </th>



            </tr>
            <tr>
                <td>John Fleming</td>
                <td>USA</td>
                <td>Software Engineer</td>

            </tr>
            <tr>
                <td>Ricky Mick</td>
                <td>England</td>
                <td>Software Developer</td>
            </tr>
            <tr>
                <td>Nathan</td>
                <td>Brazil</td>
                <td>Data Scientist</td>
            </tr> 

        </table> 

    </div> 
</div>
<br/>
 
    <input type="button" onclick="tableExporttoExcel('tblExporttoExcel','W3C Example Table)" value="Export to Excel" />