1、首先,原页面代码非常复杂,无法完全还原代码。页面代码中涉及到了iframe、easyUI,tab标签。
2、当时使用tab标签分类显示的时候,当前选中模块显示内容,未选中模块内容设置为隐藏状态。而html2canvas插件无法识别隐藏的dom元素。
3、 $("#downpdf").on("click", function() { //获取节点高度,后面为克隆节点设置高度。 var height = $(TargetNode).height() //克隆节点,默认为false,不复制方法属性,为true是全部复制。 var cloneDom = $(TargetNode).clone(true); //设置克隆节点的css属性,因为之前的层级为0,我们只需要比被克隆的节点层级低即可。
4、 cloneDom.css({ "bac氯短赤亻kground-color": "white", "position": "absolute", "top": "0px", "z-index": "-1", "height": height }); //将克隆节点动态追加到body后面。 $("body").append(cloneDom); //插件生成base64img图片。 html2canvas(cloneDom, {
5、 //Whether to allow cross-origi艘绒庳焰n 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); } }); });