2023年6月20日发(作者：)

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

2023年6月20日发(作者：)

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