如圖：1-頁面打印需求
開始，我想這麼實現：再點打印時，將控件的邊框隱藏起來。但是，發現實際做起來會比較麻煩。比如：select控件就很難處理。
於是，決定還是用最簡單的辦法：頁面隱藏。 即做一個符合打印要求的頁面隱藏在頁面中。
替換前的內容命名爲A：，替換後的內容命名爲B。打印的時候，將B顯示，並把A隱藏起來。
但是，需要注意的時，要實時的將A中的內容，複製到B中，以保證數據的統一。
例如：
<body >
<!-- 默認顯示的頁面--替換前的頁面 -->
<table id = "a" class ="active">
<!-- this is code -->
</table>
<!--打印時符合要求的頁面--替換後的頁面-->
<table id = "b" class = "inactive">
<!-- this is code -->
</table>
</body>
下面爲需要用到的CSS:
<!-- 顯示內容style -->
.active
{
display: block;
}
<!-- 隱藏內容style -->
.inactive
{
display: none;
}
<!-- 符合打印格式 控件的style -->
.printStyle
{
border-bottom-color:blue;//控件的下部邊框顏色
border-top-width: 0; //隱藏控件的上部邊框
border-left-width: 0; //隱藏控件的左部邊框
border-right-width: 0; //隱藏控件的右部邊框
}
隱藏頁面中控件都使用text，然後都使用“printStyle”格式即可。
<input name="name_print" type="text" id="id_print" class= "printStyle">
附件爲一個簡單的測試頁面。