Export PDF with multiple pages

13 posts, 0 answers
  1. Fredrik
    Fredrik avatar
    3 posts
    Member since:
    Jan 2008

    Posted 20 Jan 2015 Link to this post

    Hi,

    I'm trying to export a long webpage to a PDF with multiple pages. I started building on the example in the demo here http://demos.telerik.com/kendo-ui/pdf-export/page-layout but have not been able to create a PDF with more than one page.

    The documentation says that you should create a sub-Group for each pdf-page, to test in a simpler way I expanded another of your examples and create a "root" Group with 2 "p" Groups appended to it. Only the last appended sub-Group is displayed in my PDF though.

    Could you please give me an example of how to do this?

    var draw = kendo.drawing;
    var geom = kendo.geometry;
     
    var rect = new geom.Rect([5, 5], [240, 240]);
    var path = draw.Path.fromRect(rect).stroke("red", 5);
    var rect2 = new geom.Rect([5, 5], [240, 240]);
    var path2  = draw.Path.fromRect(rect).stroke("blue", 5);
     
    var root = new draw.Group();
     
    var p1 = new draw.Group();
    root.append(p1);
    p1.append(path);
     
    var p2 = new draw.Group();
    root.append(p2);
    p2.append(path2);
     
    draw.exportPDF(root, {
      paperSize: "A5",
      landscape: true,
      multiPage: true
     }).done(function(data) {
        kendo.saveAs({
            dataURI: data,
            fileName: "frame.pdf"
        });
    });
  2. Fredrik
    Fredrik avatar
    3 posts
    Member since:
    Jan 2008

    Posted 20 Jan 2015 in reply to Fredrik Link to this post

    I realized that there was a newer Kendo version to install (1314), and using that one the example above did produce 2 pages in my PDF - so problem solved!
  3. Kendo UI is VS 2017 Ready
  4. Puneel
    Puneel avatar
    14 posts
    Member since:
    May 2014

    Posted 13 Feb 2015 in reply to Fredrik Link to this post

    Hi, I see that examples had been updated in http://demos.telerik.com/kendo-ui/pdf-export/index
    However, I have an issue with my exported PDF. When I have more number of grids and charts in the DIV that I want to export, I would like to export in multiple pages rather than all in single page. Because when I want to print it, the entire content it shrinked and fit in one single page which makes it unreadable. Can you guide me on how I can export to pdf with multiple pages?
    Here is my code.
    $.ajax({
                    type: "GET",
                    url: '@Url.Action("GeneratePdfReport", "Report")',
                    data: {
                        'MeasureIds': MeasureIds,
                        'TaskId': $("#Tasks").val(),
                        'TaskCategoryId': $("#TaskCategories").val(),
                        'ReportType': $('#ReportType').val(),
                        'ChartType': $('#ChartType').val(),
                        'ShowComments': $('#ShowComments').val(),
                        'ShowVarianceAnalysis': $('#ShowVarianceAnalysis').val(),
                        'ShowDataTable': $('#ShowDataTable').val(),
                        'ReportAllMeasuresInTask': $('#ReportAllMeasures').val(),
                        'StartDate': $('#ReportStartDate').val(),
                        'EndDate': $('#ReportEndDate').val(),
                        'UseReportDateRange': $('#UseReportDateRange').val()
                    },
                    traditional: true,
                    success: function(data) {
                        $('#ReportPlaceHolder').html(data);
                        // Convert the DOM element to a drawing using kendo.drawing.drawDOM
                        kendo.drawing.drawDOM($("#ReportPlaceHolder",{forcePageBreak:'.page-break'}))
                            .then(function(group) {
                                // Render the result as a PDF file
                                return kendo.drawing.exportPDF(group, {
                                    paperSize: "auto",
                                    margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" },                               
                                });
                            })
                            .done(function(d) {
                                // Save the PDF file
                                kendo.saveAs({
                                    dataURI: d,
                                    fileName: "Iqc-Export-Pdf.pdf",
                                    proxyURL: '@Url.Action("SaveAsPDF", "Report")',
                            });
                        });    

                        if (document.all && !window.atob) {
                            $('#ReportPlaceHolder').css('display', 'block');
                        } else {
                            $('#ReportPlaceHolder').css('display', 'none');
                        }
                    }
                });

    '.page-break' is the css class that I added to each of the DIV containging kendo grid & chart. So I wanted to force new page on each of those DIVs so that when I print I ll have each paper containing the grid & chart. 
  5. Mihai
    Admin
    Mihai avatar
    153 posts

    Posted 17 Feb 2015 Link to this post

    Hello,

    You must add the argument multiPage: true to the exportPDF call.  Also, make sure to include elements with class page-break in your HTML, at the places where you want to create a new page.  E.g. <span class="page-break"></span>.

    Regards,
    Mihai
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Puneel
    Puneel avatar
    14 posts
    Member since:
    May 2014

    Posted 17 Feb 2015 in reply to Mihai Link to this post

    multipage: true hasn't done anything for me. I already had the "page-break" css class inserted into the <Div>s I wanted to have separate pages.
    Like mentioned on http://www.telerik.com/forums/export-multiple-charts-to-pdf#qzZEiTy4AE-2yCwkirV7Kw it is not available out of the box yet.
    I like to have an alternative in the mean time.
  7. Puneel
    Puneel avatar
    14 posts
    Member since:
    May 2014

    Posted 17 Feb 2015 in reply to Puneel Link to this post

    This is what I got working as of now.

    var root = new kendo.drawing.Group();
    $('#ReportPlaceHolder .page-break').each(function(section) {
                            kendo.drawing.drawDOM(this).then(function (group) {
                                group.options.set("pdf", {
                                    margin: {
                                        left: "1cm",
                                        right: "1cm",
                                        top: "1cm",
                                        bottom: "1cm",
                                    }
                                });
                                root.append(group);
                            });
                        });
                        root.options.set("pdf", {
                            multiPage: 'true',
                        });
                        kendo.drawing.pdf.saveAs(root, "iqc-pdf.pdf", '@Url.Action("SaveAsPDF", "Report")');

    However, it would be nice if a grid is large and automatically spit into a second page automatically, it would be awesome.

    Any thoughts?
  8. Mihai
    Admin
    Mihai avatar
    153 posts

    Posted 18 Feb 2015 Link to this post

    Hi,

    Automatic page splitting isn't supported at this time.

    On the other hand, I can confirm that using forcePageBreak does not work for charts (other HTML or widgets should be displayed, but charts will look empty).  We will investigate a possible fix for that, but in the mean time your workaround is a good solution.

    Regards,
    Mihai
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  9. Mihai
    Admin
    Mihai avatar
    153 posts

    Posted 18 Feb 2015 Link to this post

    Hello Puneel,

    I pushed a fix for this issue and it will be available in the next internal build (usually released on Fridays).  When you'll upgrade, code like the following should work:

        <p>
          <button onclick="exportPDF('#test')">Export</button>
        </p>
        
        <div id="test" style="display: inline-block; border: 1px solid red; padding: 20px;">
          <div id="chart1" style="width: 500px; height: 500px;"></div>
          <div class="page-break"></div>
          <div id="chart2" style="width: 500px; height: 500px;"></div>
        </div>

        <script>
        function exportPDF(selector) {
          kendo.drawing.drawDOM($(selector), {
            forcePageBreak: ".page-break"
          }).then(function(group){
            group.options.set("pdf.margin", "1cm");
            kendo.drawing.pdf.saveAs(group, "test.pdf");
          });
        }
        $("#chart1").kendoChart(...);
        $("#chart2").kendoChart(...);
        </script>

    Regards,
    Mihai
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  10. Mihai
    Admin
    Mihai avatar
    153 posts

    Posted 19 Feb 2015 Link to this post

    Hi Puneel,

    Just a correction to my previous message: I don't think this fix is going to make it in an internal build, because it's related to other features that will only show up in the next major version (the forcePageBreak option is not yet available in the stable branch).

    I'm sorry for my confusion.

    Regards,
    Mihai
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  11. Puneel
    Puneel avatar
    14 posts
    Member since:
    May 2014

    Posted 19 Feb 2015 in reply to Mihai Link to this post

    Thank you and appreciate your prompt responses.
    I ll keep my solution for now till the major release comes out.

    It would be an ideal solution to just pass the selector and exportPDF automatically insert the page breaks and prints in multiple pages.

  12. Mihai
    Admin
    Mihai avatar
    153 posts

    Posted 23 Feb 2015 Link to this post

    Hi,

    Again, this feature is implemented and will be included in the next major release (Q1 2015).

    Regards,
    Mihai
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  13. Puneel
    Puneel avatar
    14 posts
    Member since:
    May 2014

    Posted 05 Jun 2015 in reply to Mihai Link to this post

    var root = new kendo.drawing.Group();
                        $('#ReportPlaceHolder .page-break').each(function(section) {
                            kendo.drawing.drawDOM(this).then(function (group) {
                                group.options.set("pdf", {
                                    margin: {
                                        left: "1cm",
                                        right: "1cm",
                                        top: "1cm",
                                        bottom: "1cm"
                                    }
                                });
                                root.append(group);
                            });
                        });
                        root.options.set("pdf", {
                            multiPage: 'true'
                        });
                        kendo.drawing.pdf.saveAs(root, "iqc-pdf.pdf", '@Url.Action("SaveAsPdf", "Report")');

     

    Am I missing anything here? because I see the charts and multiple pages but no lines are present on each chart. 

  14. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 09 Jun 2015 Link to this post

    Hi,

    Let's keep the discussion regarding this issue focused in the support thread. It seems to be related to the chart export in particular, not the multi-page feature.

    Regards,
    T. Tsonev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready