当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 使用jqPrint.js调用浏览器打印界面，打印网页中的某一部分该部分含有ECharts图表

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

2019年11月25日  | 移动技术网IT编程  | 我要评论

1、准备好js文件（我用的是谷歌浏览器）

这个文件是为了防止你的jquery版本过高而不适配的问题

 

这是调用浏览器打印的js插件

 

 2、引入js文件

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

3、给你的网页添加一个按钮来出发打印事件

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

4、为了保持打印预览的时候你的网页样式不会发生变化，应该打印一个全局的div，然后再讲不想打印的部分隐藏起来，打印完了再把它们显示出来

 

 

 5、打印的时候将echarts转成图片，让图片显示echarts隐藏，不然的话echarts打印的时候是空白。（没有echarts图表的用户请自动忽略）

 

 6、编写js的处理逻辑

 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>

我有四张echarts图表所以js代码比较繁琐，如果你的echarts表只有一张，把代码中多余的东西删除即可。

 

展示区：

 

 

 

 打印的时候只显示了红色框里的内容。

最后祝成功！！！

 

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网