html2canvas 如何截取iframe 中的内容

2025-09-23 13:29:58

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

html2canvas 如何截取iframe 中的内容

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

html2canvas 如何截取iframe 中的内容

3、  $("#downpdf").on("click", function() {

            //获取节点高度,后面为克隆节点设置高度。

            var height = $(TargetNode).height()

            //克隆节点,默认为false,不复制方法属性,为true是全部复制。

            var cloneDom = $(TargetNode).clone(true);

            //设置克隆节点的css属性,因为之前的层级为0,我们只需要比被克隆的节点层级低即可。

       

html2canvas 如何截取iframe 中的内容

4、     cloneDom.css({

                "background-color": "white",

                "position": "absolute",

                "top": "0px",

                "z-index": "-1",

                "height": height

            });

            //将克隆节点动态追加到body后面。

            $("body").append(cloneDom);

            //插件生成base64img图片。

            html2canvas(cloneDom, {

         

html2canvas 如何截取iframe 中的内容

5、       //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);

                }

            });

        });

html2canvas 如何截取iframe 中的内容

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢