Print.js: Add stylesheet

[Kreativschnittstelle]

First of all thank you for the great plugin! I think it would be a very great feature to be able to add a stylesheet to the printed html section (for example the main css file from the page the html section is in). Or is that maybe already possible and I missed it? Thanks!

[crabbly]

@Kreativschnittstelle Hey Matthias, the library currently doesn't support that. It would be a nice feature to have though.

[riteshrc]

Hello,
I am facing a similar problem. Css sheet not working when printing the pdf. Even when I try to override the styles in the html tags, some are working and some fails. Font tags in particular are failing always.
any help will be appreciated.

[crabbly]

@riteshrc I think your problem can be solved by using the new parameter targetStyles. Try passing ['*'] and all your applied styles will be processed when printing any HTML element.
http://printjs.crabbly.com/#configuration

I'm still planing on adding support for CSS media queries, which will allow to differentiate the style of the element when printed, from the screen display. Similar to what Matthias mentioned above.

[alexthekid07]

@crabbly Since ['*'] grabs everything, and there is often way too many styles to manually specify each one, would it make sense to also have an ignoreStyles or something of the sort?

[crabbly]

@alexthekid07 It does make sense to have a ignoreStyles parameter. But I probably won't implement it. A PR would be welcome.
I want to dedicate some time to support css media queries. This way, we will have full control over the print style.

[crabbly]

@Kreativschnittstelle The library has now a new parameter (css) which allow us to pass a url to a custom css file that will be used when printing html.
http://printjs.crabbly.com/#configuration

[JonathanLee-LX]

@crabbly Thanks for your job. I also get a problem in print html in vue single file component, I want implement a media query stylesheet in vue single file component without css parameter, just like below
<style lang='scss'> @media print { #printArea { color: '#333', border: '1px solid #aaa' ... } } </style>
But, I found it doesn't work. How can I make this media query stylesheet work?

[crabbly]

Hi @JonathanLee-LX , Vue will creates a <script> tag on the document page where your component is loaded. Before calling the printJS function, you will have to manually grab this stylesheet (document.styleSheets) and pass it to the library.