含echarts图表の网页打印

    xiaoxiao2021-03-25  137

    包含echarts图表网页打印总结(纯前端实现)

    web打印最简单的办法就是使用一个window.print() 如果打印不涉及到动态获取数据的话 大部分都使用这个方法。就剩下样式的调整,网页打印的理想样子总是跟原网页有些许不同,有一些地方不想打印,另外想加些东西打印出来,既要对原网页做加法又要做减法。简单介绍一下网上的方法: 第一种,某些地方不想打印,使用display:none,并且要放在print 媒体css里面,这样才能控制在浏览器网页上显示,而打印的时候会去掉 本人最后实践了这种方法和下面那种方法,第二个方法很麻烦又容易出错,后来改用这种方法很快就实现了我要的效果。。。

    这是网上别人贴的代码:

    <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>
    转载请注明原文地址: https://ju.6miu.com/read-2897.html

    最新回复(0)