2016-07-11 3 views
2

Есть ли собственный способ распечатать «карту» div?Openlayers 3 print 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(); 

Оба эти открытия окна браузера печати, но оба имеют пустой предварительный просмотр, это кажется, что код находит «карту» div, но не способен получить полный HTML-код или что-то еще?

Любая помощь очень ценится !!

ответ

3

Начинаем с поиска элемента холста на карте div. Если я использую карту here, я могу получить доступ к холсту, выполнив:

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

Далее, преобразовать его в объект изображения:

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

Затем вы можете распечатать изображение на странице и печатях страница:

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

Спасибо !!! Это сработало отлично! –

+1

Это экспорт в png. Это не функция печати. –

+0

Также у нас есть проблема CORS –