printing iframe doesn't include CSS

Question

I have an iframe, which includes <button onclick="print()">print</button>

var print = function(){
    parent.window.focus();
    window.print();
}

When I click on <button>, printing starts, but CSS is not included into printing. How can I force browser to include my CSS into printing?

Should that not be `parent.window.focus(); parent.window.print();` — mplungjan, Mar 19 '19 at 15:06

Lolpez · Answer 1 · 2019-03-19T15:40:17.007

0

The CSS of the page inside the iframe must have the necessary print CSS media query in order to print as it is shown in the current browser.

i.e.

@media print {
    #my-element {
        color: red;
        /* all the styles you need */
    }
}

edited Mar 19 '19 at 15:40

answered Mar 19 '19 at 15:35

Lolpez

849
8
17

I'm including it with ````, but not even screen css is showing – Kajbo Mar 19 '19 at 16:23

score 0 · Answer 2 · answered Apr 11 '22 at 21:02

0

An iframe is a 'hole' in your page that displays another web page inside of it. The contents of the iframe is not in any shape or form part of your parent page.

See this answer https://stackoverflow.com/a/6495816/83542

answered Apr 11 '22 at 21:02

Kildareflare

4,590
5
51
65

printing iframe doesn't include CSS

2 Answers2