Openlayers 3 打印地图 div答案

【问题标题】：Openlayers 3 print map divOpenlayers 3 打印地图 div
【发布时间】：2016-07-11 16:52:16
【问题描述】：

有打印“地图”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();

这两个都打开了一个浏览器打印窗口，但都有一个空白预览，似乎代码正在寻找“地图”div，但无法获得完整的 HTML 或其他东西？

非常感谢任何帮助！

【问题讨论】：

标签： openlayers openlayers-3

【解决方案1】：

首先在地图 div 中定位画布元素。如果我使用地图here，我可以通过以下方式访问画布：

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

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

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

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

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

【讨论】：

这是导出为 png。这不是打印功能。
我们还有 CORS 问题