含echarts图表の网页打印包含echarts图表网页打印总结（纯前端实现）

42 阅读 0 评论 28 点赞

我是靠谱客的博主坚定樱桃，最近开发中收集的这篇文章主要介绍含echarts图表の网页打印包含echarts图表网页打印总结（纯前端实现），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

包含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>