一、打印樣式
區別顯示和打印的樣式
使用media="print"控制打印時的樣式，如下：
打印時不顯示打印按鈕，設置頁面寬度
<style media="print"> .toolbox { display: none; } .container { max-width: 210mm; } </style> <style> .container { margin: 0 auto; max-width: 960px; } <style>
使用獨立的樣式文件
<link rel="stylesheet" type="text/css" media="screen" href="mycss.css">
<link rel="stylesheet" type="text/css" media="print" href="myprintcss.css">
css里media的使用
我們在網頁里引用外部的css文件時，通常是用如下的代碼：<link rel="stylesheet" type="text/css" href="mycss.css">
實際上，上面的link對象里，我們是省略了一個叫“media”的屬性，這個屬性指定樣式表規則用於指定的設備類型。它有如下值可用：
all-- 用於所有設備類型
aural-- 用於語音和音樂合成器
braille-- 用於觸覺反饋設備
embossed-- 用於凸點字符（盲文）印刷設備
handheld-- 用於小型或手提設備
print-- 用於打印機
projection-- 用於投影圖像，如幻燈片
screen-- 用於計算機顯示器
tty-- 用於使用固定間距字符格的設備。如電傳打字機和終端
tv-- 用於電視類設備
這么多的值，並不是每個都可用，因為瀏覽器廠商並沒有全部實現它們。
二、分頁打印
打印需要分頁時，但是自動分頁又無法滿足自己的需求時，需要手動分頁
<style type="text/css"> .pageBreak{ page-break-after:always;} .pageBreakBefore{ page-break-before:always;} </style>
css里用於打印的屬性
page-break-after : auto | always | avoid | left | right | null
參數：
auto : 假如需要在對象之后插入頁分割符
always :始終在對象之后插入頁分割符
avoid : 避免在對象后面插入頁分割符
left : 在對象后面插入頁分割符直到它到達一個空白的左頁邊
right :在對象后面插入頁分割符直到它到達一個空白的右頁邊
null : 空值。IE5用來取消頁分割符設置
這個page-break-after，主要用來在打印時插入一個分頁符，分頁就靠它了。它還有個雙胞胎的兄弟，叫page-break-before，參數和它一樣，看名字即知道它是用來在對象之前插入分頁符。
示例如下：
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> <title>Paginated HTML</title> <style type="text/css" media="print"> div.page { page-break-after: always; page-break-inside: avoid; } </style> </head> <body> <div class="page"> <h1>This is Page 1</h1> </div> <div class="page"> <h1>This is Page 2</h1> </div> <div class="page"> <h1>This is Page 3</h1> </div> </body> </html>
打印模板
關於.NET實現按模板分頁的部分關鍵代碼
樣式
<link rel="stylesheet" href="@Url.Content("~/Content/normalize.css")"> <style media="print"> .toolbox { display: none; } .container { max-width: 210mm; } </style> <style> .container { margin: 0 auto; max-width: 960px; } .table-wrap { width: 100%; height: 903px; } table > * { font-size: 14px !important; } table { border-collapse: collapse; border: 1px solid black; width: 100%; } table tr th { height: 20px; } table tr td { border: 1px solid black; text-align: center; } table tr td.left { border: 1px solid black; text-align: left; padding-left: 5px; } .page-foot { margin-top: 10px; text-align: center; width: 100%; } .pageBreakBefore { page-break-before: always; -webkit-break-inside: avoid; page-break-inside: avoid; } .subbox { text-align: center; } .footbox { display: block; } .namebox { display: inline-block; width: 50%; margin-top: 10px; } .hospitalName { width: 200px; text-align: center; } .timeSpan { width: 200px; text-align: center; } .text_line { text-decoration: underline; } .toolbox { margin-top: 10px; text-align: right; } .wp10 { width: 10%; } .wp20 { width: 20%; } .wp50 { width: 50%; } </style>
html
<div class="toolbox"> <span>提醒：在非ie打印預覽時，通過預覽界面的“更多設置”去掉頁面上的頁眉頁腳。   </span> <button id="btnPrint">打印</button> <button onclick="closeWin()">關閉頁面</button> </div>
@for (int index = 0; index < Model.List.Count;) { <h2 style="text-align: center;"> @string.Format("{0}服務周報", Model.CompanyName) </h2> <p class="subbox"> <span class="hospitalName">甲方名稱 <strong class="text_line">@Model.PartyACompanyName</strong> </span> <span class="timeSpan">日期 <strong class="text_line">@Model.StartDate</strong> 至 <strong class="text_line">@Model.EndDate</strong></span> </p> <div class="table-wrap"> <table> <tbody> <tr> <th class="wp10">序號</th> <th class="wp40">標題</th> <th class="wp20">姓名</th> </tr> @{ for (var j = 0; j < 40; j++) { if (index < Model.List.Count) { <tr> <td class="wp10">@(index + 1)</td> <td class="left wp40">@Model.List[index].Title</td> <td class="wp20">@Model.List[index].UserName</td> </tr> index++; } } } </tbody> </table> </div> <div class="footbox"> <div class="namebox"> <span class="hospitalName">甲方： ____________ </span> <span class="timeSpan"> 日期： ____________ </span> </div> <div class="namebox" style="text-align: right; width: 49%;"> <span class="hospitalName">乙方： ____________ </span> <span class="timeSpan"> 日期： ____________ </span> </div> <div class="page-foot">第@((index + 1) / 40 + (index % 40 > 0 ? 1 : 0))頁</div> </div> <div class="pageBreakBefore"></div> }
腳本
<script src="~/Scripts/jquery-2.2.0.min.js"></script> <script> function pagesetup_null() { var hkey_root, hkey_path, hkey_key; hkey_root = "HKEY_CURRENT_USER"; hkey_path = "\\Software\\Microsoft\\Internet Explorer\\PageSetup\\"; try { var RegWsh = new ActiveXObject("WScript.Shell"); hkey_key = "header"; RegWsh.RegWrite(hkey_root + hkey_path + hkey_key, ""); hkey_key = "footer"; RegWsh.RegWrite(hkey_root + hkey_path + hkey_key, ""); } catch (e) { } } $(function () { $("#btnPrint").click(function () { var explorer = window.navigator.userAgent; if (explorer.indexOf("MSIE") >= 0) { pagesetup_null(); } window.print(); }); }); function closeWin() { window.open("", "_self").close(); } </script>
參考與分享：