使用C#或javascript将Table里的数据导出到Excel

版权所有,禁止匿名转载;禁止商业使用。

Demo效果图:

使用C#或javascript将Table里的数据导出到Excel


用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>
      数据源
    </div>
    <input type="hidden" name="hidTitle" id="hidTitle" value="@ViewBag.ExcelName" />
    <div id="report">
      <table border="1" 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>
      数据导出
    </div>
    <div>
      用C#将Table里的数据导出到Excel:<br />
      @{
        Html.RenderAction("Index", "ExportExcel", new { divId = "report", filename = "hidTitle" });
      }
    </div>
    <div>
      用js将Table里的数据导出到Excel:<br />
      <a download="@(ViewBag.ExcelName).xls" href="#" onclick="return ExcellentExport.excel(this, 'excelTable', 'Sheet1');">导出Excel文件</a>
    </div>
  </body>
</html>


0 0