这是网上别人贴的代码:
<style> @media print{ .noprint{ display:none } } </style> <tr class="noprint"> <td height="133" align="center" valign="top"> <img src="Images/top.jpg" width="757" height="133"></td> </tr>这是我自己的实现:
第一个noprint给不想打印的tag加上class=“noprint” ;另一方面即想打印出来而又不想在网页上显示的元素,则在screen的style里对它设置display:none,在媒体print的style里设置它正常想打印出来的样式,如下面的.basic h5元素 <style type="text/css" media=print> .noprint{display:none} .basic h5{ line-height:40px; font-size:18px; color:#900; padding-left:260px; display:block} </style> //下面的style默认媒体属性为screen <style type="text/css"> .basic h5{display:none} </style> <div id="divprint" class="basic"> <h5>$!{query.stockCode}发行情况查询报表</h5> //后面省略 第二种,window.document.body.innerHTML改变原网页的html,增加或者减少某部分,打印完再变回来 or window.open新打开一个窗口 传给这个window.ducument新的打印页面html 一开始,我觉得这种方法不错。后来经过实际应用,这个方法需要拼接html,真的特别容易出错。scripttag如果放在body里,document.body.innerHTML里面就会包含的,不用特意把script摘出来拼接,我就傻傻的这么做了,tytn......新开一个窗口比改变原网页好一点,省的把原网页也改的乱七八糟,可能是因为我的原网页有echarts图表部分,反正我再把原来body的innerHTML替换回来的时候 echarts图表就不显示了。后来新开一个窗口,在新窗口展现的样子就是我期望的打印页面的样子了。但是我在原网页的script里打开一个新窗口后面调用新窗口的print会弹出一个打印窗口 但是预览页面上并没有echarts图表,在新页面的script里写window.print也不管用,这块还要再研究一下,好奇怪。。。 <!--打印的实现2:start--> <input id="btnPrint" type="button" value="打印预览" onclick=preview(1) /> <script> function preview(oper) { if (oper < 10) { bdhtml=window.document.body.innerHTML;//获取当前页的html代码 sprnstr="<!--startprint"+oper+"-->";//设置打印开始区域 eprnstr="<!--endprint"+oper+"-->";//设置打印结束区域 prnhtml=bdhtml.substring(bdhtml.indexOf(sprnstr)+18); //从开始代码向后取html prnhtmlprnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));//从结束代码向前取html window.document.body.innerHTML=prnhtml; window.print(); window.document.body.innerHTML=bdhtml; } else { window.print(); } } </script> <p>XXXXX</p> <!--startprint1-->要打印的内容<!--endprint1--> 再加个打印按纽 onclick=preview(1) <!--打印的实现2:end-->这段代码是失败的实践,我觉得可能是哪里出错了??为什么弹出的打印窗口预览图上不显示echarts的饼图呢
<script id="myScript" type="text/javascript"> jQuery(function() { jQuery("#print").click(function() { //拼接真的好容易出错,先获取head部分,再从body里摘出来想打印的部分 var str=jQuery("head").html(); var prnhtml=jQuery("#divprint").html(); var sprnstr="<!--startprint-->";//设置打印开始区域 var eprnstr="<!--endprint-->";//设置打印结束区域 prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr))+prnhtml.substring(prnhtml.indexOf(sprnstr)+18);//从结束代码向前取html //前面插入一个想打印的h5标签 prnhtml="<h5 style='line-height:40px; font-size:18px; color:#900; padding-left:260px;'>"+jQuery("#stockCode").val()+"发行情况查询报表</h5>"+prnhtml; //html+head+body全都加起来 prnhtml='<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>'+str+'</head><body><div class="basic">'+prnhtml+'</div></body></html>'; var oPop=window.open('','oPop'); oPop.document.write(prnhtml); oPop.document.close(); oPop.print(); oPop.close(); }); }); </script>