Eksportuj tabelę HTML do Excela

Question

Mam tabelę HTML na stronie widoku MVC programu ASP.NET. Teraz muszę wyeksportować tę tabelę do programu Excel.

(1) Użyłem częściowy widok (Inquiries.ascx), aby wyświetlić dane tabeli z bazy danych (przy użyciu LINQ do podmiotu) (2) Ja również używali UITableFilter plugin do filtrowania rekordów (np http://gregweber.info/projects/demo/flavorzoom.html)

(3) W dowolnym momencie muszę filtrować widoczne rekordy do programu Excel.

Doceń odpowiedzi.

Dzięki

Rita

Oto moim zdaniem:

<%@ 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> 

silnie typami Częściowy widok kontrola użytkownika (Inquiries.ascx) w celu wygenerowania tabeli:

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

Oto mój kod kontrolera, aby załadować widok częściowy zapytania:

[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); 
     } 

Answer 1

Wypróbuj wtyczkę jQuery: table2csv. Użyj argumentu, delivery: "value", aby zwrócić csv jako ciąg znaków.

Oto realizacja:

1. Dodaj regularny przycisk wejściowego html i HiddenField .NET do strony
2. Dodaj zdarzenie onclick do tego przycisk o nazwie „Export”
3. Tworzenie funkcji javascript , Export, który przechowuje zwracaną wartość table2CSV() w ukrytym polu i odsyła z powrotem.
4. Serwer odbiera dane hiddenfield post (CSV jako ciąg)
5. Serwer wysyła ciąg do przeglądarki jako plik CSV

. Składniki

// 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(); 
    } 
} 

Answer 2

pobieranie: npm zainstalować stół do Excela

https://github.com/ecofe/tabletoexcel

var tableToExcel=new TableToExcel(); 
 
document.getElementById('button1').onclick=function(){ 
 

 
    tableToExcel.render("table"); 
 

 
}; 
 
document.getElementById('button2').onclick=function(){ 
 
    var arr=[ 
 
     ['LastName','Sales','Country','Quarter'], 
 
     ['Smith','23','UK','Qtr 3'], 
 
     ['Johnson','14808','USA','Qtr 4'] 
 
    ] 
 
    tableToExcel.render(arr,[{text:"create",bg:"#000",color:"#fff"},{text:"createcreate",bg:"#ddd",color:"#fff"}]); 
 
};