JavaScript Print Function not carrying the stylesheet

Question

So let's start with the code:

        var mywindow = window.open('', 'PRINT', 'height=600,width=800');


        mywindow.document.write('<html><head><base href="/" /><title>' + document.title + '</title>');
        mywindow.document.write('<style type="text/css" media="print" />table { width: 100%; }</style>');
        mywindow.document.write('</head><body >');
        mywindow.document.write('<h1> Returns for Today </h1>');
        mywindow.document.write(document.getElementById(printableArea).innerHTML);
        mywindow.document.write('</body></html>');

        mywindow.document.close(); // necessary for IE >= 10
        mywindow.focus(); // necessary for IE >= 10*/

        mywindow.print();
        mywindow.close();

        return true;

The code is pretty working with this output

And then when I change the css to an external stylesheet like this:

From mywindow.document.write('<style type="text/css" media="print" />table { width: 100%; }</style>');

To mywindow.document.write('<link rel="stylesheet" href="assets/css/printstyles.css" type="text/css" />');

I get a blank print page:

But if I comment the line

//mywindow.print();
//mywindow.close();

I get this:

Meaning, the external stylesheet is working.

The external stylesheet only includes

table { width: 100%; }

Any idea why it is not working? Any help would be much appreciated.

See [Save a pre element as PDF with CSS](http://stackoverflow.com/q/30135765/) — guest271314, Jan 01 '17 at 04:37
Add media="print" to the reference of your external stylesheet. — , Jan 01 '17 at 04:42

score 4 · Accepted Answer · answered Jan 01 '17 at 04:42

4

I ran into this same issue in Chrome. The problem I found was that the print preview doesn't completely render, but the page still prints without issues.

What I ended up doing was something like this:

var mywindow = window.open("", ...);
mywindow.document.write("...");
mywindow.document.close();
setTimeout(function() {
  mywindow.print();
  mywindow.close();
}, 10);

answered Jan 01 '17 at 04:42

Mottie

84,355
30
126
241

The problem is that loading a stylesheet is asynchronous, and you were calling `print()` before it finished. – Barmar Jan 01 '17 at 04:55
The problem still occurs if you add a ` – Mottie Jan 01 '17 at 04:57

JavaScript Print Function not carrying the stylesheet

1 Answers1