JAVA高级面试进阶训练营视频教程

admin

当使用浏览器的打印功能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);
      }

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