How to apply css to an open page with window.open?

Question

How to apply css to an open page with window.open?

Asked 6 years, 4 months ago

Viewed 574 times

1

I have a page that I need to print only a part of, I used window.open followed by a window.print for that, only the print doesn’t come out in the expected format, it’s a form and should be printed as it is in a css file that I have, How do I create this new window when it contains css? I tried with href, target_blank and referencing in Document.write but there was no way.

follows the code used to open the printing page:

$('#btnPrint').click(function() {
                var prtContent = document.getElementById("dados");
                var WinPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
                WinPrint.document.write(prtContent.innerHTML,);
                WinPrint.document.close();
                WinPrint.focus();
                WinPrint.print();
                document.getElementById('dados').remove()
                WinPrint.close();
            });

1 answer

Browser other questions tagged javascript css

You are not signed in. Login or sign up in order to post.

by hugocsl • **65,517** points · Answer 1 · 2018-07-04T19:54:00+00:00

You can add another html to this print window and call CSS this way for example

WinPrint.document.write('<html><head><title>Print it!</title><link rel="stylesheet" type="text/css" href="styles.css"></head><body>');
WinPrint.document.write($("#content").html());
WinPrint.document.write('</body></html>');

Here you can consult other form in this STOF response in English: https://stackoverflow.com/questions/18758288/open-a-new-javascript-window-open-along-with-its-css-styling