B/S結構的系統(tǒng)想要控制打印還是遠比過去C/S的要困難一些,格式上調(diào)整比較麻煩。最近icech接觸了幾個客戶的需求,要求網(wǎng)頁打印,如何能在保持現(xiàn)有程序不變的前提下,實現(xiàn)一些打印的需求呢?下面介紹幾個CSS控制打印的技巧。
1、隱藏不需要打印的部分
@media print是CSS 2.1引入的media types的其中一個屬性,針對打印機的控制。具體的說明可以搜索一下,這個算比較常見的CSS用法了。
打印過程中調(diào)用不同的CSS
@media print {
@import "print.css"
}
@import "print.css"
}
網(wǎng)頁正常瀏覽的時候使用其他css,當打印的時候,會增加一個print.css的CSS文件。
影藏不需要打印的部分
@media print {
.noprint { display: none }
}
.noprint { display: none }
}
使用方法
<p>我是需要打印的內(nèi)容。但是不想打印出按鈕</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>我是需要打印的內(nèi)容。但是不想打印出按鈕</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>我是需要打印的內(nèi)容。但是不想打印出按鈕</p>
<button class="noprint" onclick="window.print()">打印文本</button>
</body>
</html>