Unable to insert stylesheet/script into window.open

Question

Unable to insert stylesheet/script into window.open

8.1k Views Asked by jbutler483 At 20 October 2024 at 22:45

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

Original Q&A

There are 4 best solutions below

Michał Dudak On 03 December 2014 at 10:13

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"')

W.M. On 31 May 2018 at 06:50

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

Vin On 14 February 2020 at 15:17

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

**Indranil Mondal** · Accepted Answer

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>

Unable to insert stylesheet/script into window.open

There are 4 best solutions below

Related Questions in CSS

Related Questions in HTML

Related Questions in KENDO-GRID

Related Questions in PRINTING-WEB-PAGE

Trending Questions

Popular # Hahtags

Popular Questions