使用jqPrint.js调用浏览器打印界面，打印网页中的某一部分该部分含有ECharts图表

1 <script src="js/jquery.jqprint-0.3.js"></script>
2 <script src="js/jquery-migrate-1.2.1.min.js"></script>

1 <input type="button" onclick="printClassReport()" value="打印班级报告"/>

 1     <script src="js/jquery.jqprint-0.3.js"></script>
 2     <script src="js/jquery-migrate-1.2.1.min.js"></script>
 3     <script type="text/javascript">
 4         function printClassReport(){
 5             // 获取echarts图表
 6             var myChart1 = echarts.init(document.getElementById(‘report_classanalyze‘)); 
 7             var myChart2 = echarts.init(document.getElementById(‘report_overall‘));
 8             var myChart3 = echarts.init(document.getElementById(‘report_studentPassRank‘));
 9             var myChart4 = echarts.init(document.getElementById(‘report_problemSubmitRank‘));
10             //myChart2.setOption(option3);
11             // 获取图片（此时还未实现转换暂时处于隐藏状态）
12             var img1 = document.getElementById(‘img_report_classanalyze‘);
13             var img2 = document.getElementById(‘img_report_overall‘);
14             var img3 = document.getElementById(‘img_report_studentPassRank‘);
15             var img4 = document.getElementById(‘img_report_problemSubmitRank‘);
16             // 将图表转换成图片，并保存在图片域当中
17             img1.src = myChart1.getDataURL({
18                 pixelRatio: 2,
19                 backgroundColor: ‘#fff‘
20             });
21             img2.src = myChart2.getDataURL({
22                 pixelRatio: 2,
23                 backgroundColor: ‘#fff‘
24             });
25             img3.src = myChart3.getDataURL({
26                 pixelRatio: 2,
27                 backgroundColor: ‘#fff‘
28             });
29             img4.src = myChart4.getDataURL({
30                 pixelRatio: 2,
31                 backgroundColor: ‘#fff‘
32             });
33             // 先把图表隐藏，让图片先显示出来
34             document.getElementById(‘img_report_classanalyze‘).style.display="block";
35             document.getElementById(‘img_report_overall‘).style.display="block";
36             document.getElementById(‘img_report_studentPassRank‘).style.display="block";
37             document.getElementById(‘img_report_problemSubmitRank‘).style.display="block";
38             document.getElementById(‘report_classanalyze‘).style.display="none";
39             document.getElementById(‘report_overall‘).style.display="none";
40             document.getElementById(‘report_studentPassRank‘).style.display="none";
41             document.getElementById(‘report_problemSubmitRank‘).style.display="none";
42             // 隐藏不想显示的区域
43             $(".content_l").hide();
44             $(".search").hide();
45             $("form").hide();
46             // 打印选定的web页面
47             $("#print").jqprint();
48             // 将之前隐藏的页面重新显示出来
49             $("form").show();
50             $(".search").show();
51             $(".content_l").show();
52             // 再将图片隐藏，将动态echarts突变显示出来
53             document.getElementById(‘img_report_classanalyze‘).style.display="none";
54             document.getElementById(‘img_report_overall‘).style.display="none";
55             document.getElementById(‘img_report_studentPassRank‘).style.display="none";
56             document.getElementById(‘img_report_problemSubmitRank‘).style.display="none";
57             document.getElementById(‘report_classanalyze‘).style.display="block";
58             document.getElementById(‘report_overall‘).style.display="block";
59             document.getElementById(‘report_studentPassRank‘).style.display="block";
60             document.getElementById(‘report_problemSubmitRank‘).style.display="block";
61         }
62     </script>