|
描述： 1-页面打印需求
图片：
近日，一个朋友让我帮忙实现一个功能：就是打印web页面的时候，只打印页面的内容，而不打印页面内控件、按钮等。
如图：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">
附件为一个简单的测试页面。
描述： 测试页面
附件： 
test.rar (2 K)
|
Web页面打印时：不打印页面控件边框,只打印内容
一共有 0 条评论