76
Views
9
Comments
[Ultimate PDF] UltimatePDF with Reactive web- Only getting the first page of content
Question
Forge component by Leonardo Fernandes
15
Published on 08 Jan 2021

I am using UltimatePDF with a reactive web application.   When I attempt to use ScreenshotToPNG or PrintToPDF_Advanced it works and I get the file download, however I only get the first page of that file.   My web screen contains web blocks that render my data and has a horizontal scroll.  I am getting maybe 1/3rd of the screen in my PDF/PNG file.   Any idea what could be causing this?  


Rank: #8935

I seem to have the same problem. I tested the same function in traditional web and it works there.
Any fix for the reactive variant?


Kind regards,

Mathias

Rank: #8935

Josh Herron wrote:

I am using UltimatePDF with a reactive web application.   When I attempt to use ScreenshotToPNG or PrintToPDF_Advanced it works and I get the file download, however I only get the first page of that file.   My web screen contains web blocks that render my data and has a horizontal scroll.  I am getting maybe 1/3rd of the screen in my PDF/PNG file.   Any idea what could be causing this?  


 

 It is not compatible with reactive. My fix to "solve" this is to make a tradional web component and send the data there to make the pdf. 

Rank: #63215

Hi Mathias,
can you give more details on your fix? Does the source page (the one that gets converted) have to be traditional web or can you convert a reactive page once Ultimate Pdf is running in traditional web?

How do you call the component from your reactive app and how do you receive the output?

Thanks a lot - Ignaz

Rank: #63215

I have the same problem. The strange thing is that it used to work back in August.
It's the same reactive app and I was able to create a pdf with 3 pages. All of a sudden it only gets the first page...

Rank: #484

I'm fairly certain a new Reactive version broke this functionality.   It worked for me as well and then suddenly stopped.   The CSS below corrected it for me though.

Rank: #484

Try adding this to your CSS and see if it corrects your problem.


/* CSS for Reactive Printing */

@media all {
  .page-break {
    display: none;
  }
}
 
@media print {
  html, body {
    height: initial !important;
    overflow: initial !important;
    -webkit-print-color-adjust: exact;
  }
}
 
@media print {
  .page-break {
    margin-top: 1rem;
    display: block;
    page-break-before: auto;
  }
}
 
@page {
  size: auto;
  margin: 20mm;
}
Rank: #63215

It works! You saved my day, thanks a lot!

Rank: #42730

We had the same problem with our reactive app. What's more weird was, the same component works fine in dev and test, but not in uat or prod environments.

This css fixed the issue, thanks a lot.

Rank: #11482

This script fixed it for me too, thanks.