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