37
Views
6
Comments
Header and footer overlaps with Ultimate PDF
Question

I am using Ultimate PDF component to generate pdf using URL. The content of the page are overlapping with the footer/header big time. Tried using(below method) but no use. Can someone please help 

CustomMarginSize
Champion
Rank: #372

Hi, friend. 

I faced this same issue with UPDF, so as another dev friends.

I recommend you to use the SimpleReports component. It worked for me.


Best regards

Rank: #17880

Lenon Manhães wrote:

Hi, friend. 

I faced this same issue with UPDF, so as another dev friends.

I recommend you to use the SimpleReports component. It worked for me.


Best regards

 Can you please suggest any component that will generate PDF with Reactive Web Application.

 

Rank: #346

Satish Kumar wrote:

I am using Ultimate PDF component to generate pdf using URL. The content of the page are overlapping with the footer/header big time. Tried using(below method) but no use. Can someone please help 

CustomMarginSize

 Hi Satish and Lenon,

Can you try css pagebreak in media print.

 

@media print {

  footer {page-break-after: always;}

}

 

Hope this helps.


Thanks

AD

Rank: #17880

AD wrote:

Satish Kumar wrote:

I am using Ultimate PDF component to generate pdf using URL. The content of the page are overlapping with the footer/header big time. Tried using(below method) but no use. Can someone please help 

CustomMarginSize

 Hi Satish and Lenon,

Can you try css pagebreak in media print.

 

@media print {

  footer {page-break-after: always;}

}

 

Hope this helps.


Thanks

AD

 Hello, AD ,

I tried it but it does not work.


Thank you, Satish

 

Rank: #17880

I managed it with dirty CSS and media query but if the plugin has something with Header and Footer would have been great, with well documented. I understand but we do have complicated PDF sometime.

Rank: #21259

I'm working on Reactive application ,

Functionality to be implemented: Print the content in my page into a PDF document with default header and footer.

Implemented the above functionality using media queries and HTML/CSS,

Issue : The middle content of the page is being hidden behind header and footer.


Code:

  /* Styles go here */

.page-header, .page-header-space { 

  height: 100px;

}

.page-footer, .page-footer-space {

  height: 100px;

}

.page-footer {

  position: fixed;

  bottom: 0;

  width: 100%;

  border-top: 0px solid black; 

  background: none; 

}

.page-header {

  position: fixed;

  height: 100px;

  top: 0mm;

  width: 100%;

  border-bottom: 0px solid black; 

  background: none;

  text-align: right;

}

.page {   

    page-break-after: always;    

}

 @page { 

  margin:2mm;

  size:A4;

 @media print {

   thead {display: table-header-group;} 

   tfoot {display: table-footer-group;}

   button {display: none;}

   body {margin: 0;}

   }

Kindly share me inputs to resolve the same in reactive application.


Regards,

Sowndarya