CSS控制网页打印的几个技巧：网页打印分页和网页打印隐藏控制
内容摘要
B/S结构的系统想要控制打印还是远比过去C/S的要困难一些，格式上调整比较麻烦。
文章正文
B/S结构的系统想要控制打印还是远比过去C/S的要困难一些，格式上调整比较麻烦。最近icech接触了几个客户的需求，要求网页打印，如何能在保持现有程序不变的前提下，实现一些打印的需求呢？下面介绍几个CSS控制打印的技巧。
1、隐藏不需要打印的部分
@media print是CSS 2.1引入的media types的其中一个属性，针对打印机的控制。具体的说明可以搜索一下，这个算比较常见的CSS用法了。
打印过程中调用不同的CSS
@media print {
@import "print.css"
}
@import "print.css"
}
网页正常浏览的时候使用其他css，当打印的时候，会增加一个print.css的CSS文件。
影藏不需要打印的部分
@media print {
.noprint { display: none }
}
.noprint { display: none }
}
使用方法
<p>我是需要打印的内容。但是不想打印出按钮</p>
<button class="noprint" onclick="window.print()">打印文本</button>
<button class="noprint" onclick="window.print()">打印文本</button>
2、打印分页控制
控制打印分页也有专门的CSS属性“page-break-after”，所有的浏览器都支持以下的用法：
@media print {
.nextpage {page-break-after:always;}
}
.nextpage {page-break-after:always;}
}
<p class="nextpage">这里显示第一页.</p>
<p>这里显示第二页.</p>
<p>这里显示第二页.</p>
以上的介绍我们总结一下，写全一个代码，大家可以试一下看看效果。
<html>
<head>
<style>
@media print {
.noprint { display: none }
.nextpage {page-break-after:always;}
}
</style>
</head>
<body>
<p class="nextpage">这里显示第一页.</p>
<p>我是需要打印的内容。但是不想打印出按钮</p>
<button class="noprint" onclick="window.print()">打印文本</button>
</body>
</html>
<head>
<style>
@media print {
.noprint { display: none }
.nextpage {page-break-after:always;}
}
</style>
</head>
<body>
<p class="nextpage">这里显示第一页.</p>
<p>我是需要打印的内容。但是不想打印出按钮</p>
<button class="noprint" onclick="window.print()">打印文本</button>
</body>
</html>
代码注释
[!--zhushi--]
作者：喵哥笔记
