Open a new javascript window(.open) along with its CSS styling
Build a complete HTML page in the opened window and reference your CSS-file there:
var win = window.open('','printwindow');win.document.write('<html><head><title>Print it!</title><link rel="stylesheet" type="text/css" href="styles.css"></head><body>');win.document.write($("#content").html());win.document.write('</body></html>');win.print();win.close();
I do something similiar to the above example but found it doesn't work in all browsers. The following was tested with all the major browsers and works for me. (Remember, some styles can be dependent on parent elements, so if your div is nested inside those elements the styles may not look exactly the same in the print window as on your parent page)
function printWithCss() { //Works with Chome, Firefox, IE, Safari //Get the HTML of div var title = document.title; var divElements = document.getElementById('printme').innerHTML; var printWindow = window.open("", "_blank", ""); //open the window printWindow.document.open(); //write the html to the new window, link to css file printWindow.document.write('<html><head><title>' + title + '</title><link rel="stylesheet" type="text/css" href="/Css/site-print.css"></head><body>'); printWindow.document.write(divElements); printWindow.document.write('</body></html>'); printWindow.document.close(); printWindow.focus(); //The Timeout is ONLY to make Safari work, but it still works with FF, IE & Chrome. setTimeout(function() { printWindow.print(); printWindow.close(); }, 100); }
I wanted to have all the styles from the parent page and print. So I wanted to use all the css links in the HEAD.
My solution uses jQuery.
(function print() { // getting the tag element I want to print // cloning the content so it doesn't get messed // remove all the possible scripts that could be embed var printContents = $('body').clone().find('script').remove().end().html(); // get all <links> and remove all the <script>'s from the header that could run on the new window var allLinks = $('head').clone().find('script').remove().end().html(); // open a new window var popupWin = window.open('', '_blank'); // ready for writing popupWin.document.open(); // -webkit-print-color-adjust to keep colors for the printing version var keepColors = '<style>body {-webkit-print-color-adjust: exact !important; }</style>'; // writing // onload="window.print()" to print straigthaway popupWin.document.write('<html><head>' + keepColors + allLinks + '</head><body onload="window.print()">' + printContents + '</body></html>'); // close for writing popupWin.document.close();})();