[Html2PdfConverter] Unsure how to use this

Forge Component
(69)
Published on 5 Feb by Miguel 'Kelter' Antunes
69 votes
Published on 5 Feb by Miguel 'Kelter' Antunes

I'm trying to use this to render a page I've created in Outsystems as a PDF.

I've been able to configure it to generate the PDF and download it, but it is not rendering the page with any of the CSS rules except some of the rules that are explicitly on the HTML elements themselves.

Why doesn't this work with the Outsystems CSS? Am I not adding a parameter I need to when it executes the 3rd party binary?

Hi Kevin,


Is your page traditional web or reactive?


This component only works for traditional web as the underlying library used (wkhtmltopdf) does not handle reactive applications.


Cheers,

Guilherme

It is a traditional web

Then there's no reason for it to fail unless you have some kind of script that could be blocking the css from rendering correctly.


I'd recommend you to download wkhtmltopdf to you computer an try to generate the page with additional options to see if the output helps to understand.


Another option is to start a blank page and then adding components bit by bit to discover what could be causing the problem.


You can also check the FAQ for additional hints

Guilherme Pereira wrote:

Then there's no reason for it to fail unless you have some kind of script that could be blocking the css from rendering correctly.


I'd recommend you to download wkhtmltopdf to you computer an try to generate the page with additional options to see if the output helps to understand.


Another option is to start a blank page and then adding components bit by bit to discover what could be causing the problem.


You can also check the FAQ for additional hints

I could try that I suppose, were not using anything but containers and text so I don't think there should be any JS interfering with the CSS

It could be with the latest version but I'm unsure. 

For example, In the past there was a script to detect mobile devices that blocked the page from rendering correctly and the recommended workaround for these scenarios is always to start from a blank page on a web flow with a blank theme and add what you need bit by bit. 

Hope this helps

Guilherme

Guilherme Pereira wrote:

It could be with the latest version but I'm unsure. 

For example, In the past there was a script to detect mobile devices that blocked the page from rendering correctly and the recommended workaround for these scenarios is always to start from a blank page on a web flow with a blank theme and add what you need bit by bit. 

Hope this helps

Guilherme


I created a new Traditional Web app and created a blank web module and I'm getting the same result even with very dumbed down CSS compared to what I was using before since I'm not using any of the base Outsystems CSS anymore provided when creating a Traditional Web module. It's definitely not downloading any external resources like CSS files or images. I know it seemed like it was downloading the CSS on other non-Outsystems pages I've tested this on or does everything need to be embedded?

It shouldn‘t be necessary as wkhtmltopdf spaws a build in web browser that shoukd be able to fetch the resources. Can you share your test module so i can take a look and do some tests?

Processing Upload...

Guilherme Pereira wrote:

It shouldn‘t be necessary as wkhtmltopdf spaws a build in web browser that shoukd be able to fetch the resources. Can you share your test module so i can take a look and do some tests?


Ok, here is the OAP

Looks like its not uploading so I'm trying again zipped

HI Kevin, 


I published your module and included a few basic css changes (just some class with a background color and google logo as a background url in another area) just to test and it's rendered correctly.


I've blurred the logo and address on purpose.


Can you share your generated pdf?


Cheers,

Guilherme

I attached some PDF files 2 of which are what was generated and 2 are what I would expect it to look like. The applicant info one is still needed to be worked on as that is my next task after I get this working the way I want it to. Its all test data on these screens btw so don't worry about that too much.

Hi Kevin,


In a nutshell it should be possible to achieve what you want. I see that you'd like to go for a form like approach so I did a quick test using a basic form and an OutSystems UI based theme and it worked.

The only issue is with OutSystems UI the form fields have a "disabled" look & feel until they get the focus and that is an interaction that you cannot achieve with wkhtmltopdf as it renders the page. 

So in order to achieve that you need to override the css from OutSystems UI that sets that behavior.


Hope this helps

Guilherme


Guilherme Pereira wrote:

Hi Kevin,


In a nutshell it should be possible to achieve what you want. I see that you'd like to go for a form like approach so I did a quick test using a basic form and an OutSystems UI based theme and it worked.

The only issue is with OutSystems UI the form fields have a "disabled" look & feel until they get the focus and that is an interaction that you cannot achieve with wkhtmltopdf as it renders the page. 

So in order to achieve that you need to override the css from OutSystems UI that sets that behavior.


Hope this helps

Guilherme



Yes, I would actually probably end up replacing the fields in the form with expressions on a seperate page, but the idea is that I need to give a summary of all the information theyve entered across all of the pages of the application in a single pdf and I was hoping to just re-use as much of what already exists, but as you can see, it renders pretty ugly without any styling. I was able to do what I want with the UltimatePDF module but my parent company had concerns about it being malware because of the activity that Chrome produces in some temp folders when using that one and recommended this module to me, but just doesn't seem to work as expected in my environment.