This is a migrated thread and some comments may be shown as answers.

PDF Export is printing multiple pages on a single page, overlapping them

3 Answers 564 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Grant
Top achievements
Rank 2
Iron
Iron
Veteran
Grant asked on 09 Jun 2020, 10:23 AM

Hi, 

As an expansion on my title, Im exporting a grid with some grouping to PDF, and the results make up 2 pages, but they are both being printed on the same page, please see the attachment so I dont sound crazy.

Here follows my template, pdf config and css styling:

<script id="template-pdf-export" type="text/x-kendo-template">
  <div class="pdf-export">
    <div class="header">
      <div style="float: right">Page #: pageNum # of #: totalPages #</div>
      Version Number x.y.z
    </div>
    <div class="footer">
      Page #: pageNum # of #: totalPages #
    </div>
  </div>
</script>

 

pdf: {
  fileName: "BFO-Export.pdf",
  landscape: true,
  margin: { top: "2cm", right: "1cm", bottom: "1cm", left: "1cm" },
  paperSize: "A4",    // Required so that template and scale are used
  scale: 0.8,  // Scale down the text size when printing to PDF
  template: $("#template-pdf-export").html()
}
 
/* Basic styling for a PDF export template */
.pdf-export {
    font-family: "DejaVu Sans", "Arial", sans-serif;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}
.pdf-export .header {
    position: absolute;
    top: 30px;
    left: 30px;
    right: 30px;
    border-bottom: 1px solid #888;
    color: #888;
}
.pdf-export .footer {
    position: absolute;
    bottom: 30px;
    left: 30px;
    right: 30px;
    border-top: 1px solid #888;
    text-align: center;
    color: #888;
}

 

Please Advise.

Thanks,
Grant

3 Answers, 1 is accepted

Sort by
0
Accepted
Anton Mironov
Telerik team
answered on 11 Jun 2020, 09:57 AM

Hi, Grant,

Thank you for the provided code.

In order to export one page from the Kendo UI Grid to multiple pages in the PDF, enable the multiPage property. Here is an example:

If you are using the latest Google Chrome, use the fullscreen page for exporting.

Furthermore, you can find the following article that describes how to use multi-page content in more details:

Let me know if I can assist you any further.

 

Best Regards,
Anton Mironov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Grant
Top achievements
Rank 2
Iron
Iron
Veteran
answered on 12 Jun 2020, 12:00 PM

Hi Anton ,

Thanks for getting back to me, I've been scratching my head for days.

Im not entirely sure what is meant under the Rendering Multi-Page Content where it says "...pass multiPage: true to the Group object...". What 'Group' object? I've set the attribute in my pdf object and its does work, should i be putting it elsewhere aswell?

Thanks,
Grant

0
Anton Mironov
Telerik team
answered on 15 Jun 2020, 10:00 AM

Hello, Grant,

I am glad that the issue you were facing is now resolved.

The article provides information for the PDF exporting in general. The object is needed only when the export is done via the drawDOM() method. In your case, the options from the grid are directly passed to the method and nothing else is needed on your part.

 

Regards,
Anton Mironov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Grid
Asked by
Grant
Top achievements
Rank 2
Iron
Iron
Veteran
Answers by
Anton Mironov
Telerik team
Grant
Top achievements
Rank 2
Iron
Iron
Veteran
Share this question
or