Print.js: No styles in IE

[mosterlene71]

I am trying to print a calendar using your library from my angular 5 app, but I am really struggling to understand why it is not working in IE.
The print layout looks fine in both Chrome and Firefox, but in IE it seems that no styles have been applied at all (see the attached examples).
I have also tried to simply print out the example on your documentation page, and again there is a big difference between IE (no styles) and the other browsers.
I have gone through most of the closed issues for inspiration on what I can have done wrong, but I am really stuck. I don't have the option to say 'goodbye' to IE - my calendar needs to support IE (11 and up)
I really hope you can help.

My html:
print.component.txt

My CCS:
.print-section{
margin-top: 10px;
background-color: #FFFFFF;
padding-left: 5px;
padding-top: 5px;
padding-bottom: 10px;
padding-right: 5px;
font-size: 75%;
border: 1px solid #CED7E6;
}

.print-section-header{
font-weight: bold;
font-size: 140%;
padding-bottom: 10px;
}

.print-section-elements{
font-weight: bold;
display: flex;
flex-direction: row;
border: 1px solid #CED7E6;
}

print-section-element{

font-style: italic;
font-weight: bold;

}

My code:
printJS({ printable: 'printableDiv', type: 'html', scanStyles: true, targetStyles: ['*'] });

Calendar_Chrome.pdf
Calendar_IE11.pdf
Calendar_Firefox.pdf

[crabbly]

Hi @mosterlene71 , please try using the css parameter. Pass your stylesheet URL to the lib and disable the style processing.

Ex:

printJS({
  printable: 'printableDiv',
  type: 'html',
  scanStyles: false,
  css: '/my_stylesheet.css'
})

If you have more than one stylesheet, you can pass an array:

`js printJS({ printable: 'printableDiv', type: 'html', scanStyles: false, css: [ '/my_stylesheet1.css', '/my_stylesheet2.css' ] })

Let me know if this works.

[mosterlene71]

Thanks for the suggestion, I have already tried that, but I get the error "Refused to apply style from http://my_stylesheet.css because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled" . I haven't had time to investigate that further. And also it seems that my styles are loaded just fine in chrome and Firefox, it's just not working in IE

[Versus2017]

I have the same issue, no styles in IE, and I use the css parameter. but I did not use scanStyles, cause if I set it to false, the printed page will shows nothing, and I don't know why. so i did not set it.
whatever, it is still not working in IE.

[Versus2017]

By the way, I use window.print(), it is ok with IE. hope that print.js can be used in IE . thanks

[ethanwe]

I'm also running into this issue where the css stylesheet isn't being applied on IE and Edge. I tried the scanStyles parameter, but had no luck. Anyone find a work-around for this? This could be a deal-breaker for using this library, and I'd really like to use it.

[ethanwe]

For my situation, passing all my styles into the 'style' parameter works on IE and edge. It seems like using a stylesheet would be cleaner, but everything works for me now.

[emilianodelvalle]

we are facing the same issue. IE and Edge dont' apply any style on CSS file. any help on that?

[ethanwe]

we are facing the same issue. IE and Edge dont' apply any style on CSS file. any help on that?

Did you try passing in the css as a string into the 'style' parameter of the print call?

[breannawong]

I am also having this issue. In IE11, stylesheets do not get added to the print iframe when using the css parameter (works fine in Chrome). The style parameter works in IE, but this is not a good solution for my use case because the print view relies on multiple linked stylesheets.

I also tried using scanStyles: true instead of css, but the styles did not get applied in IE.

[crabbly]

@breannawong You can pass an array of stylesheets with the css property.

[breannawong]

@crabbly I tried that originally. It works in Chrome but does not work in IE11.

[alekhraut]

Hi @crabbly ,

We are also facing same issue.

Do you have anyother work around?

-TIA

[crabbly]

Hi @alekhraut ,
Are you using the style or css properties?
Could you post your printJS call here?
Thanks.

[alekhraut]

I tried both the approach
1) printJS({

• printable: 'test21',
• type: 'html',
• css: '/patient-summary.component.less',
• scanStyles: false
• });
  2) printJS({
• printable: 'test21',
• type: 'html',
• css: '/patient-summary.component.css',
• scanStyles: false
• });

[crabbly]

These are the same. They both use the css property.

[rob24g]

I can also confirm, styles aren't being applied in Edge (IE doesn't even get to print dialog throws 'Symbol' is undefined error).

I tried moving all my styles from css to style and still not applying any of them. (I have scanStyles set to false btw)

[freeboxd]

I also have the same issue.

[dolthead]

I tried all of the above suggestions for IE 11, but could never get any styles to show up from the css stylesheet array. So I am just including a few basic table styles in the style attribute for IE. Here are my options for my Vuejs component:
{ printable: `tool-card-content-${ this.index }`, type: 'html', scanStyles: false, header: `<h4 style="line-height:1.5em;margin-top:0">${ this.tool.title }</h4>`, css: [ /* not working for ie 11, see styles below */ '/js/external/material-lite/material-with-theme.min.css', '/shared/base.css', '/css/global.css', '/css/global-print.css', '/node_modules/print-js/dist/print.css', ], style: `* { font-family: "Roboto", "Helvetica", "Arial", sans-serif; } th { text-align: left; } /* IE 11 */ @media all and (-ms-high-contrast: active), (-ms-high-contrast: none) { h4 { font-size: 1.5em; } table { border-spacing: 0; border: 1px solid #ccc; } th, td { border-bottom: 1px solid #ccc; padding: 0.5em; } }`, }

[OlesyaKlochko]

@crabbly Hello! We use your lib in our project (Nuxt js) and it works very well. But I have to support IE11 and I found a problem related to targetStyles['*']. A method getComputedStyle returns object CSSStyleDeclaration, which has its own methods and properties. And in all modern browsers Object.keys(styles) returns an array of keys like ['0', '1', etc]. But in IE11 Object.keys(styles) returns an empty array. So to get it fixed in IE11 it is enough just to iterate through for..each style key.
Could you check and fix this bug :) , I really need it as soon as possible :) Thanks!

PR is ready - https://github.com/crabbly/Print.js/pull/474/files

[crabbly]

A new version was published to npm with a fix for this issue in IE. Please run npm update to get it (v1.3.0).
Thanks to @OlesyaKlochko for the PR.