H5移动端html2canvas截取表格方法探讨

Question

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

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

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

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

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

5、然后，想到找后台要到表格长与高。这是关键，因为我想你是可视dom截图，那么我直接跟你表格全铺，没有滚动条。在table外层套一个<div style="overflow: hidden;"></div>，避免表格撑破H5页面布局。截出来的图在layer弹出框中展现，并长按保存图片，关闭弹出框回调刷新父页面（体验不好，但很暴力）。

二、过程与代码段：

1、html2canvas.min.js

网址：http://html2canvas.hertzen.co...
版本如下：

 /*!
 * html2canvas 1.0.0-alpha.12 <https://html2canvas.hertzen.com>
 * Copyright (c) 2018 Niklas von Hertzen <https://hertzen.com>
 * 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: '<div id="download_img"></div>',
                //关闭弹出框，暴力刷页面，让$("#mydom").width(...)与$("#mydom").height(...)失效
                end: function () {
                    location.reload();
                }
            });
            $("#download_img").append(newImg); //把图片塞入弹出框content里。
        });
    })
   

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

Answer 1

目前没有完整的方案： html2canvas.min.js 在移动端把html生成图片只能生成当前页面滚动不会生成 而且版本低点的手机会报错 之前都是后台生成pdf 前端在移动端预览