html2canvas.js截图只截取当前可视区域 (可能的两种方法,暂存)

第一种

问题：之前使用orgchart团队架构图导出图片，会出现图片导出不全的问题

原因：当时使用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);
                }
            });
        });

 

 

 

第二种

 

download: function() {
                    var _this = this;
                    var targetDom = $("#demo");
                    var copyDom = targetDom.clone();
                    copyDom.width(targetDom.width() + "px");
                    copyDom.height(targetDom.height() + "px");
                    $('body').append(copyDom);
                    html2canvas(copyDom, {
                        onrendered:function(canvas) {
                            var contentWidth = canvas.width;
                            var contentHeight = canvas.height;
                            var pageHeight = contentWidth / 592.28 * 841.89;
                            var leftHeight = contentHeight;
                            var position = 0;
                            var f="p";
                            contentHeight > contentWidth ? f = 'p' : f = 'l';
                            var pageData = canvas.toDataURL('image/png', 1.0);
                            _this.aaa = canvas.toDataURL();
                            var pdf = new jsPDF(f, 'px', [contentWidth, contentHeight]);
                            pdf.addImage(pageData, 'png', 0, 0, contentWidth, contentHeight);
                            pdf.save('content.pdf');
                            copyDom.remove();
             }
       });
},