External CSS not loading in window.print()

Question

I am trying to print a specific content area of my page. My problem is I have created separate CSS file for the content of this print area. But that external CSS is not working (loading) in browser print popup. I am sure file path is correct.

This is how I tried it:

function printReceipt(el) {
  var docHead = "<html>\
                  <head>\
                    <title></title>\
                    <link rel='stylesheet' href='css/receipt-print.css' type='text/css' media='print' />\
                  </head>\
                  <body>";
  var docFoot = " </body>\
                 </html>";
  var docBody     = document.getElementById(el).innerHTML;
  var defaultBody = document.body.innerHTML;
  document.body.innerHTML = docHead+docBody+docFoot;
  //document.close(); 
  //window.focus(); 
  //setTimeout(function() {
  window.print();
  document.body.innerHTML = defaultBody;
  //}, 1000);    
  //return true;
}

UPDATE:

Also check in this way. Problem is sill same.

function printReceipt(el) {
  var w = window.open();
  w.document.write('<html><head><title></title>');
  w.document.write('<link rel="stylesheet" type="text/css" href="css/receipt-print.css">');
  w.document.write('</head><body >');
  w.document.write(document.getElementById(el).innerHTML);
  w.document.write('</body></html>');

  w.document.close();
  w.focus();
  w.print();
  w.close();
  return true;
}

Any ideas and suggestion would be appreciated.

Can you try with document.write? innerHTML ignores the styles. — Darshna Rekha
– Darshna Rekha, Commented Jul 19, 2021 at 5:13
can you create a different file to use as an iframe already linked with the CSS file and load when you need it, then change the innerHTML and print that iframe window — a.mola
– a.mola, Commented Jul 19, 2021 at 5:48
May I know the reason this is not working? I have seen some questions and answers here and some answers are given like I have tried and they are accepted. But I don't know why this not works for me. — user3733831
– user3733831, Commented Jul 19, 2021 at 6:06

a.mola · Accepted Answer · 2021-07-19 06:43:58Z

5

The issue was you were printing the page without waiting for the styles and resources to load.

You should wait for the page to load before trying to print it or you can try using inline styles.

function printReceipt(el) {
  var w = window.open();

  w.document.write('<html><head><title></title>');
  w.document.write('<link rel="stylesheet" type="text/css" href="css/receipt-print.css">');
  w.document.write('</head><body >');
  w.document.write(document.getElementById(el).innerHTML);
  w.document.write('<script type="text/javascript">addEventListener("load", () => { print(); close(); })</script></body></html>');

  w.document.close();
  w.focus();
}

edited Jul 19, 2021 at 6:43

answered Jul 19, 2021 at 6:32

a.mola

4,0119 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user3733831 Over a year ago

Let me check it out

Tejas Ambalia Over a year ago

not working for me

Tejas Ambalia Over a year ago

bootstrap table CSS is not applying to print page

Collectives™ on Stack Overflow

External CSS not loading in window.print()

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related