js局部打印

最新推荐文章于 2023-06-05 11:16:17 发布

原创最新推荐文章于 2023-06-05 11:16:17 发布 · 95 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #JavaScript #IE #HTML #ViewUI

本文介绍Web打印的方法，包括利用IE控件实现打印、局部打印及如何屏蔽不需要打印的元素等内容。

1：WebBrowser 打印

应用的 IE内的控件

<center class=Noprint> //class=Noprint 这部分不打印
<OBJECT id="WebBrowser" height="0" width="0" classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2></OBJECT>

<STYLE   media=print>
.Noprint   {
DISPLAY:   none
}
.PageNext   {
PAGE-BREAK-AFTER:   always
}
</STYLE>

2：

JS 实现简单的页面局部打印
function preview(oper){
if (oper < 10){
bdhtml=window.document.body.innerHTML;//获取当前页的html代码
sprnstr="";//设置打印开始区域
eprnstr="";//设置打印结束区域
prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18); //从开始代码向后取html

prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//从结束代码向前取html
window.document.body.innerHTML=prnhtml;
window.print();
window.document.body.innerHTML=bdhtml;

} else {
window.print();
}

}

使用很简单将页面内要打印的内容加入中间XXXXX
再加个打印按纽 onclick=preview(1)

WEB打印如何屏蔽当前页路径这些元素？

方法一:

<style>

@media print { .ipt {display:none} }

</style>

要在不显示的元素上加上class=ipt
如：<input type="button" name="Cclose" value="退出" onclick="pageClose();" class="ipt">

方法二:

往往在打印网页时，执行window.print会把网页的所有内容全部打印，而有一大部分比如网页头部的图片、尾部的版权声明、按钮等，并没有必要打印出来，打印出来浪费时间又浪费油墨。如何把这些内容进行有选择的打印让你的打印文本更简洁明了，更省时美观呢？以下就对这个问题写一个JS文本，供有缘人参考。
_____________________________________________________
<script language="javascript">
function DtPrint() {
if (window.print) {
   var p_1    = document.all.p_1.innerHTML;
   var p_2     = document.all.p_2.innerHTML;
//**************
//这里根据你要打印的哪些内容，从原显示页面中用
//<div id=P_1>p_1....</div><div id=P_2>p_2...</div>等标示,要打印多少项目就用多少下
//提示一下，自己体会:),此处我只写出两个出来:D
//**************
   var css = '<style type="text/css">' +
             'p {   line-height: 120%}' +
             '.ftitle {   line-height: 120%; font-size: 18px; color: #000000}' +
             'td {   font-size: 10px; color: #000000}' +
             '</style>' ;
//**************
//这里是定义打印用的CSS，可以根据你自己的设定去写适合你的格式哦
//本文只定义三个，p,.ftitle,td，其余自己写。越美观越好。
//**************
   var body ='<table width="640" border="0" cellspacing="0" cellpadding="5">' +
               '   <tr> ' +
               ' <td   class="fbody"> ' +
               '    <div align="center" class=ftitle>' + p_title + '</div>' + p_2 +
               ' </td>' +
               '   </tr>' +
               '</table>';
//**************
//body这才是你重新设置的打印格式，根据你的打印要求，重新把原显示网页的DIV内容重新
//组合，可以根据你原来的表格内容，去掉不要打印的东东，只调用你要打印的内容
//另外：根据经验，表格大小为640左右正好是适合A4打印幅面！哈！
//**************
   document.body.innerHTML = '<center>' + css + body + '</center>';
//**************
//然后在这里把document.body重新设一下，这就是打印文档！（有加CSS格式了）
//**************
   window.print();
//**************
//一定要调用window.print()哦，否则，打印无效……说了那么多就成废话了:'(
//**************
}
}
</SCRIPT>

//在页面中，然后通过：dtPrint()调用，就行了
//比如：
//<input type="button" value="打印" LANGUAGE="javascript" onclick="return dtPrint()" ID="Button2" NAME="Button1">
//噢！注意这个可以不用<div></div>标示哦，即使标示，也不用在以上打印文本中调用出来，那样这个Button就不会打印出来了哦，嘿嘿！