含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也不管用，这块还要再研究一下，好奇怪。。。

  

<input id="btnPrint" type="button" value="打印预览" onclick=preview(1) />  
<script>  
function preview(oper)         
{
        
if (oper < 10)  
{  
bdhtml=window.document.body.innerHTML;//获取当前页的html代码  
sprnstr="";//设置打印开始区域  
eprnstr="";//设置打印结束区域  
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>XXXXXp>  

要打印的内容  

再加个打印按纽 onclick=preview(1)   

  

这段代码是失败的实践，我觉得可能是哪里出错了？？为什么弹出的打印窗口预览图上不显示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="";//设置打印开始区域
var eprnstr="";//设置打印结束区域
prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr))+prnhtml.substring(prnhtml.indexOf(sprnstr)+18);//从结束代码向前取html
//前面插入一个想打印的h5标签
prnhtml="
"+jQuery("#stockCode").val()+"发行情况查询报表
"+prnhtml;
//html+head+body全都加起来
prnhtml=''+str+'
'+prnhtml+'
';
var oPop=window.open('','oPop');
oPop.document.write(prnhtml);
oPop.document.close();
oPop.print();
oPop.close();   
    });

});
script>