Openlayers 3印刷地図部

"地図"部を印刷するネイティブな方法はありますか？これらの両方は、ブラウザの印刷ウィンドウを開きますが、両方が空白のプレビューを持ってOpenlayers 3印刷地図部

var divContents = $("#map").html(); 
        var printWindow = window.open('', '', 'height=400,width=800'); 
        printWindow.document.write('<html><head><title>DIV Contents</title>'); 
        printWindow.document.write('</head><body >'); 
        printWindow.document.write(divContents); 
        printWindow.document.write('</body></html>'); 
        printWindow.document.close(); 
        printWindow.print();

私はカップルの異なるアプローチを試してみた

...

var printContents = document.getElementById("map").outerHTML; 
        var popupWin = window.open('', '_blank', 'width=600,height=300'); 
        popupWin.document.open(); 
        popupWin.document.write('<html><head><link rel="stylesheet" type="text/css" href="style.css" /></head><body onload="window.print()">' + printContents + '</body></html>'); 
        popupWin.document.close();

も...、それをコードは "マップ" divを見つけるが、完全なHTMLや何かを得ることができないようだ？

何か助けていただければ幸いです。

出典

2016-07-11 Funn_Bobby

まず、マップdivにキャンバス要素を配置します。私はマップhereを使用している場合は、私が実行してキャンバスにアクセスすることができます。

var canvas = document.getElementById("map").getElementsByClassName("ol-unselectable")[0];

次に、画像オブジェクトに変換します。そして、

var img = canvas.toDataURL("image/png");

、ページや印刷に画像を印刷することができますページ：

document.write('<img src="'+img+'"/>');

出典

2016-07-11 19:00:43

ありがとう!!!これは完全に働いた!! –

これはpngへのエクスポートです。これは印刷機能ではありません。 –

また、CORSの問題があります –

答えて

関連する問題