Export PDF with multiple pages

[Fredrik]

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"
    });
});

[Fredrik]

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!

[Puneel]

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. 

[Mihai]

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

 

 

[Puneel]

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.

[Puneel]

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?

[Mihai]

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

 

 

[Mihai]

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

 

 

[Mihai]

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

 

 

[Puneel]

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.

​

[Mihai]

Hi,

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

Regards,
Mihai
Telerik

 

 

[Puneel]

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. 

[T. Tsonev]

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