我有一个非常溢出的div.它基本上包括一个大的组织结构图.我想要做的是用html2canvas库导出div的整个内容而不是可见部分,但到目前为止我无法实现它.下面的代码片段不会呈现完整的内容.有没有办法实现它？

function export(){  
    html2canvas( [ document.getElementById('diagram') ], {
        onrendered: function(canvas) {

            var dataUrl = canvas.toDataURL();
            window.open(dataUrl, "toDataURL() image", "width=800, height=800");
            //Canvas2Image.saveAsPNG(canvas);
        }
     });
}

我正在使用BasicPrimitives库来生成组织结构图.它需要一个div并插入所有元素.由于我的图表中等大,它从容器中溢出.
Xhtml代码如下：

<rich:panel style="float: left; width: 100%;">
     <div style="float: left; height:600px; margin-left: 1%;  width: 19%; border-style: dotted; border-width:1px;">
          Some irrelevant content
     </div>
     <div id="diagram" class='diagram' style="float: right; height:600px;  width: 59%; border-style: dotted; border-width:1px;">
          This is the div all charts are dynamically inserted
     </div>
     <div style="float: left; height:600px; margin-left: 1%;  width: 19%; border-style: dotted; border-width:1px;">
          Some more irrelevant content 
     </div>
</rich:panel>

解决方法:

我不知道html2canvas中是否有一个简单的选项来执行此操作(即将所有溢出设置为可见的选项),但是当您调用导出函数时,一种迂回的方式可能是将图元素的overflow属性的父元素设置为可见,然后在html2canvas’onrendered回调上再次将其设置为隐藏,以便用户有最短的时间来感知它：

function export(){ 
document.getElementById('diagram').parentNode.style.overflow = 'visible'; //might need to do this to grandparent nodes as well, possibly.
    html2canvas( [ document.getElementById('diagram') ], {
        onrendered: function(canvas) {
            document.getElementById('diagram').parentNode.style.overflow = 'hidden';
            var dataUrl = canvas.toDataURL();
            window.open(dataUrl, "toDataURL() image", "width=800, height=800");
            //Canvas2Image.saveAsPNG(canvas);
        }
     });
}