Open a new javascript window(.open) along with its CSS styling

I'm trying to get this function to work on the website of a project I'm working on. The purpose of this function is to only (physically) print the contents of a child div which is coincidentally referred to as selector #content.

Here's the little bit I've got 'till now:

<script>
    function printContent() {
        window.open().document.write($("#content").html());
        window.print();
        window.close();
    }
</script>

The function is fired when a person clicks on a "print" hyperlink. The new window will load the contents of the #content div which is parsed from another HTML document:

<div id="content">
    <br/>
    <div id="Algemeen">
        <h3>Algemene informatie</h3>
        <fieldset id="profile">
            <img id="male" src="./images/Pixers/male_icon.jpg"></img>
            <img id="female" src="./images/Pixers/female_icon1.jpg"></img>
        </fieldset>
    </div>
    <div id ="leftbox">   
        <div id ="veldbox"><label>BSN:</label>$!person.bsn</div>
        <div id ="veldbox"><label>Voornaam: </label>$!person.first_name</div>
        <div id ="veldbox"><label>Achternaam:</label>$!person.name_prefix $!person.last_name</div>
        <div id ="veldbox"><label>Geslacht:</label>$!person.gender</div>  
        <div id ="veldbox"><label>Woonadres:</label>$!person.address</div>
        <div id ="veldbox"><label>Plaatsnaam:</label>$!person.location</div>
        <div id ="veldbox"><label>Provincie:</label>$!person.province</div>
        <div id ="veldbox"><label>Postcode:</label>$!person.zipcode</div>
        <div id ="veldbox"><label>Tel. nummer thuis:</label>$!person.h_number</div>
        <div id ="veldbox"><label>Mobiel nummer:</label>$!person.mobile_nr</div>
        <div id ="veldbox"><label>Burgerlijke Stand:</label>$!person.m_status</div>
        <div id ="veldbox"><label>land van herkomst:</label>$!person.origin</div>
    </div>
    <div id="rightbox">
        <div id ="veldbox"><label>Naam instantie:</label></div>
        <div id ="veldbox"><label>Adres instantie:</label></div>
        <div id ="veldbox"><label>Postcode instantie:</label></div>
        <div id ="veldbox"><label>Tel. instantie:</label></div>
        <div id ="veldbox"><label>Fax instantie:</label></div>
        <div id ="veldbox"><label>E-mail instantie:</label></div>
        <div id ="veldbox"><label>Website instantie:</label></div>
        <div id ="veldbox"><label>-:</label></div>
        <div id ="veldbox"><label>-:</label></div>
        <div id ="veldbox"><label>-:</label></div>  
    </div>
</div>

It just won't load the styling along with it. All the contents will all just be cropped up in the top left corner. I've tried linking the CSS through JS or by just putting it in the head of the page as suggested on another page. I could be doing this wrong of course. I haven't really tried figuring this out with JQuery yet, so if you have any other solutions that might help me with my problem, I'm happy and open to receive some advice about them.

Thanks in advance!

Solution 1:

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();

Solution 2:

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);
    }

Solution 3:

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

Solution 4:

I also had the problem with CSS loading after the page rendering, so solution was to read the css file content and write it to the new document:

    var w = window.open();
    jQuery.get('/styles.css', function (data) {
        w.document.write('<html><head><style>');
        w.document.write(data);
        w.document.write('</style></head><body>');
        w.document.write($('.print-content').html());
        w.document.write('</body></html>');
        w.print();
        w.close();
    });

Open a new javascript window(.open) along with its CSS styling

Solution 1:

Solution 2:

Solution 3:

Solution 4:

Related

Recent Posts