Copy div And its style in a new window

I am trying to copy a div into a new print window, which works fine but the div copied it without attachment to it.

$('#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(); }); }); 

How can I open this div in a new window for printing, but with all its styles, as in the original div?

+4
source share
4 answers

you should create the html of a new window something like this to link the extarnal css files.

  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>"); 
+3
source

It depends on how the style of the div is. If styles are applied based on an identifier or class, then you should be fine to just include the same stylesheet in a new window. However, if any of the styles is based on the ancestors of the element, then it becomes complicated since you will need to copy the elements of the ancestors in order to apply the exact styles.

It looks like you should use print-specific styles. You can apply a stylesheet for printing only by including the media="print" attribute in the stylesheet. This style sheet is then responsible for hiding any elements on the page that you do not want to print and position those that you do. This way you will not be exposed to pop-up blockers and give the user one more step to print the document.

You can achieve the same by using media queries in the original stylesheet. Here is a very simple example:

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

To verify this, simply remove the @media shell and see how it looks in your browser. This should give you a pretty good idea of ​​how the page will look on paper.

+1
source

This is because styles were not loaded before printing.

 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(); }; 
+1
source

Include external css in the window into which you copy your DIV. otherwise only inline styles will be copied.

0
source

All Articles