14

私はかなりオーバーフローしている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>
4

2 に答える 2

19

html2canvas にこれを行うための簡単なオプション (つまり、すべてのオーバーフローを可視に設定するオプション) があるかどうかはわかりませんが、エクスポート関数が呼び出されたときにダイアグラム要素のオーバーフロー プロパティの親を可視に設定するのが回り道かもしれません。 、次に 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);
        }
     });
}
于 2013-08-02T10:01:45.733 に答える