【发布时间】：2021-08-18 13:15:41
【问题描述】：
所以，我有一个包含多个引导卡的页面 - 这些引导卡包含一个传单 - 其中的地图，如下所示：
在右上角，您可以看到一个打印按钮。此按钮执行我的 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 内容扔到打印页面周围：
知道可能是什么问题吗？
【问题讨论】：
-
仅凭您提供的代码很难说，但在我看来，您可能以“错误”的顺序加载 JavaScript 代码；您可以尝试更改功能，如您在此处看到的那样：jsfiddle.net/xuoyts8q/1？
-
@secan 感谢您的建议。可悲的是，更改顺序并没有真正帮助 - 它仍然显示与我在上一个屏幕截图中看到的相同的结果..
-
那么问题可能不在于您发布的功能，而在于其他地方。无论如何，如果不知道 HTML、CSS 和 JavaScript 代码的内容，就不可能知道在哪里：也许“print.css”中的某些定位取决于您未包含在弹出窗口中的 HTML 元素，也许有你的一个 JavaScript 文件有问题，也许……谁知道呢？
-
@secan 你是对的......我的代码中缺少一个 leaflet.css 文件，导入该 css 文件解决了这个问题。非常感谢你，你真的帮助了我。
标签： javascript html css printing leaflet