ASP.NET?MVC打印表格并實現部分視圖表格打印
假設在一個頁面上有眾多內容,而我們只想把該頁面上的表格內容打印出來,window.print()方法會把整個頁面的內容打印出來,如何做到只打印表格內容呢?
既然window.print()只會打印整頁的內容,何不把表格放在一個部分視圖中,在部分視圖中再調用window.print()方法。
Model很簡單:
public class Student { public int Id { get; set; } public string Name { get; set; } public decimal Score { get; set; } }
Home控制器中有一個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這個強類型視圖中調用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> /* 打印的時候讓打印按鈕隱藏 */ @@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>編號</th> <th>姓名</th> <th>分數</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視圖中,點擊按鈕,彈出部分視圖內容:
@{ ViewBag.Title = "Index"; Layout = "~/Views/Shared/_Layout.cshtml"; } <button id="p">打印已經確定好的內容</button> @section scripts { <script type="text/javascript"> $(function() { $('#p').click(function() { $.ajax({ url: '@Url.Action("PrintStudent","Home")', success: function(data) { if (judgePopupBlocked) { alert("瀏覽器禁用彈出窗口了,請允許彈出窗口"); } var popUpWindow = window.open(); if (popUpWindow) { $(popUpWindow.document.body).html(data); } else { alert("瀏覽器禁用彈出窗口了,請允許彈出窗口"); } } }); }); }); //判斷瀏覽器是否阻止了彈出窗口 function judgePopupBlocked() { var w = window.open(null, "", "width=1,height=1"); try { w.close(); return false; } catch (e) { return true; } } </script> }
點擊"打印已經確定好的內容"按鈕:
取消禁用彈出窗口,再次點擊"打印已經確定好的內容"按鈕:
點擊"打印表格":
以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作具有一定的參考學習價值,謝謝大家對腳本之家的支持。如果你想了解更多相關內容請查看下面相關鏈接
相關文章
一個比較通用的分頁控件,完整的設計時支持和比較流行的分頁模式(提供源碼下載)
本分頁控件還包含簡單屬性,復雜屬性,自定義視圖狀態(tài),分頁事件,創(chuàng)建控件,render控件,Attribute,設計時支持等比較齊全的自定義控件的元素,是個不錯學習自定義控件開發(fā)的例子2010-12-12Entity?Framework使用Fluent?API配置案例
本文詳細講解了Entity?Framework使用Fluent?API配置案例的方法,文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-03-03ASP.NET頁面之間傳值的方式之Application實例詳解
這篇文章主要介紹了ASP.NET頁面之間傳值的方式之Application實例詳解,需要的朋友可以參考下2017-10-10