web页面不能打印局部带画布(canvas)的内容的解决办法

       封装好了的js可以打印画面的局部内容，但是遇到画布(canvas)时，画面的内容就不能被正常打印出来，解决这个问题的方法是，调用打印之前，先创建一个img的元素，把img宽度和高度设置成跟画布一样的值，调用画布(canvas)的toDataURL("image/png")，将toDataURL生成的数据赋给img(src)元素，获取画布的父元素，把img元素内容加载到画布的父元素里，同时删除画布元素内容，接着执行打印处理，打印结束后，再把img元素删除掉，同时把画布给重新加载回来，经过这几个处理，就能解决局部打印不能打印画布内容的问题。

以下是部分代码：

            // 获取画布的对象(canvas)
            var mycanvas = $("#BarEcharts canvas")[0];
            // 获取画布的父对象(div)
            var parent = mycanvas.parentElement;
            // 根据画布内容生成图片
            var image = mycanvas.toDataURL("image/png");
            // 创建一个img图片对象元素
            var img = document.createElement("img");
            // 将画布生成的图片内容给img图片对象元素
            img.src = image;
            // 将画布宽度给img图片对象元素宽度
            img.width = mycanvas.width;
            // 将画布高度给img图片对象元素高度
            img.height = mycanvas.height;
            // 将生成的图片内容加载到画布所在父元素的内容里
            parent.appendChild(img);
            // 从画布所在的父元素里删除画布自己的内容
            parent.removeChild(mycanvas);
            // 开始打印
            $("#centerdiv").print();
            // 回复画布的内容
            parent.appendChild(mycanvas);
            // 将生成的图片内容从到画布所在父元素的内容里删除
            parent.removeChild(img);

转载于:https://my.oschina.net/u/3043445/blog/829687