Openlayers 3 打印地图 div

Question

是否有本地方式打印 "map" div？

我尝试了几种不同的方法...

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();

还有...

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();

这两个都打开浏览器打印 window 但都有一个空白预览，看起来代码正在寻找 "map" div 但无法获得完整 HTML 什么的？

非常感谢任何帮助！！

Answer 1

首先在地图 div 中找到 canvas 元素。如果我使用地图 here，我可以通过以下方式访问 canvas：

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

接下来，将其转换为图像对象：

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

然后，您可以打印页面上的图像并打印页面：

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

Openlayers 3 打印地图 div

Openlayers 3 print map div

openlayers

openlayers-3