Print.js: Inline styling is removed/ignored?

[oyvindsandvik]

Hi,

This is more of a question than an issue, but I would really appreciate if you could find time to consider it.

It seems like the inline styling is removed/ignored, at least my output is not styled in any way.
Is there any way of preserving the inline styling?

-Øyvind

[crabbly]

Hi @oyvindsandvik , could you post all the styles that you used? And the library ignored. Thx

[oyvindsandvik]

Hi @crabbly,

Thanks a lot for a quick response.

The following is an example from the HTML used as input for print.js. Note the inline styling which I mentioned in my previous post.

<div>
  <p style="text-align:center;margin-top: 0px;margin-bottom: 0px;line-height: 1.15;"><span style="font-family:Verdana;font-style:normal;font-weight:normal;font-size:18px;color:#008000;">Individuell arbeidsplan<br></span></p>
  <p style="text-align:center;margin-top: 0px;margin-bottom: 0px;line-height: 1.15;"><span style="font-family:Verdana;font-style:normal;font-weight:normal;font-size:18px;color:#000000;">Bokmål</span></p>
  <p style="text-align:center;margin-top: 0px;margin-bottom: 0px;line-height: 1.15;"><span style="font-family:Verdana;font-style:normal;font-weight:normal;font-size:16px;color:#000000;">Truls Last1 Student3471 - 1IDA</span></p>
  <p style="text-align:left;margin-top: 0px;margin-bottom: 0px;line-height: 1.15;"><span style="font-family:Verdana;font-style:normal;font-weight:normal;font-size:14px;color:#0000FF;">Periode</span></p>
  <p style="text-align:left;margin-top: 0px;margin-bottom: 0px;line-height: 1.15;"><span style="font-family:Verdana;font-style:normal;font-weight:normal;font-size:14px;color:#0000FF;">Førtestresultater, 03.09.2016<br></span></p>
</div>

This is how it looks on the web page:

And this is how the print preview looks:

This is my TypeScript code, where printJS is invoked:

import { Injectable } from '@angular/core';
declare var printJS: any;

@Injectable()
export class PrintService {

  constructor() {}

  print(){
    printJS('elementID', 'html');
  }
}

If you need any more information, do not hesitate to ask.`
Edit: had to take away some information

[crabbly]

Great. Thx @oyvindsandvik , I'll add better support for styling. About the colors, you need to pass in an optional argument to printJS. Please take a look at the documentation, look for honorColor: http://printjs.crabbly.com/#documentation

[oyvindsandvik]

Hi again @crabbly,

I tested it today with the following codeline, and it still won't give me any colors:
printJS({ printable: 'elementID', type: 'html', font: 'Helvetica', honorColor: true });

Right now, I think I need to look at other solutions, as there are a few other improvements (mentioned in other issues) that I will need for my print. With that said I really like your library and will check back the next time I need this functionality.

Thanks a lot for your help :)

Kind regards,
Øyvind

[mrandreev]

Hi @oyvindsandvik

Did you already find some better solution? I just have similar problem and can't resolve it properly. Because now I consider only one better solution that is create pdf on server. It will be great if you have found something better.

Thanks :)

[oyvindsandvik]

Hi @mrandreev. I ended up with a "dirty" solution, passing the HTML to a new window (window.open). For this to work you need to pass on the CSS as well. It is not pretty, but it works.

If you have time and control of the markup, I guess proper use of CSS media queries is the best and most maintainable way to do it, long term.

For client side PDF, if that is an option, consider the fromHTML function in jsPDF as well. It is not perfect, but might work for you. Good luck!

[ViggoV]

This may or may not be related to an issue I am experiencing. When printing an SVG (with a bunch of inline styles) the result is all messed up. It turns out it's being wrapped in a <div> inside the iframe, with some inline !important styles such as font-family: TimesNewRoman; and font-size: 12pt. That seems very weird to me... Won't that override any non !important font styles?

[dibugreen]

hi @crabbly,..
i had same problem with oyvindsandvik..centering text in table ok when in view but when printed.. text back left aligned..
thx for printjs.. and sorry for my bad english

[AndreaRylander]

I have the same problem, the text in a table gets left aligned when printing...

[crabbly]

The library has now the option targetStyles, where you can pass which styles should be processed when printing HTML elements. You can also pass ['*'] to process all styles applied to the HTML element.
http://printjs.crabbly.com/#configuration

This should prevent any Inline styling from being removed or ignored.

Please reopen this if you are still having any issues.
Thanks.

[sneha-nerekar]

targetStyles is not working for me.
I have used like this -
printJS({printable: response, type: 'pdf', base64: true, modalMessage: this.printMessage, showModal: true, targetStyles: ['*'] });

Did I do anything wrong here?

[crabbly]

@sneha-nerekar targetStyles is meant to be used when printing html elements, not base64 or pdf files.

[sneha-nerekar]

@sneha-nerekar targetStyles is meant to be used when printing html elements, not base64 or pdf files.

@crabbly - what is the best way to get PDF with inline style?

[crabbly]

@sneha-nerekar We can't style a pdf document with css in the browser.

[sneha-nerekar]

@sneha-nerekar We can't style a pdf document with css in the browser.

@crabbly - I want to render HTML files that already have inline-style applied but while rendering to PDF format using print-js, styles get ignored.

[crabbly]

@sneha-nerekar Here is a fiddle showing that the library is processing inline style:
https://jsfiddle.net/crabbly/Lvktrb5n/

Please create a fiddle or sandbox replicating the issue. Create a new issue / ticket here with a link to it, as well the browser and OS you are testing, including its version. Thanks