一、打印样式
区别显示和打印的样式
使用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>
参考与分享：
分享几款免费的web打印控件
WEB打印系列教程之二--使用WScript.Shell通过编程方式进行复杂的WEB打印设置
WEB打印系列教程之三--简单的WEB打印分页设置
每页都有的表头和打印分页
WEB打印-网页打印功能(带分页、可多页打印)
Google Chrome打印分页符
web打印中如何强制分页
chrome浏览器web打印需要了解的几个小技巧
如何在 SAP UI5 应用中集成第三方库 ：一个在移动设备上查看 Web 应用打印调试信息的小技巧
