html2canvas绘制带样式表格,H5移动端html2canvas截取表格方法探讨

一、直接杀主题：某日接需求，需将表格生成一张图片进行浏览(H5移动端)。

1、想到两个插件html2canvas与dom-to-image，开始估计是版本问题用html2canvas生成png出现空白部分，且截图不完全。因为是表格有15个字段之多，带滚动条。也就是说在H5可视dom里，滚动条后面字段基本是截不到的。

2、转dom-to-image也是同样问题。而且安卓toPng方法没问题，跑IOS那边toPng压根就不甩你非要toSvg，且生成这样的，看得烦没耐心。

3、又投向html2canvas。估计运气好，用了一个压缩版本，说下思路。

4、首先测试了一下html2canvas，安卓与IOS可以正常截图。

5、然后，想到找后台要到表格长与高。这是关键，因为我想你是可视dom截图，那么我直接跟你表格全铺，没有滚动条。在table外层套一个

二、过程与代码段：

1、html2canvas.min.js

/*!

* html2canvas 1.0.0-alpha.12

* Copyright (c) 2018 Niklas von Hertzen

* Released under MIT License

*/

2、按钮触发事件

$("#btnSave").click(function () {

//为了直观我就这样写了，后台传过来就是一个值，#mydom是table外层div的id

$("#mydom").width(18 * 100) //比如18个字段,每个字段100px宽度，当然这是理想状态，现实每个字段大小不一，这里不担心，只要搞到表长的值就行了。

$("#mydom").height(8 * 40) //同理高度8行，每行40高度。

html2canvas(document.querySelector("#mydom")).then(canvas => {

//截图是画布canvas ，给他转img

var dataUrl = canvas.toDataURL();

var newImg = document.createElement("img");

newImg.src = dataUrl;

//这里用到layer组件，弄出弹出框，把img塞进来

layer.open({

title: '请长按图片另存为...',

area: ['90%', '40%'],

btn: ['关闭'],

shadeClose: true,

content: '

//关闭弹出框，暴力刷页面，让$("#mydom").width(...)与$("#mydom").height(...)失效

end: function () {

location.reload();

}

});

$("#download_img").append(newImg); //把图片塞入弹出框content里。

});

})

总结：办法可能过于粗暴，看各位大神指点不足或有没更好的思路与解决办法。