I am trying to export a long webpage with many grids and charts to a pdf file with multiple pages. I tried to use the forcePageBreak property but this property breaks the generated pdf. Here is the javascript code of the pdf export:
exportToPdf:function (){
var className = $(this).data('groupname');
$('.'+className).find('.k-grid-excel').hide();
$('.'+className).find('.removeFromReport').hide();
kendo.drawing.drawDOM($("."+className),
{
forcePageBreak: ".page-break",
margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" },
paperSize: "auto",
landscape: true,
multiPage: true }) .then(function(group) {
return kendo.drawing.exportPDF(group, { }); }) .done(function(data) {
kendo.saveAs({
dataURI: data,
fileName: "systemReport.pdf",
proxyURL: "//demos.telerik.com/kendo-ui/service/export" });
$('.'+className).find('.k-grid-excel').show();
$('.'+className).find('.removeFromReport').show();
});
}
I will also attach a zip file with the generated pdf with and without the property forcePageBreak.
Is there any other way to achieve the same functionality.
Many thanks in advance
9 Answers, 1 is accepted
Take a look at this sample illustrating how to export multiple widgets with a large Grid, will multiple pages.
I noticed in your code the "landscape: true". Remove that to fix the formatting in the pdf.
Also, remember to include the following script for large sets:
<script src="//kendo.cdn.telerik.com/2016.1.112/js/pako_deflate.min.js"></script>Hopefully, this helps steer you in the right direction.
Regards,
Patrick
Telerik
Rank 1
Hi,
Like the original poster, I've not had any success with creating any PDFs with more than one page. My Javascript function currently looks like this:
function pdfAllOffers() {
// add all offer descriptions
createAllSummaries();
// Convert the DOM element to a drawing using kendo.drawing.drawDOM
kendo.drawing.drawDOM($(".offer-list"), {
forcePageBreak: ".page-break",
paperSize: "auto",
margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" },
multiPage: true
}).then(function(group) {
//Render the result as a PDF file
return kendo.drawing.exportPDF(group);
}).done(function(data) {
//Save the PDF file
kendo.saveAs({
dataURI: data,
fileName: "Playbook.pdf",
proxyURL: "/PromoFinderOld/Pdf_Export_Save"
});
});
}
My createAllSummaries call creates a set of divs, each with the "page-break" class, inside the div I am targeting with kendo.drawing.drawDOM. I've looked at lots of posts for hints on how to make pagination work, but no luck. I always get a PDF that has NO margins, and stacks all my divs into a single page. I am trying to get each of my generated divs to be on its own PDF page. Inspecting the page afterward, the divs are creating properly, with the correct class for pagination. Each of those dynamically generated divs has a bunch of simple tables and the like - nothing complex is involved.
An example that shows PDF generation with one div per page would be great - the example linked to here is one div for the header, one for the footer, and pagination over the rows of the grid, which works great but is not quite what I need.
Any help would be appreciated! Thanks in advance.
It works for me. Here is a sample:
http://dojo.telerik.com/@mishoo/ABeSo
Note that I passed a paperSize which is not "auto". If you need the paper size to be determined by the content, here are a few additional notes:
1. the margin option will not apply in this case. Sorry about this inconsistency in our documentation, I will fix that. You can, however, set the margin later (see demo).
2. the resulting document, as you can see, contains pages of varying dimensions, depending on the content of each page. To fix width and height through CSS, we can set width and height on the .page class, but we must also add a border (see demo - remove the border to see the effect).
Hope this helps.
Regards,
Mihai
Telerik
Rank 1
Thanks! Your examples confirmed my approach wasn't way off; the later two were very helpful in fine tuning the formatting.
After a great deal of digging, I found out that the various kendo.*.js files in my project had not been updated when I last updated to the latest version of Kendo, and then used the "upgrade wizard" in Visual Studio. The dll was upgraded, but not the .js. I manually copied the files to the project, and pagination now works.
Thanks again
Rank 1
Hi Patrick,
I have a large amount of data to export. This file turns out to be around 138 pages. The pdf is exported properly but after starting the export, the browser prompts the kill page/wait message. I have already included the script that you mentioned.
Is there a way to avoid that browser prompt?
Thanks!
As stated in our documentation, when there is a big number of records in the Grid we do recommend server-side export:
http://docs.telerik.com/kendo-ui/controls/data-management/grid/pdf-export#export-of-all-pages
http://docs.telerik.com/kendo-ui/framework/save-files/introduction#force-proxy-usage
I hope this will help to improve the performance.
Regards,
Stefan
Telerik by Progress
Rank 1
[quote]As stated in our documentation, when there is a big number of records in the Grid we do recommend server-side export[/quote]
What exactly do you mean by server-side export? Some general idea would be helpful.
Thanks!
Using the server proxy in this scenario is demonstrated in the second provided link. I will provide the link again from the top of the article:
http://docs.telerik.com/kendo-ui/framework/save-files/introduction#set-server-proxy
Also, I can suggest checking our runnable example with server-side export. The example is for MVC but the implementation is similar:
http://www.kendoui.io/kendo-ui/aspnet-mvc/helpers/grid/how-to/pdf-export-server-side
Regards,
Stefan
Telerik by Progress
Rank 1