[ASP.net MVC 4] 把Html Table匯出Excel (簡易做法)

2013-05-15

24821
0
ASP.net MVC
2014-03-26

[ASP.net MVC 4] 把Html Table匯出Excel (Html Table Export Excel)

這功能很像以往寫WebForm時，如何把GridView匯出成Excel：[ASP.NET] GridView轉出Excel檔案完整版 by Kim胖胖小小技術分享空間

大概有兩種做法：

1.把畫面上的Html字串輸出到檔案供Client端下載(※開發快但缺點為使用者開啟該Excel檔案會跳出警告視窗)

2.刻苦刻難，用ADO.net搭配NPOI套件，建立Excel物件…用ADO.net塞資料…Response給Client端下載(※開發慢，但沒有上述缺點)

本文介紹的是第1種方法

※並不是在Controller裡一口氣把Html字串都組好再輸出檔案，雖然這做法也行…

實作概念

1.使用者按下匯出按鈕

2.用jQuery把Html Table字串存入hidden欄位，表單post到Action

3.Action回傳File即可

Sample Code：

View的Index.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script type="text/javascript" src="@Url.Content("~/Scripts/jquery-2.0.0.min.js")"></script>
    <script type="text/javascript">
        function exportExcel() {

            var sHtml = htmlEncode($("#MyTable")[0].outerHTML);//做html編碼

            $("input[name='hHtml']").val(sHtml);

            //表單提交
            $("form[name='myForm']").submit();
        }
        //↓出自：http://stackoverflow.com/questions/1219860/javascript-jquery-html-encoding
        function htmlEncode(value) {
            //create a in-memory div, set it's inner text(which jQuery automatically encodes)
            //then grab the encoded contents back out.  The div never exists on the page.
            return $('<div/>').text(value).html();
        }
    </script>
</head>
<body>
    <table width="100%" border="1" cellpadding="0" cellspacing="0" id="MyTable">
        <thead>
            <tr>
                <th>編號</th>
                <th>名稱</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>測試1</td>
            </tr>
            <tr>
                <td>2</td>
                <td>測試2</td>
            </tr>
            <tr>
                <td>3</td>
                <td>測試3</td>
            </tr>
        </tbody>
    </table>
    <br />
    <input type="button" value="匯出" onclick="exportExcel();" />
</body>
</html>

@using (Html.BeginForm("ExportExcel", "Home", FormMethod.Post, new { name="myForm"}))
{
    @Html.Hidden("hHtml")

}

HomeController

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MvcApplicationExportHtmlTableExcel.Controllers
{
    public class HomeController : Controller
    {

        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public ActionResult ExportExcel(FormCollection form)
        {

            string strHtml = form["hHtml"];
            strHtml = HttpUtility.HtmlDecode(strHtml);//Html解碼
            byte[] b = System.Text.Encoding.Default.GetBytes(strHtml);//字串轉byte陣列
            return File(b, "application/vnd.ms-excel", "這是Excel.xls");//輸出檔案給Client端
        }

    }
}

※如果匯出檔案亂碼的話，就改用System.Text.Encoding.UTF8.GetBytes() 試試看

執行結果：

按下匯出

打開Excel檔

本文範例下載

結語

另外畫面上若有圖片的話，img的src最好指定絕對路徑，只是有圖片的場合，上述方法匯出的Excel排版比較容易亂掉

所以本文較適合單純文字內容的Html Table匯出

回首頁