엑셀로 HTML 테이블 내보내기

Question

ASP.NET MVC 뷰 페이지에 HTML 테이블이 있습니다. 이제이 테이블을 Excel로 내 보내야합니다.

(1) I는 (엔티티 LINQ를 사용하여) 데이터베이스의 테이블 데이터를 표시하는 부분도 (Inquiries.ascx)를 사용한 (2) I 레코드 (예 : http://gregweber.info/projects/demo/flavorzoom.html) 필터에도 사용한 UITableFilter 플러그인

을

(3) 언제든지 Excel에 보이는 레코드를 필터링해야합니다.

귀하의 의견을 감사하십시오.

가 이 테이블

강력하게 형식화 된 부분보기 사용자 컨트롤 (Inquiries.ascx)를 생성하는

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

: 여기

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

가 여기에

감사

리타

내보기입니다 내 컨트롤러 코드를로드하려면 문의 부분보기 :

[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

jQuery 플러그인을 사용해보십시오 : table2csv. csv를 문자열로 반환하려면 delivery : 'value'인수를 사용하십시오.

1. 는 "수출"
2. 라는 그 버튼에 onclick 이벤트를 추가 페이지
3. 에 일반 HTML 입력 버튼과 닷넷에 HiddenField 추가 자바 스크립트 함수를 만듭니다 : 여기
   는 구현 , 내보내기, 숨겨진 필드에 table2CSV() 반환 값을 저장하고 다시 게시합니다.
4. 서버는 포스트에 HiddenField 데이터 (문자열로 CSV)
5. 서버 CSV 파일

같은 브라우저에 문자열을 출력을 수신한다.

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

다운로드 구성 요소 : NPM 내가 노력 테이블에-엑셀

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