B/S結(jié)構(gòu)的系統(tǒng)想要控制打印還是遠(yuǎn)比過去C/S的要困難一些，格式上調(diào)整比較麻煩。最近icech接觸了幾個(gè)客戶的需求，要求網(wǎng)頁打印，如何能在保持現(xiàn)有程序不變的前提下，實(shí)現(xiàn)一些打印的需求呢？下面介紹幾個(gè)CSS控制打印的技巧。
1、隱藏不需要打印的部分
@media print是CSS 2.1引入的media types的其中一個(gè)屬性，針對打印機(jī)的控制。具體的說明可以搜索一下，這個(gè)算比較常見的CSS用法了。
打印過程中調(diào)用不同的CSS
@media print {
@import "print.css"
}
@import "print.css"
}
網(wǎng)頁正常瀏覽的時(shí)候使用其他css，當(dāng)打印的時(shí)候，會(huì)增加一個(gè)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>
以上的介紹我們總結(jié)一下，寫全一個(gè)代碼，大家可以試一下看看效果。
<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>