1. Kill the topic directly: if you need to pick up the demand one day, you need to generate a picture of the form to browse (H5 mobile).

1. Think of the two plug-ins html2canvas and dom-to-image. At first, it is estimated that there is a blank part of the png generated by html2canvas and the screenshot is not complete. Because the table has as many as 15 fields, with scroll bars. In other words, in the H5 visual dom, the fields behind the scroll bar are basically unavailable.

2. Switching to dom-to-image is the same problem. And Android toPng method is fine, running IOS side toPng does not want to dump you toSvg at all, and generate this is boring and impatient.

3, go to html2canvas again. May be lucky, using a compressed version, say the next train of thought.

4. First of all, test html2canvas. Android and IOS can take screenshots normally.

5, then, think of finding the background to the table length and height. This is the key, because I want you to be a visual dom screenshot, so I will spread the form with you directly without scrollbars. Wrap a < div style= "overflow: hidden;" > < / div > around the table to prevent the table from breaking the H5 page layout. The screenshot is displayed in the layer pop-up box, and long press to save the picture, close the pop-up box to refresh the new parent page (bad experience, but very violent).

II. Process and code snippet:

1, html2canvas.min.js

URL: http://html2canvas.hertzen.co...
version is as follows:

 /*!
 * html2canvas 1.0.0-alpha.12 <https://html2canvas.hertzen.com>
 * Copyright (c) 2018 Niklas von Hertzen <https://hertzen.com>
 * Released under MIT License
 */

2, button trigger event

    $("-sharpbtnSave").click(function () {
        //-sharpmydomtabledivid
        $("-sharpmydom").width(18 * 100) //18,100px
        $("-sharpmydom").height(8 * 40) //840
        html2canvas(document.querySelector("-sharpmydom")).then(canvas => {
        
            //canvas img
            var dataUrl = canvas.toDataURL();
            var newImg = document.createElement("img");
            newImg.src = dataUrl;
            
            //layerimg
            layer.open({
                title: "...",
                area: ["90%", "40%"],
                btn: [""],
                shadeClose: true,
                content: "<div id="download_img"></div>",
                //$("-sharpmydom").width(...)$("-sharpmydom").height(...)
                end: function () {
                    location.reload();
                }
            });
            $("-sharpdownload_img").append(newImg); //content
        });
    })
   

conclusion: the method may be too rough, let"s see if the gods don"t give enough advice or if there are any better ideas and solutions.