272
Views
17
Comments
Solved
[Ultimate PDF] Print a list using page break we get a blank page
ultimate-pdf
Reactive icon
Forge asset by Leonardo Fernandes
Application Type
Reactive

Hi All,

When I try to print multiple records from a list into a single pdf with the page break, the obtained pdf always has a blank page before the correct page. The list uses the attribute disable virtualization.

This problem happens both in version 9.0.5 and in version 8.0.

Example:

 

The “DigitalSignature” container needs to be at the bottom of the page as it is legal obligation.

Final pdf:


We removed the Pagination\PageBreak block and the “DigitalSignature” container continues with the CSS at the bottom of the page.

When obtaining the final PDF after the changes, we validate that we no longer have a blank page before the correct page, but we get an error in which the “DigitalSignature” container stops appearing at the bottom of the page and appears above the previous container “DigitalSignatureDetail”.

Even adding a margin-top and margin-bottom or even creating a class

We still get the scenario of overlapping containers.

Thank you for looking.

2019-07-08 11-04-35
Leonardo Fernandes
 
MVP
Solution


Hi Nuno. I've published a new version that includes a BottomContent placeholder. You can place the signature inside of that placeholder. There's no need to use flex-grow with this new solution.

2024-01-04 15-15-51
Abed Al Banna

Hi @Nuno Carvalho 

You can try this approach:

1. Build the whole screen that you would like to print

2. Get the content outside the "PrintLayout" server action, keep only the list you would like to generate inside that screen.

3. Add the following CSS to your application:

@media print {  

.page-break {    margin-top: 1rem;    display: block;    clear: both;    page-break-after: always;  }

 }

4. Enclose each required page in a container and add the "page-break" CSS to each container.

5. Add the "PrintToPDF_Advanced" server action to the action flow as desired (ButtonOnClick, for instance) and pass its URL input the relative URL of the screen you would like to print (URL: "/TestApp/ToPrintScreen")


Let me know if this works for you!

UserImage.jpg
Nuno Carvalho

Hi Abed,

I have tried the steps above but still get the same result.



2019-07-08 11-04-35
Leonardo Fernandes
 
MVP

Hi Nuno.

I would not recommend using position: absolute as this has a different semantics in print media. Having a position: absolute would align the container to the bottom of the page (can't recall if that would be the first page or the last). But it would not prevent overlap of content.

I would recommend using the Footer placeholder for any content that should be aligned to the bottom of the page, as the Footer makes sure there's no overlap.

UserImage.jpg
Nuno Carvalho

Hi Leonardo.

In this case, I cannot insert the “DigitalSignature” container in the Footer placeholder because later it will appear on all pages.

For example, there may be content that passes to a second page and only on this page must the “DigitalSignature” container appear.

2019-07-08 11-04-35
Leonardo Fernandes
 
MVP


Hi Nuno. You can include the digital signature at the very end of your content, so it will show up on the last page. However, it will not be aligned with the bottom of the page.

UserImage.jpg
Nuno Carvalho

Hi Leonardo,

We can put in the very end of the content however its not the solution that we wanted. 

This problem are gonna be fixed in the next versions or the only solution its always put in the very end of the content?


2019-07-08 11-04-35
Leonardo Fernandes
 
MVP


Hi Nuno. I don't think this layout is possible using CSS, and I can't promise it will be "fixed".

It's also not clear what would happen if the last page didn't have enough space for the digital signature. For example, let's say the digital signature is 5cm tall. If the last page is filled with content until there's only 2cm left... what should happen? Should a new blank page have the digital signature in it, without any other content?


The layout seems possible if you can calculate the number of pages of the document. For example, if the document has 5 pages, you can have a container spanning the 5 pages with:

display: flex;
flex-direction: column;
min-height: calc(5 * 100vh);


And inside of this container, you can have a first container growing (by using flex-grow: 1) and a second container with the digital signature. Because the first container will grow, it will push the digital signature to the bottom of the 5th page.

If you can trade off some performance, you could generate the PDF on a first pass to read the number of pages, and then generate the same PDF again with the styles above to get the correct layout. You can read the number of pages of the PDF using the PDFSharp library.

2019-07-08 11-04-35
Leonardo Fernandes
 
MVP


Hi Nuno.

Please try using the version 11.0.0. Then you can place an empty container before DigitalSignature with flex-grow: 1 (or you can also use the class flex1 from OutSystems UI). This will make the empty container grow to use the empty space, pushing the DigitalSignature to the bottom of the page.

Let me know if that works.

UserImage.jpg
Nuno Carvalho

Hi Leonardo,

I tried the steps like you said. The result was that we have a problem only if i have more than 20 rows on the list that passe to a second page and DigitalSignature pass to a third page instead of be at the end of the second page.



2019-07-08 11-04-35
Leonardo Fernandes
 
MVP


Can you share a module reproducing this issue?

UserImage.jpg
Nuno Carvalho
EE_CommonTeste.oml
2019-07-08 11-04-35
Leonardo Fernandes
 
MVP
Solution


Hi Nuno. I've published a new version that includes a BottomContent placeholder. You can place the signature inside of that placeholder. There's no need to use flex-grow with this new solution.

UserImage.jpg
Nuno Carvalho
2025-01-15 08-35-04
Vignesh Sekar

Hi Nuno,

you used the page braker below the signature , kindly use above it 
it will work

UserImage.jpg
Nuno Carvalho

Hi vignesh,

I already have tried that way but the obtained pdf always has a blank page before the correct page. 


2025-01-15 08-35-04
Vignesh Sekar

is it possible to share the OML i can check that

2024-05-20 09-45-12
Jean Bastos

Hi,

Put your list inside MainContent and set a fixed size for the signature image. if not works, please share your oml.



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