javascript - 仅打印包含传单地图的 div

问题描述

所以，我有一个包含多个引导卡的页面 - 这些引导卡包含一个传单 - 里面的地图，如下所示：

在右上角，您可以看到一个打印按钮。此按钮执行我的 printCard 函数，其工作原理如下：我打开一个新窗口，将 card-html 附加到它，然后执行 window.print() 函数。这是因为用户应该能够选择是要打印整页（通过浏览器打印）还是单张卡片。

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;
  
}

一切都很好，唯一的是，它会在打印页面周围抛出 html 内容：

知道问题可能是什么吗？

标签： javascripthtmlcssprintingleaflet

javascript - 仅打印包含传单地图的 div

问题描述

解决方案

推荐阅读