html+jquery页面实现将echarts打印

需求：将页面中的内容打印到A4纸上

实现原理：将页面内容截图并添加到页面元素，使用htmlCanvas进行打印

html部分

被打印资源

<div id="print-wrap">
    ..内容
</div>

打印内容的暂存位置
<div id="reocrd-wrap">
     <img id="screenShotImg" style="" />
</div>

js部分

 function submitHandler(){
            // 点击导出按钮
            html2canvas(document.querySelector("#print-wrap")).then(function (canvas) {
                //获取截取图片路径
                var base64Url = canvas.toDataURL('image/png');
                var oImg = new Image();
                // 导出图片
                oImg.src = base64Url;
                document.getElementById("screenShotImg").src = base64Url;

                oImg.onload=function(){
                    var newstr = document.getElementById("reocrd-wrap").innerHTML;
                    var printWindow = window.open();
                    printWindow.document.write(newstr);
                    printWindow.print();
                    document.getElementById('screenShotImg').setAttribute('src','')
                }
            });
        }

需要htmlCanvs.js的支持 ，附上链接  html2canvas.hertzen.com/

将js复制到工程中并引入