您的位置：首页 > 职场人生

Web页面打印时：不打印页面控件边框,只打印内容

2007-11-08 09:24 369 查看

近日，一个朋友让我帮忙实现一个功能：就是打印web页面的时候，只打印页面的内容，而不打印页面内控件、按钮等。
如图：1-页面打印需求

开始，我想这么实现：再点打印时，将控件的边框隐藏起来。但是，发现实际做起来会比较麻烦。比如：select控件就很难处理。

于是，决定还是用最简单的办法：页面隐藏。即做一个符合打印要求的页面隐藏在页面中。

替换前的内容命名为A：，替换后的内容命名为B。打印的时候，将B显示，并把A隐藏起来。

但是，需要注意的时，要实时的将A中的内容，复制到B中，以保证数据的统一。

例如：
<body >

<table id = "a" class ="active">

</table>


<table id = "b" class = "inactive">

</table>
</body>

下面为需要用到的CSS:

.active
{
display: block;
}

.inactive
{
display: none;
}

.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">

附件为一个简单的测试页面。

附件：http://down.51cto.com/data/2348737

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 职场 web 休闲隐藏页面控件边框 Web页面打印

相关文章推荐

新的分享

章节导航