So, I have a page that contains multiple bootstrap-cards - those bootstrap-cards contain an Leaflet - map inside of it, like the following:
In the top right corner you can see a print-button. This button executes my printCard function, that works like the following: I open a new window, append the card-html to it, and execute the window.print() function. This is because the user should be able to choose whether he wants to print the full page (via browser print), or a single card.
function printCard(ele, title){
var mywindow = window.open('', 'new div', 'height=1080,width=1080');
mywindow.document.write('<html><head><title></title>');
mywindow.document.write('<script type="text/javascript" src="./javascript/jquery.min.js"><\/script>');
mywindow.document.write('<link rel="stylesheet" href="./stylesheets/bootstrap.min.css" type="text/css" />');
mywindow.document.write('<link rel="stylesheet" href="./stylesheets/print.css" type="text/css" />');
mywindow.document.write('<script type="text/javascript" src="./javascript/leaflet.js"><\/script><script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.4.1/leaflet.markercluster-src.js"><\/script><script type="text/javascript" src="./javascript/leaflet-print.js"><\/script>');
mywindow.document.write('</head><body >');
mywindow.document.write(ele.prop("outerHTML"));
mywindow.document.write('</body></html>');
mywindow.document.close();
mywindow.focus();
setTimeout(function(){mywindow.print();
mywindow.close();
},1000);
return true;
}
Everything works perfectly fine, the only thing is, it throws the html content all around the printing-page:
Any idea what the problem could be?
