Demo效果圖:
用C#將Table數據導出Excel:
本方法已經將導出excel做成分部視圖，引用時只需在視圖中使用如下代碼即可：
@{ Html.RenderAction("Index", "ExportExcel", new { divId = "report", filename = "hidTitle" }); }
其中divId為table外層緊連的div的Id，filename為導出的excel名字。本模塊使用MVC，以下為Controller部分，其中Index對應所述分布視圖。
public class ExportExcelController : Controller { [HttpPost] [ValidateInput(false)] public ActionResult DownloadReport(FormCollection form) { string excelContent = form["hidTable"]; string filename = form["hidFileName"]; ExportToExcel("application/ms-excel", filename + ".xls", excelContent); return View(); } public void ExportToExcel(string FileType, string FileName, string ExcelContent) { System.Web.HttpContext.Current.Response.Charset = "UTF-8"; System.Web.HttpContext.Current.Response.ContentEncoding = System.Text.Encoding.UTF8; System.Web.HttpContext.Current.Response.AppendHeader("Content-Disposition", "attachment;filename=" + HttpUtility.UrlEncode(FileName, System.Text.Encoding.UTF8).ToString()); System.Web.HttpContext.Current.Response.ContentType = FileType; System.IO.StringWriter tw = new System.IO.StringWriter(); System.Web.HttpContext.Current.Response.Output.Write(ExcelContent.ToString()); System.Web.HttpContext.Current.Response.Flush(); System.Web.HttpContext.Current.Response.End(); } public ActionResult Index(string divId, string filename) { ViewBag.HidDivId = divId; ViewBag.FileName = filename; return PartialView(); } }
分布視圖代碼：
@{ Layout = null; } <script type="text/javascript" src="~/Scripts/jquery-1.10.2.js"></script> <form action="/ExportExcel/DownloadReport" method="post" style="display:inline"> <input type="hidden" id="hidTable" name="hidTable" value="" /> <input type="hidden" id="hidFileName" name="hidFileName" value="" /> <input type="submit" name="btn" id="btnclick" class="btn blue" value="導出Excel文件" /> </form> <script> $(function () { $("#btnclick").click(function () { $("#hidTable").val($("#@ViewBag.HidDivId").html()); $("#hidFileName").val($("#@ViewBag.FileName").val()); }); }); </script>
用javascript將Table數據導出Excel:
js文件地址：鏈接：http://pan.baidu.com/s/1jGwynWy 密碼：kay1
使用方法：
<a download="@(ViewBag.ExcelName).xls" href="#" onclick="return ExcellentExport.excel(this, 'excelTable', 'Sheet1');">導出Excel文件</a>
其中excelTable對應table的Id值。
Demo使用源碼
@{ Layout = null; ViewBag.Title = "ExcelDemo"; } <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>@ViewBag.Title</title> <style> * { margin: 0; padding: 0; } .Data { width: 100%; height: 50px; background-color: #00ffff; text-align: center; font-size: 20px; color: red; line-height: 50px; font-weight: bold; } #report { width: 100%; margin:10px 7%; } .tablereport1 tr:nth-child(2n+1) { background: #e4e4e4; } .tablereport1 td { border: none !important; padding: 0px 10px; height: 40px; text-align: center; } .Down { margin: 10px 5px; line-height: 30px; } .Down a { border: 1px solid #a4a4a4; background-color: #e5e5e5; color: #000; font-size: 14px; text-decoration: none; border-radius: 2px; } </style> <script src="~/Scripts/Excel/excellentexport.js"></script> </head> <body> <div class="Data"> 數據源 </div> <input type="hidden" name="hidTitle" id="hidTitle" value="@ViewBag.ExcelName" /> <div id="report"> <table border="1" class="tablereport1" cellpadding="0" cellspacing="0" id="excelTable"> <tr> <td colspan="5" style="text-align:center;font-size:20px"> 測試數據表 </td> </tr> @for (int i = 1; i < 6; i++) { <tr> @for (int j = 1; j < 5; j++) { <td>行@(i)列@(j)</td> } </tr> } </table> </div> <div class="Data"> 數據導出 </div> <div class="Down"> 用C#將Table里的數據導出到Excel:<br /> @{ Html.RenderAction("Index", "ExportExcel", new { divId = "report", filename = "hidTitle" }); } </div> <div class="Down"> 用js將Table里的數據導出到Excel:<br /> <a download="@(ViewBag.ExcelName).xls" href="#" onclick="return ExcellentExport.excel(this, 'excelTable', 'Sheet1');">導出Excel文件</a> </div> </body> </html>