Javascript 将div及其样式复制到新窗口_Javascript_Jquery_Css

Javascript 将div及其样式复制到新窗口

javascript jquery css

Javascript 将div及其样式复制到新窗口,javascript,jquery,css,Javascript,Jquery,Css,我正在尝试将一个div复制到一个新窗口进行打印，这很好但是div没有附加任何样式就复制了他 $('#PrintNews').bind('click', function () { var printContents = new $("#divToPrint").clone(); var myWindow = window.open("", "popup", "width=1000,height=600,scrollbars=yes,re

我正在尝试将一个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中的样式相同？

将外部css包括到要复制div的窗口中。否则，将只复制内联样式。

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

听起来您应该使用特定于打印的样式。只有在样式表链接中包含

media=“print”

属性，才能将样式表应用于打印。然后，此样式表负责隐藏页面中您不想打印的任何元素，并定位您要打印的元素。这样，您就不会受到弹出窗口拦截器的影响，并为用户减少打印文档的步骤

通过在原始样式表中使用媒体查询，可以实现同样的效果。下面是一个非常简单的例子：

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

要测试这一点，只需删除@media包装器并查看它在浏览器中的外观。它会让你对页面在纸上的外观有一个很好的了解。

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

    doc.write("<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">");
    doc.write("<html>");
    doc.write("<head>");
    doc.write("<link href='/css/print.css' rel='stylesheet' type='text/css' />"); // your css file comes here.
    doc.write("</head>");
    doc.write("<body>");
    doc.write($(printContents).html());
    doc.write("</body>");
    doc.write("</html>");

doc.write（“”）；
文件以（“”）号填写；
文件以（“”）号填写；
文件写入（“”；//你的css文件在这里。
文件以（“”）号填写；
文件以（“”）号填写；
doc.write（$（printContents.html（））；
文件以（“”）号填写；
文件以（“”）号填写；

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

var showPrintWindow = function (context) {
        var printWindow = window.open('', '');
        var doc = printWindow.document;
        doc.write("<html><head>");
        doc.write("<link href='/css/printReport.css' rel='stylesheet' type='text/css' media='print' />");
        doc.write("</head><body>");
        doc.write(context);
        doc.write("</body></html>");
        doc.close();

        function show() {
          if (doc.readyState === "complete") {
              printWindow.focus();
              printWindow.print();
              printWindow.close();
          } else {
              setTimeout(show, 100);
          }
        };
        show();
    };

var showPrintWindow=函数（上下文）{
var printWindow=window.open（“”，”）；
var doc=printWindow.document；
文件以（“”）号填写；
文件以（“”）号填写；
文件以（“”）号填写；
文件编写（上下文）；
文件以（“”）号填写；
doc.close（）；
函数show（）{
如果（doc.readyState==“完成”）{
printWindow.focus（）；
printWindow.print（）；
printWindow.close（）；
}否则{
设置超时（显示，100）；
}
};
show（）；
};

您复制的原始div是使用内联样式设置样式的，还是从外部ccs文件中复制的？执行此操作时，它将仅复制内联样式。任何来自样式表或（ugh）标签的样式都不会被复制。它来自外部css。那么我的选择是什么呢？

doc.write（“”）

在另一个

doc.write（）

之前，我知道它是什么。我唯一的问题是，它打开了一个大窗口打印选项-我想重新大小它。。有可能吗？我不这么认为-打印窗口依赖于浏览器-例如，Chrome的打印窗口与大多数其他浏览器使用的打印窗口非常不同。即便如此，当用户试图打印弹出窗口中出现的任何内容时，您肯定也会遇到同样的问题？我不关心打印页面的外观-只关心大小，如果我重新调整窗口大小，那么它会自动重新调整打印窗口的大小

window.open（“”，“，”高度=400，宽度=800”）这可能对@EranMeir有帮助