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#

Table of Contents

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

Export Data into PDF Document using Asp.net Core MVC C#

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" />