Using CSS while printing a page using javascript

Question

The title is a little confusing but basically I have a PHP page with css applied, I use javascript to take a div(form) and print it using the print() function just like so.

function printform(form){
    var printdata = document.getElementById(form);
    newwin = window.open("");
    newwin.document.write(printdata.outerHTML);
    newwin.print();
    newwin.close();
}

The page pops up but I want to use the css of the PHP page which I can't seem to get working. I have tried using a rel to get the css file (tried the absolute path as well) and delaying the printing but it didn't work (code below).

function printform(form){
    var printdata = document.getElementById(form);
    newwin = window.open("");
    newwin.document.write(printdata.outerHTML);
    newwin.document.write('<html><head>');
    newwin.document.write('<link rel="stylesheet" href="css/css.css" type="text/css" media=\\"all\\" />');
    newwin.document.write('</head><body >');
    newwin.document.write('</body></html>');
    setTimeout(function(){newwin.print();},1000);
    newwin.focus();
}

How can I make the css appear on the other page?

I can give more context if needed.

Shouldn't printdata.outerHTML get written between the <body> and </body> tags? — kmoser
– kmoser, Commented Jun 14, 2022 at 20:17

Lajos Arpad · Accepted Answer · 2022-06-14 22:28:15Z

2

First, you need to make sure that your content is in the body:

function printform(form){
    var printdata = document.getElementById(form);
    newwin = window.open("");
    newwin.document.write('<html><head>');
    newwin.document.write('<link rel="stylesheet" href="css/css.css" type="text/css" media=\\"all\\" />');
    newwin.document.write('</head><body >');
    newwin.document.write('</body>' + printdata.outerHTML + '</html>');
    setTimeout(function(){newwin.print();},1000);
    newwin.focus();
}

Second, your media=\\"all\\" seems to be incorrect, you need to change it to media="all" or media="print"

answered Jun 14, 2022 at 22:28

Lajos Arpad

80.4k42 gold badges123 silver badges235 bronze badges

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

2 Comments

gabriel Over a year ago

Tried putting the content in the body just like shown and even tried changing it like this: newwin.document.write('</head><body >'); newwin.document.write(printdata.outerHTML + '</body></html>'); Still doesn't do anything about the css

kmoser Over a year ago

@gabriel I've confirmed in a test environment that this solution works. Did you fix the "media" attribute? And did you confirm that the style sheet is in a subfolder named "css"? You might also want to try prefixing the CSS path with a slash, e.g. "/css/css.css".

Collectives™ on Stack Overflow

Using CSS while printing a page using javascript

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related