In this article I will explain with an example, how to use table2excel jQuery plugin in ASP.Net Core Razor Pages.
Razor PageModel (Code-Behind)
The PageModel consists of following Handler method.
Handler method for handling GET operation
This Handler method handles the GET calls, for this particular example it is not required and hence left empty.
public class IndexModel : PageModel
{
public void OnGet()
{
}
}
Razor Page (HTML)
The HTML of Razor Page consists of an HTML Table and a Button.
Inside the jQuery document ready event handler, the Export Button has been assigned a jQuery Click event handler.
When the Export Button is clicked, the jQuery table2excel plugin is applied to the HTML Table and it is converted (exported) to Excel file.
@page
@model Export_Table_Excel_jQuery_Razor_Core.Pages.IndexModel
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
<table id="tblCustomers">
<tr>
<th>Customer Id</th>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>1</td>
<td>John Hammond</td>
<td>United States</td>
</tr>
<tr>
<td>2</td>
<td>Mudassar Khan</td>
<td>India</td>
</tr>
<tr>
<td>3</td>
<td>Suzanne Mathews</td>
<td>France</td>
</tr>
<tr>
<td>4</td>
<td>Robert Schidner</td>
<td>Russia</td>
</tr>
</table>
<br/>
<input type="button" id="btnExport" value="Export" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="~/Scripts/table2excel.js"></script>
<script type="text/javascript">
$(function () {
$("#btnExport").click(function () {
$("#tblCustomers").table2excel({
filename: "Table.xls"
});
});
});
</script>
</body>
</html>
Screenshots
The HTML Table
Excel file being downloaded when Export Button is clicked
The generated Excel file
Browser Compatibility
The above code has been tested in the following browsers.
* All browser logos displayed above are property of their respective owners.
Downloads