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

时间：2022-01-11 01:25:27

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

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

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

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

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

2、引入js文件

 <script src="js/jquery.jqprint-0.3.js"></script>

 <script src="js/jquery-migrate-1.2.1.min.js"></script>

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

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

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

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

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

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

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

6、编写js的处理逻辑

     <script src="js/jquery.jqprint-0.3.js"></script>

     <script src="js/jquery-migrate-1.2.1.min.js"></script>

     <script type="text/javascript">

         function printClassReport(){

             // 获取echarts图表

             var myChart1 = echarts.init(document.getElementById('report_classanalyze'));

             var myChart2 = echarts.init(document.getElementById('report_overall'));

             var myChart3 = echarts.init(document.getElementById('report_studentPassRank'));

             var myChart4 = echarts.init(document.getElementById('report_problemSubmitRank'));

             //myChart2.setOption(option3);

             // 获取图片（此时还未实现转换暂时处于隐藏状态）

             var img1 = document.getElementById('img_report_classanalyze');

             var img2 = document.getElementById('img_report_overall');

             var img3 = document.getElementById('img_report_studentPassRank');

             var img4 = document.getElementById('img_report_problemSubmitRank');

             // 将图表转换成图片，并保存在图片域当中

             img1.src = myChart1.getDataURL({

                 pixelRatio: 2,

                 backgroundColor: '#fff'

             });

             img2.src = myChart2.getDataURL({

                 pixelRatio: 2,

                 backgroundColor: '#fff'

             });

             img3.src = myChart3.getDataURL({

                 pixelRatio: 2,

                 backgroundColor: '#fff'

             });

             img4.src = myChart4.getDataURL({

                 pixelRatio: 2,

                 backgroundColor: '#fff'

             });

             // 先把图表隐藏，让图片先显示出来

             document.getElementById('img_report_classanalyze').style.display="block";

             document.getElementById('img_report_overall').style.display="block";

             document.getElementById('img_report_studentPassRank').style.display="block";

             document.getElementById('img_report_problemSubmitRank').style.display="block";

             document.getElementById('report_classanalyze').style.display="none";

             document.getElementById('report_overall').style.display="none";

             document.getElementById('report_studentPassRank').style.display="none";

             document.getElementById('report_problemSubmitRank').style.display="none";

             // 隐藏不想显示的区域

             $(".content_l").hide();

             $(".search").hide();

             $("form").hide();

             // 打印选定的web页面

             $("#print").jqprint();

             // 将之前隐藏的页面重新显示出来

             $("form").show();

             $(".search").show();

             $(".content_l").show();

             // 再将图片隐藏，将动态echarts突变显示出来

             document.getElementById('img_report_classanalyze').style.display="none";

             document.getElementById('img_report_overall').style.display="none";

             document.getElementById('img_report_studentPassRank').style.display="none";

             document.getElementById('img_report_problemSubmitRank').style.display="none";

             document.getElementById('report_classanalyze').style.display="block";

             document.getElementById('report_overall').style.display="block";

             document.getElementById('report_studentPassRank').style.display="block";

             document.getElementById('report_problemSubmitRank').style.display="block";

         }

     </script>

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

展示区：

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

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

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

最后祝成功！！！

相关文章