關於前端使用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);
      }

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