Unable to insert stylesheet/script into window.open

Asked 3/12, 2014 at 10:1 Answered 14/2, 2020 at 15:17

Solved css html kendo-grid printing-web-page

I have been fighting this issue for quite some time now, and have been (still) unable to print my div with its styling.

Currently, my script is:

$('#printMeButton').click(function () {
    //alert("a");
    var data = document.getElementById('thisPrintableTable').outerHTML;

    var mywindow = window.open('', data);
    mywindow.document.write('<html><head><title>Print Me!!!</title>');
    // mywindow.document.write('<link rel="stylesheet" type="text/css" href="Site.css" media="screen">');
    mywindow.document.write('</head><body>');
    mywindow.document.write(data);
    mywindow.document.write('</body></html>');

    mywindow.document.close();
    mywindow.focus();
    mywindow.print();
    mywindow.close();
    return true;

});

which is nested within a $(document).ready function.

When I include the desired stylesheet (currently commented out), Nothing appears in the print preview.

I also have some script that has an effect on the appearance of the table, and, as such, I believe this may hold the key of having these included into the popup window.

How can i include this into the new popup?

Could someone please suggest a way of printing this as it stands?

Edit History

removed space at end of </head><body>
Changed var data to have outerHTML instead of innerHTML
Altered Question/details from better understanding of issue

Bradbury answered 3/12, 2014 at 10:1 Comment(0)

Try to open a local html file using window.open with css linked within it. And set the content html to be printed to the local html file using js.

Here is the page to be printed:-

<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="test.css" rel="stylesheet" type="text/css" />
    <script src="jquery.js"></script>
</head>
<body>
    <div id="print">
        <div class="red">TODO write content</div>
    </div>
    <button id="print_btn">Print</button>
    <script>
        $('#print_btn').click(function(){
            var newWindow = window.open('print.html','_blank');
            $(newWindow).load(function(){
               $(newWindow.document).find('body').html($('#print').html());
            });
        })
    </script>
</body>
</html>

The css file test.css is linked here, and I'm opening print.html at the time of window.open, the test.css is also linked in the print.html

Now, in print.html I'll write:-

<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>

</body>
</html>

Superjacent answered 3/12, 2014 at 10:33 Comment(1)

could you possibly expand/elaborate on this? I sort of understand this possibility, but not the implementation – Bradbury 3/12, 2014 at 10:42

Since you provide an empty string as a new window's URL (the first parameter of the open function), the page inside it most likely can't figure out where your stylesheet is (as it's address is "relative to nothing"). Try specifying an absolute URL to your stylesheet.

Also, there is media="screen" attribute that should be changed to media="print"

mywindow.document.write('<link rel="stylesheet" type="text/css" href="http://my.site/Site.css" media="print"')

Ciceronian answered 3/12, 2014 at 10:13 Comment(3)

That didn't work i'm afraid.Still prints just as plain as it was before – Bradbury 3/12, 2014 at 10:15

I've just edited the answer - there's also an issue with media attribute. – Eyeglass 3/12, 2014 at 10:19

Have you tried not closing the window immediately and checking if there aren't any errors in the developer console? – Eyeglass 3/12, 2014 at 10:21

Try to open a local html file using window.open with css linked within it. And set the content html to be printed to the local html file using js.

Here is the page to be printed:-

<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="test.css" rel="stylesheet" type="text/css" />
    <script src="jquery.js"></script>
</head>
<body>
    <div id="print">
        <div class="red">TODO write content</div>
    </div>
    <button id="print_btn">Print</button>
    <script>
        $('#print_btn').click(function(){
            var newWindow = window.open('print.html','_blank');
            $(newWindow).load(function(){
               $(newWindow.document).find('body').html($('#print').html());
            });
        })
    </script>
</body>
</html>

The css file test.css is linked here, and I'm opening print.html at the time of window.open, the test.css is also linked in the print.html

Now, in print.html I'll write:-

<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <link href="test.css" rel="stylesheet" type="text/css" />
</head>
<body>

</body>
</html>

Superjacent answered 3/12, 2014 at 10:33 Comment(1)

could you possibly expand/elaborate on this? I sort of understand this possibility, but not the implementation – Bradbury 3/12, 2014 at 10:42

The issue can be solved by introducing some delay time before executing mywindow.close(); method. Seems that some time is needed for CSS to be applied (loaded), like this:

$('#printMeButton').click(function () {
    var content = document.getElementById(id).innerHTML;
    var mywindow = window.open('', 'Print', 'height=600,width=800');
    mywindow.document.write('<!DOCTYPE html><html dir="rtl"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Print</title>');
    mywindow.document.write('<link rel="stylesheet" type="text/css" href="/static/css/styles.css" />');
    mywindow.document.write('</head><body >');
    mywindow.document.write(content);
    mywindow.document.write('</body></html>');
    mywindow.document.close();
    mywindow.focus()
    mywindow.print();

    // this is needed for CSS to load before printing..
    setTimeout(function () {
        mywindow.close();
    }, 250);

    return true;
});

Lawsuit answered 31/5, 2018 at 6:50 Comment(0)

We can use this inline style.

var divToPrint = document.getElementById('DivIdToPrint');

var newWin=window.open('','Print-Window');

newWin.document.open();

newWin.document.write('<html>' +
    '<style>' +
    ".btn-petty-cash-split{display: none}"+
    ".btn-petty-cash-split{display: none}"+
    '</style>' +
    '<body onload="window.print()">'+divToPrint.innerHTML+'</body></html>');

newWin.document.close();

setTimeout(function(){
    newWin.close();
    window.location.reload();
},10);

Ruralize answered 14/2, 2020 at 15:17 Comment(0)

Recommended topics

Hot tags