web打印总结
一、打印样式
区别显示和打印的样式
使用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>
参考与分享：
