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

2007-11-08 09:24:20

近日，一个朋友让我帮忙实现一个功能：就是打印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://guojie.blog.51cto.com/59049/49643

附件下载：
　　

测试页面

上一篇 WinXP下本地安全策略初始化失败解决方法　　下一篇 MySQL5中文乱码和Data Too Long For 'XXX&..

类别：其他 ┆ 技术圈() ┆ 阅读() ┆ 评论() ┆推送到技术圈 ┆返回首页

文章评论

昵称：
验证码：		点击图片可刷新验证码　　博客过2级，无需填写验证码
内容：