How to convert widget Container to PDF?
Question

Hi Folks,
Greetings!

Please see below the screenshot of my tabular sheet design in Container (Outsystems widget)


this sheet is implemented in container so I would like to convert it into pdf.

Because this sheet should be print by printer so for that I need to convert this into pdf. If any other idea you people have to make hard copy of this sheet so kindly share me.

Also please let me know you expect more details from my side.


Thanks
 

Solution

Hi Folks,

I got the simple way to convert screen to PDF without Htm2PdfConverter component using 


"window.print()"


Only need to create new screen and in Preparation action or any button action invoke RunJavaScript action with only "window.print()" this code.

This way fulfill my requirement. (Y)

@Meer Imtiyaz have you managed to print more than 1 page? this function only supports the first page print

Hi Meer,

Are you working on a reactive web app or a traditional web app?

If it's a traditional web app you can use the html2pdfConverter forge component to create a pdf of your screen.

If it's a reactive web app it'll be a bit trickier since there are no pdf components for it yet but you might try your luck with any of the mobile app components instead.

Kind regards,
Glenn

glenn michiels wrote:

Hi Meer,

Are you working on a reactive web app or a traditional web app?

If it's a traditional web app you can use the html2pdfConverter forge component to create a pdf of your screen.

If it's a reactive web app it'll be a bit trickier since there are no pdf components for it yet but you might try your luck with any of the mobile app components instead.

Kind regards,
Glenn

Hi glenn michiels,
Thanks for your reply.


I have checked multiple post on forum related to same my query and also checked html2pdfConverter but didn't used it because its name indicates html to pdf and in my scenario there is one part i.e. only one container have to convert to pdf.

Let me check html2pdfConverter, can there be option to convert container to pdf and then will get back to you.


Thanks


Hi Meer,

What you can do is isolate that container and its associated logic in a webblock. That way you can use that block in your current screen but also in a new screen that contains nothing else. This new screen would then be the one you use with the Html2PdfConverter component.

Aurelio Junior wrote:

Hi Meer,

What you can do is isolate that container and its associated logic in a webblock. That way you can use that block in your current screen but also in a new screen that contains nothing else. This new screen would then be the one you use with the Html2PdfConverter component.

Hi Aurelio Junior,
Thanks, on this way I am going to implementing. But there asking for configuration so can you please tell the steps how to configure Html2PdfConverter component.


Meer Imtiyaz wrote:

Aurelio Junior wrote:

Hi Meer,

What you can do is isolate that container and its associated logic in a webblock. That way you can use that block in your current screen but also in a new screen that contains nothing else. This new screen would then be the one you use with the Html2PdfConverter component.

Hi Aurelio Junior,
Thanks, on this way I am going to implementing. But there asking for configuration so can you please tell the steps how to configure Html2PdfConverter component.


Hi Meer,

You can follow the instructions on screen when opening the html2pdf component in the browser. Once the screen loads you can click on installation instructions and it will guide you through the configuration process.

Regards,
Glenn


In Mobile I use the PDF Generator Plugin to create PDFs from screens. Perhaps you can also use this? 

Solution

Hi Folks,

I got the simple way to convert screen to PDF without Htm2PdfConverter component using 


"window.print()"


Only need to create new screen and in Preparation action or any button action invoke RunJavaScript action with only "window.print()" this code.

This way fulfill my requirement. (Y)

@Meer Imtiyaz have you managed to print more than 1 page? this function only supports the first page print

Hi Meer,

Just keep in mind that this approach will require an additional step from your users (the print dialog) and that they have some sort of "print to pdf" printer installed on their machines. Components like Htm2PdfConverter allow your users to simply click a button and immediately download a pdf file.

Hey ,

how to default to screen add header and footer in window.print()  approach.


Regards,

Sowndarya

Hey...

You can use KendoJs, please see details below

1. create web block and use expression and Paste following link text and mark Expression Escape content property "No"(Then finally add this web block in screen where converting page to PDF)

"<link rel='stylesheet' href='https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.common-material.min.css' /><link rel='stylesheet' href='https://kendo.cdn.telerik.com/2019.2.619/styles/kendo.material.min.css' /><script src='https://kendo.cdn.telerik.com/2019.2.619/js/kendo.all.min.js'></script>"


2. Added following code on Screen javaScript property

function GeneratePDF(Container,fileName){      

    kendo.drawing.drawDOM($("#"+Container), {

      paperSize: "auto", 

    }).then(function(group){

      kendo.drawing.pdf.saveAs(group, fileName+".pdf");

    });

}

    

3. For download to created pdf, I have taken one link button with "onclick " action in Extended Properties and call following Text in value

 "GeneratePDF('"+PDFCnt.Id+"','"+"Filename"+"');"


4.if you want to add some name or date with the pdf filename use this format 

"GeneratePDF('"+InvoiceContainer.Id+"','"+"Invoice Details_"+VendorInvoiceList.List.Current.Invoice.DateContractors+"""');"


Cheers.. (Y) 

Hi.

Have you tried this component?

https://www.outsystems.com/forge/component-overview/9761/reactive-print-pdf-button

In a Reactive application, you can indicate which container will be rendered on the output pdf.

I don't know how it can behave with the table you indicated.


Let me know if it can be a solution for you and how it behaves with that layout.

Greetings,
Gianluca


Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.