html2canvas.js 与 dom-to-image.js 实现截图功能

html2canvas.js 与 dom-to-image.js 实现截图功能

由于业务需要，要将html的表格转成图片下载下来，一开始使用的是html2canvas.js。
功能是可以实现，但是有缺陷（表格存在合并的单元格时，生成的图片表格线框不完整），后来很不容易知道了dom-to-image.js,尝试之后觉得非常不错。

 废话不多说，开搞。

 第一步：下载必要的js库  (下载最新库)

   ②dom-to-image.js：https://github.com/tsayen/dom-to-image

html2canvas.js

html2canvas.js 是一款比较优秀的插件，它可以轻松地帮你将html 代码转换长canvas，进而生成可保存分享的图片，是当前市面上使用较多的一款插件，但他任然存在缺陷，使用过来坑坑洼洼。缺陷较多也不适用于项目需求。这里便不做多详解，下面是html2canvas.js 躺过的缺陷记录
缺陷可参考： https://segmentfault.com/a/1190000015992221

dom-to-image.js

window.onload=function(){
    var node = document.getElementById('download');

    domtoimage.toPng(node)
    .then(function (dataUrl) {
        console.log(dataUrl)
        var link = document.createElement('a');
        link.download = "未命名.jpeg";
        link.href = dataUrl;
        link.click();

    });
}

这里 默认打印出来的背景是透明的 要想不透明 就在 目标 download 加上指定的css 样式

   <div id="download" style="background: #fff;">

希望能够帮到你~