用Canvas实现截取网页内容保存为图片

最近有个客户提出需求，要把报表导出成电子版，什么格式都行。

当时我想啊，转成word、Excel不可取，转成pdf可以完整保留页面样式，所以就找各种html转pdf的插件，也试了pechkin、itextsharp等等，然后就发现一个致命的问题。

我的数据是js绑定的，页面里点和线的高度也是根据参照物在页面中的高度计算的，所以要等数据加载完成后再转换，而这两个插件都没转成功。

所以就想啊，只能转成图片了，明确了方向，有目的的寻找解决方案，很快就找到了一个插件，用canvas画出指定的html。这个插件就是html2canvas。传送门：html2canvas

这个插件的调用方法很简单，把需要转成图片的那一部分容器对象传入即可，如果是整个页面，可以传入document.body。

引入js文件

<script src="js/html2canvas.min.js"></script>

下面是测试代码

html2canvas(document.body).then(canvas => { saveImg(canvas) });//按照官网给的调用方式，代码很简洁，saveImg是我自定义的回调函数，用于保存图片，获取到了canvas，就能够用canvas.toDataURL()获取图片的base64字符串，然后进行保存即可。