Hello Kendo team,
Can you please help me fix this export issue, where in if I export with a lot of data, the first page is not having all the columns of data.
Please have a look at the stackblitz
https://stackblitz.com/edit/angular-znla2i-f7gggwxy.
If I click on Export Big, the first page is having only first column, expected result is to have all the columns.
1 Answer, 1 is accepted
Hi Abhishek,
In order to fit all the columns with a larger number of data to the specified paper size when the PDFExport component is used, the developer would need to experiment with different (lower) scale values and determine the one that best fits the columns in the exported document:
As an alternative, you can set the paperSize property to 'auto', which would configure the PDFExport component to determine the paper size based on the content to be exported. If this is not suitable for your scenario, you can also try specifying a bigger paper size so that the exported columns will fit in the document.
For demonstration, here is the StackBlitz example from your reply, in which the PDFExport component's scale option is set to 0.4 and all of the columns can be observed in the exported PDF document when the "Export Big" button is clicked:
I hope the provided information clears up the matter.
Regards,
Zornitsa
Progress Telerik
Enjoyed our products? Share your experience on G2 and receive a $25 Amazon gift card for a limited time!
Rank 1
Thank you Zornitsa for the detailed reply,
It works with the specified data; however, if we have additional data (200 rows), we still encounter the same issue, and we cannot use paperSize auto as it disturbs the layout.
Please find the stackblitz link with the issue.
https://stackblitz.com/edit/angular-znla2i-valyn9n8?file=src%2Fapp%2Fapp.component.ts
Hi Abhishek,
Depending on the increasing amount of data, the developer can test by setting lower scale values for the PDFExport component until the value is enough so that all data can entirely fit in the exported document. For example, in the StackBlitz example sent in your last reply, setting the scale to 0.2 results in the whole data being exported on the first page of the PDF document.
Here is also the updated StackBlitz example to demonstrate the results of lowering the scale value to 0.2:
I hope this sheds some light on the matter.
Regards,Zornitsa
Progress Telerik
Rank 1
Hello Zornitsa,
Unfortunately, this does not work for the use case I am looking for, as the amount of data is completely dynamic, so any help on that matter?
Also lowering the scale makes the font-size too small, is there a solution to that too?
Hi Abhishek,
After reviewing the information in this thread again, I think that I might have misunderstood the exact requirement in your scenario. Please accept my apologies for that.
Seemingly, I was mistaken that you desire for the whole data to be displayed on the first page of the exported PDF document, i.e. all columns along with all of their corresponding items. Instead, it looks like your requirement is to have all 4 columns appear next to each other on the first page (in the same way as they are displayed in the example), however, their items can be spread across the pages (again displayed in the same column structure) when the number of the rendered elements is large so that it exceeds the page size. Please correct me if my understanding is wrong.
If this is indeed the desired scenario, the observed behavior of the columns not being displayed next to each other on the first page is due to the approach taken for their rendering and the styles being applied to the elements. To be more comprehensive, in the example, you are rendering each column in a separate <div> element, which means that the elements will be broken across the pages in the exported PDF document based on the defined columns.
Given this rendering approach, the PDFExport component will export each <div> element that represents a column on a separate page until the number of its internal elements ends (since the rows are not distinguished in any way), which will leave space for the next <div> column and so on. In this line of thought, to display the columns next to each other on the first page and continue to display their items in the same structure on all remaining pages, the developer should adjust the rendering approach.
What I mean is that the elements should rather be displayed in a structure of rows, instead of being grouped in 4 columns, so that the elements can be broken across the exported pages based on the rows. For example, the HTML rendering can be adjusted as follows:
<div>
<!-- Header row -->
<div class="my-row">
<div class="fw-bold">Some Headding Here</div>
<div class="fw-bold">Some Headding Here</div>
<div class="fw-bold">Some Headding Here</div>
<div class="fw-bold">Some Headding Here</div>
</div>
<!-- Remaining rows -->
<div class="my-row" *ngFor="let i of totalCount">
<div>Sample-Text-1</div>
<div>Sample-Text-2</div>
<div>Sample-Text-3</div>
<div>Sample-Text-4</div>
</div>
</div>...with a suitable CSS styling:
.my-row {
display: flex;
flex-direction: row;
justify-content: space-around;
}Alternatively, as a more suitable approach for rendering table-like structured elements, the developer can display the items in a <table> element with the corresponding rows (<tr>) and cells (<td>).
For demonstration of the suggested modification, please refer to the following StackBlitz example:
In the above example, it can be observed how the PDFExport component exports the elements on all pages in the same columns structure as they appear on the page.
I hope this is what you are looking for.
Regards,
Zornitsa
Progress Telerik