快捷導(dǎo)航

ASP.NET?MVC打印表格并實(shí)現(xiàn)部分視圖表格打印

更新時(shí)間：2022年08月02日 08:33:38 作者：Darren?Ji

這篇文章介紹了ASP.NET?MVC打印表格并實(shí)現(xiàn)部分視圖表格打印的方法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

假設(shè)在一個(gè)頁(yè)面上有眾多內(nèi)容，而我們只想把該頁(yè)面上的表格內(nèi)容打印出來，window.print()方法會(huì)把整個(gè)頁(yè)面的內(nèi)容打印出來，如何做到只打印表格內(nèi)容呢？

既然window.print()只會(huì)打印整頁(yè)的內(nèi)容，何不把表格放在一個(gè)部分視圖中，在部分視圖中再調(diào)用window.print()方法。

Model很簡(jiǎn)單：

    public class Student
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public decimal Score { get; set; }
    }

Home控制器中有一個(gè)Action方法返回Student的集合到部分視圖：

    public class HomeController : Controller
    {

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

        public ActionResult PrintStudent()
        {
            var result = new List<Student>
            {
                new Student(){Id = 1, Name = "darren", Score = 90.9M},
                new Student(){Id = 2, Name = "smith", Score = 91.8M},
                new Student(){Id = 3, Name = "kathy", Score = 98.6M}
            };
            return PartialView(result);
        }
    }

在Home/PrintStudent.cshtml這個(gè)強(qiáng)類型視圖中調(diào)用window.print()方法：

@model IEnumerable<MvcApplication1.Models.Student>

<style type="text/css">
    .c {
        width: 100%;
        border: 1px solid green;
        border-collapse: collapse;
    }

    .c td {
        padding: 2px;
        border: 1px solid green;
    }
</style>

<style>
    /* 打印的時(shí)候讓打印按鈕隱藏 */
    @@media only print {
        a {
            display: none;
        }
    }
</style>

<a href="#" rel="external nofollow"  rel="external nofollow"  onclick="window.print();return false;">打印表格</a>
<table class="c">
    <thead>
        <tr>
            <th>編號(hào)</th>
            <th>姓名</th>
            <th>分?jǐn)?shù)</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var student in Model)
        {
            <tr>
                <td>@student.Id</td>
                <td>@student.Name</td>
                <td>@student.Score</td>
            </tr>
        }
    </tbody>
</table>
<a href="#" rel="external nofollow"  rel="external nofollow"  onclick="window.print();return false;">打印表格</a>

在Home/Index.cshtml視圖中，點(diǎn)擊按鈕，彈出部分視圖內(nèi)容：

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<button id="p">打印已經(jīng)確定好的內(nèi)容</button>

@section scripts
{
    <script type="text/javascript">
        $(function() {
            $('#p').click(function() {
                $.ajax({
                    url: '@Url.Action("PrintStudent","Home")',
                    success: function(data) {
                        if (judgePopupBlocked) {
                            alert("瀏覽器禁用彈出窗口了，請(qǐng)?jiān)试S彈出窗口");
                        }
                        var popUpWindow = window.open();
                        if (popUpWindow) {
                            $(popUpWindow.document.body).html(data);
                        } else {
                            alert("瀏覽器禁用彈出窗口了，請(qǐng)?jiān)试S彈出窗口");
                        }
                    }
                });
            });
        });

        //判斷瀏覽器是否阻止了彈出窗口
        function judgePopupBlocked() {
            var w = window.open(null, "", "width=1,height=1");
            try {
                w.close();
                return false;
            } catch (e) {
                return true;
            } 
        }
    </script>
}

點(diǎn)擊"打印已經(jīng)確定好的內(nèi)容"按鈕：