Export HTML Table to Excel
11,563
Try the jQuery plugin: table2csv. Use the argument, delivery:'value', to return the csv as a string.
Here is an implementation:
- Add a regular html input button and a .NET HiddenField to the page
- Add an onclick event to that button called "Export"
- Create a javascript function, Export, that stores the return value of table2CSV() into the hidden field, and posts back.
- The server receives the hiddenfield post data (the csv as a string)
- The server outputs the string to the browser as a csv file
.
// javascript
function Export()
{
$('#yourHiddenFieldId').val() = $('#yourTable').table2CSV({delivery:'value'});
__doPostBack('#yourExportBtnId', '');
}
// c#
if(Page.IsPostBack)
{
if(!String.IsNullOrEmpty(Request.Form[yourHiddenField.UniqueId]))
{
Response.Clear();
Response.ContentType = "text/csv";
Response.AddHeader("Content-Disposition", "attachment; filename=TheReport.csv");
Response.Flush();
Response.Write(Request.Form[yourHiddenField.UniqueID]);
Response.End();
}
}
Author by
Rita
Updated on June 04, 2022Comments
-
Rita almost 2 years
I have HTML table on the ASP.NET MVC View page. Now I have to export this table to Excel.
(1) I have used partial view (Inquiries.ascx) to display the table data from database (using LINQ to Entity) (2) I also have used UITableFilter plugin to filter the records (Ex: http://gregweber.info/projects/demo/flavorzoom.html )
(3) At any point of time, I have to filter the visible records to Excel.
Appreciate your responses.
Thanks
Rita
Here is my View:
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Mvc.Master" Inherits="System.Web.Mvc.ViewPage" %> <asp:Content ID="Content2" ContentPlaceHolderID="cphHead" runat="server"> <script src="../../Scripts/jquery.tablesorter.js" type="text/javascript"></script> <script src="../../Scripts/jquery.uitablefilter.js" type="text/javascript"></script> <script type="text/javascript"> //Load Partial View $('#MyInquiries').load('/Home/Inquiries'); // To Apply Filter Expression using uiTableFilter plugin $("#searchName").keyup(function() { $.uiTableFilter($("#tblRefRequests"), this.value); $("#tblRefRequests").tablesorter({ widthFixed: true, widgets: ['zebra'] }); }); //Export the HTML table contents to Excel $('#export').click(function() { //Code goes here }); </script> </asp:Content> //Main Content <asp:Content ID="Content1" ContentPlaceHolderID="cphContent" runat="server"> <h2 class="pageName">View All Inquiries</h2> <input type="submit" value="Export to Excel" id="export" /> <div id='MyInquiries'></div> </asp:Content>
Strongly Typed Partial view user control (Inquiries.ascx) to generate table:
<table> <tr><td valign ="middle">Filter Expression: <%= Html.TextBox("searchName")%></td></tr> </table> <table id="tblRefRequests" > <thead> <tr> <th>Tx_ID</th> <th>TX Date</th> <th>Name</th> <th>Email Address </th> <th>Products</th> <th>Document Name</th> </tr> </thead> <tbody> <% foreach (var item in Model) { %> <tr> <td visible =false><%= item.RequestID %></td> <td><%= String.Format("{0:d}", item.RequestDate) %></td> <td><%= item.CustomerName %></td> <td><%= Html.Encode(item.Email) %></td> <td><%= item.ProductName %></td> <td><%= Html.Encode(item.DocDescription)%></td> </tr> <% } %> </tbody> </table>
Here is my Controller code to load the Inquiries partial view:
[HttpGet] public PartialViewResult Inquiries() { var model = from i in myEntity.Inquiries where i.User_Id == 5 orderby i.TX_Id descending select new { RequestID = i.TX_Id, CustomerName = i.CustomerMaster.FirstName, RequestDate = i.RequestDate, Email = i.CustomerMaster.MS_Id, DocDescription = i.Document.Description, ProductName = i.Product.Name }; return PartialView(model); }
-
Rita over 14 yearsI tried. It is coming as a string in a new window. But i want that in Excel File.
-
Bill Paetzke over 14 yearsI added example code. Check it out. And I don't know how set you are on exporting Excel. That's a whole other beast. I suggest exporting CSV. It's much easier, faster, and more lightweight and elegant to export a CSV file vs an Excel file. You can bill it as "CSV for Excel." That's what I do.