将div和他的风格复制到新窗口

我正在尝试将一个div复制到一个新的窗口进行打印，这样工作正常，但他复制的div没有附加任何风格。

$('#PrintNews').bind('click', function () { var printContents = new $("#divToPrint").clone(); var myWindow = window.open("", "popup", "width=1000,height=600,scrollbars=yes,resizable=yes," + "toolbar=no,directories=no,location=no,menubar=no,status=no,left=0,top=0"); var doc = myWindow.document; doc.open(); $(printContents).find("#PrintNews").remove(); doc.write($(printContents).html()); doc.document.close(); doc.focus(); doc.print(); doc.close(); }); }); 

我如何在一个新窗口中打开这个div进行打印，但是他的所有样式都像原来的div一样？

Answer 1

你应该构建这样的新窗口的html，以链接extarnal css文件。

  doc.write(""); doc.write(""); doc.write(""); doc.write(""); // your css file comes here. doc.write(""); doc.write(""); doc.write($(printContents).html()); doc.write(""); doc.write(""); 

Answer 2

这是因为在打印之前没有加载样式。

 var showPrintWindow = function (context) { var printWindow = window.open('', ''); var doc = printWindow.document; doc.write(""); doc.write(""); doc.write(""); doc.write(context); doc.write(""); doc.close(); function show() { if (doc.readyState === "complete") { printWindow.focus(); printWindow.print(); printWindow.close(); } else { setTimeout(show, 100); } }; show(); }; 

Answer 3

这取决于div的样式。 如果基于ID或类应用样式，那么您可以在新窗口中包含相同的样式表。 但是，如果任何样式都基于元素的祖先，那么它就变得棘手，因为你必须复制祖先元素才能应用精确的样式。

听起来你应该使用特定于打印的样式。 只能通过在样式表链接上包含media="print"属性来应用样式表进行打印。 然后，此样式表负责隐藏页面中您不想打印的任何元素，并定位您执行的那些元素。 这样您就不会受弹出窗口阻止程序的影响，并且可以减少用户打印文档的步骤。

您可以通过在原始样式表中使用媒体查询来实现相同的目的。 这是一个非常简单的例子：

 @media print { .print {width:100%;} .noPrint {display:none;} } 

要测试它，只需删除@media包装器，看看它在浏览器中的外观。 它应该让您非常了解页面在纸上的外观。

Answer 4

将外部css包含在复制DIV的窗口中。 否则只会复制内联样式。