Im using firefox 16.0.2. I would like to print a div content with the css rules defined in the imported file. When trying to print in Chrome, it's work fine, but in Firefox, the printed page got no css formatted.
<html>
<head>
import css here
</head>
<body>
<div id="printable"></div>
</body>
</html>
When using javascript to print div id=printable, paper result only have a HTML content without CSS rules, the result on screen is perfect. Is there any way for Firefox print with all css defined, any help will be appreciated.
Addition below is my javascript to print div
function print(id)
{
var mywindow = window.open('', id, 'height=600,width=800');
var data = document.getElementById(id).innerHTML;
mywindow.document.write('<html><head><title>Print</title>');
mywindow.document.write('<link rel="stylesheet" href="../../lib/css/report/main.css" type="text/css" />');
mywindow.document.write('</head><body >');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
mywindow.print();
mywindow.close();
return true;
}
In main.css I try to use @media print {#printable.....} but it's not works. In Javascript I try to put media="print" to link tag like but it's still nothing effect to print preview.
4 Answers 4
Why don't you use a print specific media query instead?
@media print {
#printable {
/*Print style goes here*/
}
}
Your script writes out some HTML to start a stylesheet load, then calls print() without waiting for the stylesheet to actually load. You might want to not call print() until the load event for that <link> has fired.
Comments
Inspired by Boris Zbarsky and after much more Googling, I got it working doing the following:
First create a stub HTML file called print.html:
<!doctype html>
<html lang='en-us'>
<head>
<meta charset='utf-8'>
<!-- the print.css link doesn't need to be of media type 'print' -->
<link rel='stylesheet' type='text/css' href='print.css'>
</head>
<body>
<div id='print_this'>
<!-- All the 'printable' stuff will be inserted here -->
</div>
</body>
</html>
Then using jQuery in the html document you want to print from, create a window object (called print_window, below) and load it with the HTML stub file, then collect all of the HTML that you want printed and stuff it into the print_window object. Then print the window object:
// ============= jQuery ===============
function divPrint()
{
var print_window = window.open('print.html'); // Loads the HTML stub file
// Do this in an onLoad event to make sure, before printing, CSS and all else
// is loaded and ready -- else you'll likely get a blank page.
print_window.onload = function () {
// Create an array, containing the print_window object, that will be passed to the each() method.
var pw = [this];
// Find each element of class printable and grab its inner HTML and insert it into
// the stub's 'print_this' block.
$('.printable').each(function(index) {
pw[0].document.getElementById('print_this').insertAdjacentHTML('beforeend', $(this).html());
}, pw);
// Print the print_window which is now embellished with all the stuff that was tagged as printable.
this.print();
this.close();
}
}
$(document).ready(function() {
$('#btnPrint').click(function(){
divPrint();
});
});
and, here's an example of what the above jQuery code might process (also in the same file):
<!-- Note that the button doesn't get printed because it is not of class 'printable' -->
<button type='button' id='btnPrint'>Print Page</button>
<div id='stuff_not_to_print'>
<h1>Your mother wears army boots!</h1>
</div>
<div class='printable'>
<p>Your mother is a swell lady who's pretty, too!</p>
</div>
<div class='printable'>
<p>Yer dad's pretty cool, too!</p>
</div>
<div>
<p>This won't print!</p>
</div>
Then, if you want to format the above HTML all pretty-like, then create a CSS file called print.css that the HTML stub file, print.html, can load.
Comments
Or...try adding media="print" to your div
so do something like:
<html>
<head>
import css here
</head>
<body>
<div id="printable" media="print"></div>
</body>
</html>
javascriptto print div id=printable, paper result only have a HTML content without CSS rules, the result on screen is perfect. Is there any way for Firefox print with all css defined, any help will be appreciated.