前端通過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;
   }
}

效果