HTML-Tabelle nach Excel exportieren

Question

Ich habe HTML-Tabelle auf der ASP.NET MVC View-Seite. Jetzt muss ich diese Tabelle nach Excel exportieren.

(1) die ich verwendet habe Teilansicht (Inquiries.ascx) aus der Datenbank die Tabellendaten angezeigt werden (LINQ to Entity verwendet wird) (2) Ich habe auch verwendet UITableFilter Plugin die Datensätze zu filtern (Ex: http://gregweber.info/projects/demo/flavorzoom.html)

(3) Zu jedem Zeitpunkt muss ich die sichtbaren Datensätze nach Excel filtern.

Schätzen Sie Ihre Antworten.

Dank

Rita

Hier ist meine Ansicht:

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

stark typisierten Teilansicht Benutzersteuerung (Inquiries.ascx) Tabelle zu generieren:

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

Hier Mein Controller-Code zum Laden der Teilansicht Abfragen:

[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

Probieren Sie das jQuery-Plugin: table2csv. Verwenden Sie das Argument, delivery: 'value', um das CSV als Zeichenfolge zurückzugeben. Hier

ist eine Implementierung:

1. hinzufügen regelmäßigen HTML-Eingabetaste und eine .NET Hidden auf die Seite
2. Fügen Sie ein Onclick-Ereignis auf diese Schaltfläche namens „Export“
3. erstellen eine JavaScript-Funktion , Export, der den Rückgabewert von table2CSV() in das ausgeblendete Feld speichert und zurückbucht.
4. Der Server empfängt die Hiddenpostdaten (die CSV als String)
5. Der Server gibt die Zeichenfolge an den Browser als CSV-Datei

.

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

Downloadkomponenten: npm installieren Tisch-to-Excel

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"}]); 
 
};