前端通过html2canvas打印echarts图表

项目上需要实现导出和打印html，本来直接调用的window.print，结果发现echarts图表无法打印，会是空白的，网上搜索了一下，都是采用转换为64位编码，感觉比较麻烦，找到了另一种办法，利用html2canvas直接将页面转换为canvas，再打印canvas就行了。

代码

// 打印日报
            $("#printall").on("click", function () {
                if (confirm("您确认打印该PDF文件吗?")) {
                    // 先用html2canvas将页面整个转为一张截图，再打印，防止出现echarts无法打印
                    html2canvas(document.getElementById('monthlyReport')).then(
                        function (canvas) {
                            window.print(canvas);  // 打印canvas
                        }
                    );
                }
            });

有个问题，尽管通过document.getElementById('monthlyReport')获取了对应的id,但是在打印时还是会打印当前页面的东西，有一部分不需要的东西也被打印了

如图：

打印的效果

所以需要将上面的部分隐藏，使用css的 media,可以自动在调用打印时隐藏，当然也可以通过js在打印前隐藏，打印后再show

代码

/* 打印时隐藏面包屑导航和按钮无需打印 */
@media print{        
   .mianbaoxie,.queryBtn,.btnArea{
      display:none;
   }
}

效果