[Html2PdfConverter] How to Preserve Styling?

[Html2PdfConverter] How to Preserve Styling?

  
Forge Component
(42)
Published on 8 Nov by Guilherme Pereira
42 votes
Published on 8 Nov by Guilherme Pereira

I use a screen to generate pdf...On the screen I put styling and color but when downloaded to pdf all plain...How to preserve the styling on design screen?

I even add css on the screen page. Like tr {border: 1px solid #000} but this styling also gets ignored.

Please help

Hi Eric.

Did you try to use CSS inline styles for the styles you want to keep? I'm not 100% sure but it should work.

Let me know if it works.

Cheers,

GM

Inline css by means "I put style on the element itself of the screen" is that right?

So I put css on the element of the screen (e.g. text), and also I put css on particular screen both gets ignored.

Inline CSS means that you'll use on the style property on the extended properties, like:

Typically, to have good looking reports, for instance, you can create a specific screen with the content you want to print and there you can put the specific CSS.

Note that inline CSS should be avoided and you should always use CSS classes that you are able to reuse, but this case is an edge case where you could use this.


Solution

We had the same problem, in our case it was caused by the X-Webkit-CSP HTTP header, removing that header caused all the formatting to show up.

Solution

Ah.. I see.... Inline css works...is this a must in this case using html2pdfconverter component?

But why css on screen page and css on the element "Style Class" (in your picture above is btn btn-primary) does not work?

Zachary wrote:

We had the same problem, in our case it was caused by the X-Webkit-CSP HTTP header, removing that header caused all the formatting to show up.

Where to check this part?


Eric Halim wrote:

Zachary wrote:

We had the same problem, in our case it was caused by the X-Webkit-CSP HTTP header, removing that header caused all the formatting to show up.

Where to check this part?


If you're using Google Chrome you can use its devtools: Load the page that gets converted to a PDF in Chrome, right-click the page and click inspect, click the network tab and refresh the page, scroll up to the top of the list that appears and click the entry for the page. It will then show all the headers.


For example:

Eric Halim wrote:

Ah.. I see.... Inline css works...is this a must in this case using html2pdfconverter component?

But why css on screen page and css on the element "Style Class" (in your picture above is btn btn-primary) does not work?

The btn btn-primary are just there because are the default classes for buttons.

I just added the image as an example of inline CSS, that's why I highlighted that code inside a rectangle.


Zachary wrote:

Eric Halim wrote:

Zachary wrote:

We had the same problem, in our case it was caused by the X-Webkit-CSP HTTP header, removing that header caused all the formatting to show up.

Where to check this part?

If you're using Google Chrome you can use its devtools: Load the page that gets converted to a PDF in Chrome, right-click the page and click inspect, click the network tab and refresh the page, scroll up to the top of the list that appears and click the entry for the page. It will then show all the headers.

Thanks for pointing this....I'll try it because there is some validation mechanism I cannot open the screen directly as on URL....

But how do you remove the header as permanent fix? Where to drill down on Outsystems to remove this header in case you're right...

Eric Halim wrote:

Zachary wrote:

If you're using Google Chrome you can use its devtools: Load the page that gets converted to a PDF in Chrome, right-click the page and click inspect, click the network tab and refresh the page, scroll up to the top of the list that appears and click the entry for the page. It will then show all the headers.

Thanks for pointing this....I'll try it because there is some validation mechanism I cannot open the screen directly as on URL....

But how do you remove the header as permanent fix? Where to drill down on Outsystems to remove this header in case you're right...

In our case it was set when the content security policy was enabled, we had to disable it to fix that. (See here for detailed instructions). 

Zachary wrote:

We had the same problem, in our case it was caused by the X-Webkit-CSP HTTP header, removing that header caused all the formatting to show up.


I tried looking at CSP setting but there is nothing on x-webkit-csp....other than disabling the whole CSP how do we get rid off this header?

There are settings on base-uri, child-src and last setting is other directives but all is about adding a value to it but no settings to remove some headers.

I cannot disable CSP since the security audit will make a findings on this issue.

As far as I know you have to disable CSP entirely, however you can re-add it using the AddHeader action of the HTTPRequestHandler extension. Set the name as "Content-Security-Policy" and the body as whatever it needs to be set to. 

You will need to set this on every page of course but you can do that by setting the header in a webblock and having that webblock on every screen, or you can set the header in the layout webblock(s) you are using.