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 = DataURL();
var newImg = ateElement("img");
newImg.src = dataUrl;
//这⾥⽤到layer组件，弄出弹出框，把img塞进来
layer.open({
title: '请长按图⽚另存为...',svg canvas
area: ['90%', '40%'],
btn: ['关闭'],
shadeClose: true,
content: '
//关闭弹出框，暴⼒刷页⾯，让$("#mydom").width(...)与$("#mydom").height(...)失效end: function () {
}
});
$("#download_img").append(newImg); //把图⽚塞⼊弹出框content⾥。
});
})
总结：办法可能过于粗暴，看各位⼤神指点不⾜或有没更好的思路与解决办法。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。