【解决】html2canvas.js截图只截取当前可视区域

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zt_fucker/article/details/76583032

前面写过Echarts图表生成PDF文件http://blog.csdn.net/zt_fucker/article/details/71601362

只是一个简单的demo示例，包含图片和文字，然后最近需求则是大范围的文字和ajax动态获取的嵌套数据。

---

版本：html2canvas 0.4.1.

原页面代码非常复杂，无法完全还原代码。页面代码中涉及到了iframe、easyUI，tab标签

原因：当时使用tab标签分类显示的时候，当前选中模块显示内容，未选中模块内容设置为隐藏状态。而html2canvas插件无法识别隐藏的dom元素。

思路：找到需要生成截图的dom节点，在页面渲染完成之后，克隆一份备份节点，追加在body后面，这份备份的节点不能是隐藏状态，设置备份节点的绝对定位和图层级别。

注：因为是ajax动态加载数据，所以不能在页面加载的时候就执行克隆复制节点，最好是设置一个按钮触发。

        $("#downpdf").on("click", function() {
            //获取节点高度，后面为克隆节点设置高度。
            var height = $(TargetNode).height()
            //克隆节点，默认为false，不复制方法属性，为true是全部复制。
            var cloneDom = $(TargetNode).clone(true);
            //设置克隆节点的css属性，因为之前的层级为0，我们只需要比被克隆的节点层级低即可。
            cloneDom.css({
                "background-color": "white",
                "position": "absolute",
                "top": "0px",
                "z-index": "-1",
                "height": height
            });
            //将克隆节点动态追加到body后面。
            $("body").append(cloneDom);
            //插件生成base64img图片。
            html2canvas(cloneDom, {
                //Whether to allow cross-origin images to taint the canvas
                allowTaint: true,
                //Whether to test each image if it taints the canvas before drawing them
                taintTest: false,
                onrendered: function(canvas) {
                    var img = canvas.toDataURL('image/jpeg', 1.0);
                    //打印出来之后:data:image/jpeg;base64,/9j/4AAQSkZJRg....
                    //可以通过chrome来查看
                    console.log(img);
                }
            });
        });

注：如果出现跨域问题，尝试修改一下header或者使用代理。