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

1、准备好js文件

jquery.PrintArea.js

 

2.引入js文件

<script src="~/javaScript/jquery.PrintArea.js"></script>

3.定义一个方法

 doPrint() {// 获取echarts图表
             var myChart1 = echarts.init(document.getElementById('myChart'));
             //myChart2.setOption(option3);
             // 获取图片（此时还未实现转换暂时处于隐藏状态）
             var img1 = document.getElementById('img_report');

             // 将图表转换成图片，并保存在图片域当中
             img1.src = myChart1.getDataURL({
                 pixelRatio: 2,
                 backgroundColor: '#fff'
             });

             // 先把图表隐藏，让图片先显示出来
             document.getElementById('img_report').style.display="block";

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

           
             $("#printContent").printArea();
            
             // 再将图片隐藏，将动态echarts突变显示出来
             document.getElementById('img_report').style.display="none";
             document.getElementById('myChart').style.display="block";
            }

4.HTML代码如下

            <div id='printContent' class="layui-card-body">
            　　<div id="myChart" style="width:100% !important; height: 400px;">
            　　</div>
            </div>
            <img src="" style="width:100% !important; height: 350px;display: none;" id="img_report" />

5.添加按钮调用方法

 <button v-on:click="doPrint()" class="layui-btn layui-btn-sm">打印</button>