当前位置: 首页 > 工具软件 > Html2Article > 使用案例 >

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

黄骏喆
2023-12-01

前面写过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或者使用代理。

 类似资料: