PDF Export Multipage with Preview

[Christian]

I am looking for an example similar to this demo:

https://demos.telerik.com/kendo-ui/pdf-export/page-layout

 

However when there are more table rows I need a separate page.

I can get the pdf output working correctly (including page headers and footers), but the on-screen content does not match.

a) no second page on the screen (either to scroll or via pagination controls)

b) the page header/footer from the template I used in the drawDOM options are not on the screen

 

Any ideas how to do this?

 

thank you!

[Veselin Tsvetanov]

Hello Christian,

May I ask you to modify the Demo sample, so it replicates the scenario in question and send it t us? This way we will be able to troubleshoot the issue locally and to provide you with the most appropriate assistance on that case. You could use the following Dojo as a starting point.

Regards,
Veselin Tsvetanov
Progress Telerik

[Christian]

I have modified the Demo so it integrates the multipage features from the documentation. (https://docs.telerik.com/kendo-ui/framework/drawing/drawing-dom)

 

Please look at this Dojo: https://dojo.telerik.com/eGOsIPIy

 

The pdf output works quite well but the on-screen page preview has two issues:

 

A) Page Header / Footer

If I use the original header/footer from the demo they do not show up on the second page of the pdf. So I switched to the template approach from the doc, but now I do not have the header/footer in the on-screen page preview.

 

 

B) Page Break

As you can see the content overflows the on-screen page preview.

Do you have any idea how to show a second on-screen page? Either by scrolling or via next page button does not matter.

 

thanks a lot,

Christian

[Veselin Tsvetanov]

Hi Christian,

As per your questions:

- The layout, including the header and the footer of the page visible on the Page layout demo are styled and configured with custom CSS, so that they appear on predefined place in the view. Also, upon export that view will be exported as it is. The view spans only one page on purpose. If you need to display longer content the only possible approach to include header and footer on each page is to use a Page template as you did. As you have correctly observed, in such case the header and the footer will be present only in the exported PDF. If you need to place them on the view, you will have to include the respective elements directly in the markup. Here is a modified version on how such scenario could be achieved. You will notice that the pageNum and the totalPages are not displayed properly in the view. That is because the page context is only available in the exported PDF and not in the view itself. Also the PDF pagination will not be available in the view.

- If you need to accommodate visually the full content of the enlarged list on the same page, you will need to alter the custom CSS applied to it. Simply remove the height rule set on the A4 class:

.size-a4 {
    width: 6.2in;
    /*height: 8.7in;*/
}

Here is the modified version of the same Dojo. If you need to visually separate two pages on the screen, that would require further customization of the styles, but also changes in the HTML. If you need assistance on such task, I would suggest you our Professional services. That team is focused on implementing tailor-made solutions as per customer requirements. Please, let me know if you are interested in cooperating with our colleagues and I will arrange someone from that team to contact you directly.

Regards,
Veselin Tsvetanov
Progress Telerik