前端打印包含多个echarts图表的页面

记录一下项目中遇到的打印的问题

场景

打印包含多个Echarts图表的页面

思路

1，获取页面所有canvas标签转化成图片，替换原有的canvas
2，转化完成后将页面内容改为修改后的内容
3，window.print(); // 打印完成之后还原打印之前的页面或者reload()

遇到的问题

var cvs = document.getElementsByTagName("canvas"); //获取canvas集合之后，循环cvs，但是循环到一半就结束循环了

查询文档之后发现了这么一句话

相当于每次循环把canvas改变成img的时候，cvs这个集合就改变了，长度减1，index-1
明白了问题所在就好解决了，贴出代码