网页打印代码/打印网页特定区域
[ 2009-04-30 15:23:06 | Author: none ]
以前用户在打印网页内容时，一般直接选择IE的打印功能就行。有的WEB页面上也有“打印此文档”的链接功能，引用的也是“window.print();”，类似于手工打印页面。
一般我们用到网页的打印，都仅对页面上的主要内容感兴趣，一些相关的广告图片、无用的文字信息等都可以排除。如果需要实现这样的效果，则使用上面的方法肯定是不可取的。所以我们尝试着对网页打印进行“截取”处理一下了。方法如下：
1、在页面的代码头（必须在<head>与</head>之间，否则代码出错）部处加入JavaScript：
2、在页面正文所需要打印保存的内容两端加上<!--startprint-->与<!--endprint-->标识。
比如，我们的《网页打印代码/打印网页特定区域》这篇文章 http://www.laoqiang.net/blog/article.asp?id=370 ，仅需要输出打印《网页打印代码/打印网页特定区域》文章的内容区域，则在该段区域起始处加上“<!--startprint-->”，在结束段加上<!--endprint-->。
3、截取内容部分已完成，现在加个“打印”的链接：
这样，打印网页特定区域的功能就实现了，你可以马上试一下。
4、以上是最基本的步骤，测试后你就会发现，点击“打印文章”链接后就跳到了仅显示打印区域的新页面，网页原先的菜单导航什么的都没有了，这会让对网页代码不是很熟悉的用户感觉很不方便，所以我们就在<!--startprint-->与<!--endprint-->之间找一个合适的地方加上一个返回按钮，代码如下：
同时将“打印”的链接代码修改成：
如此一来，代码就完善多了。
一般我们用到网页的打印，都仅对页面上的主要内容感兴趣，一些相关的广告图片、无用的文字信息等都可以排除。如果需要实现这样的效果，则使用上面的方法肯定是不可取的。所以我们尝试着对网页打印进行“截取”处理一下了。方法如下：
1、在页面的代码头（必须在<head>与</head>之间，否则代码出错）部处加入JavaScript：
<script language=javascript>
function doPrint() {
bdhtml=window.document.body.innerHTML;
sprnstr="<!--startprint-->";
eprnstr="<!--endprint-->";
prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);
prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));
window.document.body.innerHTML=prnhtml;
window.print();
}
</script>
function doPrint() {
bdhtml=window.document.body.innerHTML;
sprnstr="<!--startprint-->";
eprnstr="<!--endprint-->";
prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);
prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));
window.document.body.innerHTML=prnhtml;
window.print();
}
</script>
2、在页面正文所需要打印保存的内容两端加上<!--startprint-->与<!--endprint-->标识。
比如，我们的《网页打印代码/打印网页特定区域》这篇文章 http://www.laoqiang.net/blog/article.asp?id=370 ，仅需要输出打印《网页打印代码/打印网页特定区域》文章的内容区域，则在该段区域起始处加上“<!--startprint-->”，在结束段加上<!--endprint-->。
3、截取内容部分已完成，现在加个“打印”的链接：
<a href="javascript:;" onClick="doPrint()">打印文章</a>
这样，打印网页特定区域的功能就实现了，你可以马上试一下。
4、以上是最基本的步骤，测试后你就会发现，点击“打印文章”链接后就跳到了仅显示打印区域的新页面，网页原先的菜单导航什么的都没有了，这会让对网页代码不是很熟悉的用户感觉很不方便，所以我们就在<!--startprint-->与<!--endprint-->之间找一个合适的地方加上一个返回按钮，代码如下：
<div id=shuaxin style="display:none; width:100%; text-align:center; height:50px; padding-top:10px;"><input type=button value=点击返回 onclick="history.go(0)"></div>
同时将“打印”的链接代码修改成：
<a href="javascript:;" id="dy" onClick="doPrint();shuaxin.style.display='block';dy.style.display='none';" style="color:#FF0000;">[打印文章]</a>
如此一来，代码就完善多了。
There is no comment on this article.
