CSS控制网页打印的几个技巧:网页打印分页和网页打印隐藏控制

2014-12-04 10:45:56来源:威易网作者:icech

B/S结构的系统想要控制打印还是远比过去C/S的要困难一些,格式上调整比较麻烦。最近icech接触了几个客户的需求,要求网页打印,如何能在保持现有程序不变的前提下,实现一些打印的需求呢?下面介绍几个CSS控制打印的技巧。

B/S结构的系统想要控制打印还是远比过去C/S的要困难一些,格式上调整比较麻烦。最近icech接触了几个客户的需求,要求网页打印,如何能在保持现有程序不变的前提下,实现一些打印的需求呢?下面介绍几个CSS控制打印的技巧。

1、隐藏不需要打印的部分

@media print是CSS 2.1引入的media types的其中一个属性,针对打印机的控制。具体的说明可以搜索一下,这个算比较常见的CSS用法了。

打印过程中调用不同的CSS

@media print {
 @import   "print.css"
}

网页正常浏览的时候使用其他css,当打印的时候,会增加一个print.css的CSS文件。

影藏不需要打印的部分

@media print {
 .noprint { display: none }
}

使用方法

<p>我是需要打印的内容。但是不想打印出按钮</p>
<button class="noprint" onclick="window.print()">打印文本</button>

2、打印分页控制

控制打印分页也有专门的CSS属性“page-break-after”,所有的浏览器都支持以下的用法:

@media print {
 .nextpage {page-break-after:always;}
}
<p class="nextpage">这里显示第一页.</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>
关键词:CSS打印

赞助商链接: