This is a migrated thread and some comments may be shown as answers.

Export PDF with multiple pages

12 Answers 942 Views
Drawing API
This is a migrated thread and some comments may be shown as answers.
Fredrik
Top achievements
Rank 1
Fredrik asked on 20 Jan 2015, 12:21 PM
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"
    });
});

12 Answers, 1 is accepted

Sort by
0
Fredrik
Top achievements
Rank 1
answered on 20 Jan 2015, 02:05 PM
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!
0
Puneel
Top achievements
Rank 1
answered on 13 Feb 2015, 05:37 PM
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. 
0
Mihai
Telerik team
answered on 17 Feb 2015, 11:07 AM
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!
 
0
Puneel
Top achievements
Rank 1
answered on 17 Feb 2015, 03:09 PM
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.
0
Puneel
Top achievements
Rank 1
answered on 17 Feb 2015, 03:23 PM
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?
0
Mihai
Telerik team
answered on 18 Feb 2015, 10:09 AM
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!
 
0
Mihai
Telerik team
answered on 18 Feb 2015, 11:20 AM
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!
 
0
Mihai
Telerik team
answered on 19 Feb 2015, 10:02 AM
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!
 
0
Puneel
Top achievements
Rank 1
answered on 19 Feb 2015, 05:35 PM
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.

‚Äč
0
Mihai
Telerik team
answered on 23 Feb 2015, 09:05 AM
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!
 
0
Puneel
Top achievements
Rank 1
answered on 05 Jun 2015, 07:26 PM

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. 

0
T. Tsonev
Telerik team
answered on 09 Jun 2015, 03:09 PM
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!
 
Tags
Drawing API
Asked by
Fredrik
Top achievements
Rank 1
Answers by
Fredrik
Top achievements
Rank 1
Puneel
Top achievements
Rank 1
Mihai
Telerik team
T. Tsonev
Telerik team
Share this question
or