MVC 導出Execl 的總結幾種方式（四）

時間 2019-12-11

標籤 mvc 導出 execl 總結幾種方式简体版

原文原文鏈接

這種方式我我的仍是比較喜歡的，使用部分視圖的方式，導出Execl 這樣在編輯樣式上也是很方便的javascript

第一步: 編輯導出視圖頁css

@using H5UpdateImage.Models;
@{
    Layout = null;
    Response.AddHeader("Content-disposition", "attachment;filename=Order.xls");
}

@model List<Order>
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>ExeclIndex</title>
    <style type="text/css">
        .ltable th {
            padding: 8px 0;
            color: #333;
            font-size: 12px;
            font-weight: 500;
            background: #f3f3f3;
            border-bottom: 1px solid #E1E1E1;
            line-height: 1.5em;
        }

        .ltable th, .ltable td {
            border: 1px solid #e1e1e1;
            text-align: center;
        }

        .ltable th {
            padding: 8px 0;
            color: #333;
            font-size: 12px;
            font-weight: 500;
            background: #f3f3f3;
            border-bottom: 1px solid #E1E1E1;
            line-height: 1.5em;
        }
    </style>

</head>
<body>
    <table class="ltable">
        <thead>
            <tr>
                <th> 訂單編號</th>
                <th>訂單來源</th>
                <th>會員姓名</th>

            </tr>
        </thead>
        <tbody class="ltbody">
            @foreach (var item in Model)
            {
                <tr>
                    <td>@item.Id</td>
                    <td>@item.Name</td>
                    <td>@item.CreateTime</td>
                </tr>
            }
        </tbody>
    </table>
</body>
</html>

View Code

第二步：控制代碼html

  /// <summary>
        /// MVC 內置視圖導出Execl
        /// </summary>
        /// <returns></returns>
        public ActionResult ExeclIndex()
        {
            var list = GetList();


            return View(list);
        }

第三步：觸發導出代碼java

 <a id="btnExport" href="javascript:ExportData();void(0);">導出</a>

js代碼
 function ExportData() {
       
        window.open('@Url.Action("ExeclIndex")');
    }