如何打印网页上的canvas图像

使用JavaScript无法实现canvas打印问题的解决

当使用浏览器的打印功能 window.print() 无法打印网页上的canvas图像，但是可以通过转换canvas成一个图片的形式来实现canvas的打印

解决方法

• getElementById获取canvas元素。
• 使用HTMLCanvasElement.toDataURL()的 toDataURL()方法获取canvas的base64码。
• 将获取的base64动态添加到img标签的src上。（html里的img标签不要写src属性）

/*generate Report模块打印方法说明
    @method print
    @param{数组} eNum 表示要打印的echarts图数量
    @param{字符串} name 你要选区的dom节点id名称
    参考 traffic measure和technical alarm界面
*/
print(eNum: number[], name: string) {
    const echartCanvas = document.getElementsByTagName('canvas');
    if (echartCanvas.length) {
        eNum.forEach(item => {
            document.getElementsByTagName('canvas')[item].setAttribute('id', 'echarts-canvas' + item);
            this['canvas' + item] = document.getElementById('echarts-canvas' + item);
            this['echartsImg' + item] = document.getElementById('echartsImg' + item);
            this['dataURL' + item] = this['canvas' + item].toDataURL();
            this['echartsImg' + item].src = this['dataURL' + item];
        });
    }
    const printelemnt: any = document.getElementById(name);
    const printHtml = printelemnt.innerHTML;
    window.document.body.innerHTML = printHtml;
    setTimeout(() => {
        window.print();
        window.location.reload();
    }, 500);
}

• toDataURL() MDN
  参考链接: https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toDataURL