4

我正在尝试将 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 一样？

4

4 回答 4

3

您应该构建类似这样的新窗口的 html，以链接外部 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>");
于 2013-09-19T12:49:10.370 回答
2

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

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();
    };
于 2015-01-30T20:25:56.743 回答
1

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

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

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

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

要对此进行测试，只需删除 @media 包装器并查看它在浏览器中的外观。它应该让您很好地了解页面在纸上的外观。

于 2013-09-19T12:45:43.277 回答
0

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

于 2013-09-19T12:45:19.157 回答