Export pdf in multiple pages

5 posts, 0 answers
  1. ENTR
    ENTR avatar
    1 posts
    Member since:
    Apr 2013

    Posted 14 Jan Link to this post

    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

  2. Patrick
    Admin
    Patrick avatar
    173 posts

    Posted 14 Jan Link to this post

    Hi Entr,

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. David
    David avatar
    5 posts
    Member since:
    Jan 2015

    Posted 06 Apr in reply to Patrick Link to this post

    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.

     

  5. Mihai
    Admin
    Mihai avatar
    153 posts

    Posted 07 Apr Link to this post

    Hello,

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. David
    David avatar
    5 posts
    Member since:
    Jan 2015

    Posted 11 Apr in reply to Mihai Link to this post

    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

Back to Top
Kendo UI is VS 2017 Ready