Copy Div And His Style To New Window
Solution 1:
you should build the html of new window something like this, to link extarnal css files.
doc.write("<!DOCTYPE htmlPUBLIC \"-//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("<linkhref='/css/print.css' rel='stylesheet' type='text/css' />"); // yourcssfilecomeshere.
doc.write("</head>");
doc.write("<body>");
doc.write($(printContents).html());
doc.write("</body>");
doc.write("</html>");
Solution 2:
It's because styles had not been 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();
functionshow() {
if (doc.readyState === "complete") {
printWindow.focus();
printWindow.print();
printWindow.close();
} else {
setTimeout(show, 100);
}
};
show();
};
Solution 3:
It depends on the way the div is styled. If the styles are applied based on the ID or class then you should be fine to just include the same stylesheet in the new window. However if any of the styles are based on the element's ancestors then it becomes tricky as you would have to copy the ancestral elements in order for the exact styles to be applied.
It sounds like you ought to be using print-specific styles. You can apply a stylesheet to print only by including the media="print" attribute on the stylesheet link. This stylesheet is then responsible for hiding any elements in the page that you don't want to print and positioning the ones that you do. This way you are not subject to popup blockers and give the user one less step to print the document.
You can achieve the same by using media queries in your original stylesheet. Here is a very simple example:
@media print {
.print {width:100%;}
.noPrint {display:none;}
}
To test this just remove the @media wrapper and see how it looks in your browser. It should give you a pretty good idea of how the page will look on paper.
Solution 4:
Include external css into the window to which you are copying your DIV. otherwise only the inline styles will be copied.
Post a Comment for "Copy Div And His Style To New Window"