Export multiple charts to PDF?

[JohnVS]

With the new Q3 2014 update, I see that we can now export charts to PDF. In our case, we have a collection of charts that all need to go in one PDF document. Is that possible?

[Dimiter Madjarov]

Hi John,


Yes, this could be achieved. Take a look at the following demo, which demonstrates advanced exporting of multiple items at once.

Regards,
Dimiter Madjarov
Telerik

 

 

[Puneel]

I have a MVC page where a submit form issues an ajax call to load few kendo ui grids and kendo ui charts in a <div> placeholder, calling the asp.net mvc action. Now I like to add the feature where the same submit button with 'PDF' export option as hidden field, do the same exact content to be exported as PDF. How can I do that? 
I know I saw examples where I can get svg of the chart on javascript and post it at the submit. But in m case, I have mutliple charts and multiple grids as well. 
Please help me with a solution..

[Dimiter Madjarov]

Hello Puneel,


Take a look at the demo from my previous post. It demonstrates how to export multiple elements at once.

Regards,
Dimiter Madjarov
Telerik

 

 

[Puneel]

I did follow but have been encountering a javascript error

"Uncaught Error: Cannot output undefined to PDF". at 

 return kendo.drawing.exportPDF(group, {
                            paperSize: "auto",
                            margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" }
                        });

which wasn't giving real indication of what was causing the the issue. The same chart razor view works fine on HTML rendering but when it comes to exporting it, it was failing. 
So I tracked it down through elimination process and found out that the ValueAxis label format like below; string.Empty is the culprit. When I replace it with "" then the javascript error disappeared.

.ValueAxis(value => value.Numeric().Labels(label => label.Format("{0}" + (isPercent ? "%" : string.Empty))))
But I am happy that finally I am able to get back to my usual work. 

Thank you. 

[Dimiter Madjarov]

Hello Puneel,


Thank you for the update. have a great day!

Regards,
Dimiter Madjarov
Telerik

 

 

[JohnVS]

The link to the demo no longer works. Where can I now read about exporting multiple Grids to PDF?

[Puneel]

http://demos.telerik.com/kendo-ui/pdf-export/index It got newer examples.

[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.

[Dimiter Madjarov]

Hello Puneel,

The functionality is currently not available out of the box. We are currently working on providing it with the Q1 2015 release.

Regards,
Dimiter Madjarov
Telerik

 

 

[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?

[Dimiter Madjarov]

Hello Puneel,

As stated previously the feature is not supported at the moment, but we are working on providing a solution in the upcoming release.

Regards,
Dimiter Madjarov
Telerik

 

 

[Puneel]

THank you and looking forward for that.

[Sha]

Hi,

Just wonder if the export multiple controls to PDF feature is available now?

 

Thanks,

Sha

[Dimiter Madjarov]

Hello Sha,

As discussed in the first post, the feature is supported. It is demonstrated in the following demo. Different features were discussed in the following posts.

Regards,
Dimiter Madjarov
Telerik

 

 

[Rachael]

Hi,

I was wondering if the newer versions support exporting a large grid to multiple pages instead of shrinking it into one now? An example or documentation link of how to do this would be helpful if it does!

I am currently using the code below from the demo here: http://demos.telerik.com/kendo-ui/pdf-export/index

function exportPdf () {
       // Convert the DOM element to a drawing using kendo.drawing.drawDOM
       kendo.drawing.drawDOM($(".content-wrapper"))
       .then(function (group) {
           // Render the result as a PDF file
           return kendo.drawing.exportPDF(group, {
               paperSize: "A4",
               margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" },
               muliPage:  "true"
           });
       })
       .done(function (data) {
           // Save the PDF file
           kendo.saveAs({
               dataURI: data,
               fileName: "HR-Dashboard.pdf",
               proxyURL: "//demos.telerik.com/kendo-ui/service/export"
           });
       });
   };

I have also used the the built in PDF export using the .Pdf property of the grid, both shrink to fit though...

thanks,

Rachael

[Mihai]

Hello,

The next version, to be released in May, will support that by default when the paperSize option is present and different from "auto".

Regards,
Mihai
Telerik

 

 

[Rachael]

Thank you!

[Mark]

Hello: I am looking to do the same thing, but the link to the example is broken.  Is there an example of exporting multiple charts to one pdf available.

Thanks.

[Mark]

I am trying to do the same thing, but the above link to the demo is broken.  Is it still available?

[Dimiter Madjarov]

Hello Mark,

You could find the sample PDF export demos on the following page.

Regards,
Dimiter Madjarov
Telerik

 

 

[Etienne]

Hi

I've got multiple charts displayed on the same web page and need to export it to PDF but with some control.Typically I need to add some text here and there outside of the charts, and make sure that each chart is a on a separate page on the final result. 

What would be a good approach for implementing this

At the moment I'm thinking about creating a new View specific for the PDF export (with each chart being a partial view which is already the case anyway) and using a third party library to render the view and return pdf from server side code. 

Is there such capabilities from the Telerik lib? All examples I've seen so far consist of drawing what's already displayed on the screen and dump it in a PDF file which I don't think can work in my case.

Thanks a lot 

[Dimiter Madjarov]

Hello Etienne,

Yes, those configurations are part of the Kendo UI PDF export functionality. The following documentation pages will be helpful in implementing it:

Multi-Page PDF Output
http://docs.telerik.com/kendo-ui/framework/drawing/drawing-dom#configuration-Multi-Page

Automatic Page Breaking
http://docs.telerik.com/kendo-ui/framework/drawing/drawing-dom#configuration-Automatic

Header and Footer templates
http://docs.telerik.com/kendo-ui/framework/drawing/drawing-dom#configuration-Template

Regards,
Dimiter Madjarov
Telerik by Progress

 

 

[Etienne]

Hi Dimiter

Thanks for your response it helps a lot. I like this functionality it's very quick however I'm struggling to mix text with my charts.

I've tried to put my text in an hidden div which I toggle visible when exporting to pdf but that makes the screen flicker so that's not good. 

So I'm trying the approached with a div outside of the screen with position absolute. 

My problem is that I cannot get this text to be on the same page as the chart (I need A4 format). BasicallyI'm trying something like this:

$(".export-pdf").click(function() {        
    kendo.drawing.drawDOM("#pdfheader", {         
        margin: "2cm",
    }).then(function(headergroup){
        kendo.drawing.drawDOM("#chartsContainer", {             
            paperSize: "A4",
            margin: "2cm",
            scale: 0.8 
        }).then(function(maingroup){
            maingroup.children.push(headergroup);
            kendo.drawing.pdf.saveAs(maingroup, "multipage.pdf")
        })                      
    });
});

but the text in the "header" div takes a full page followed by the charts. 

[Dimiter Madjarov]

Hello Etienne,

You could try defining a template for the exported content, similarly to the following example. It has header an footer div elements which are explicitly positioned via CSS on the top and bottom of the page. The rest of the content is also placed via CSS in between them.

Regards,
Dimiter Madjarov
Telerik by Progress

 

 

[Etienne]

Thanks

I think this will work for me however I was hoping you could tell me what was wrong with my approach above. 

The template will be good if I only have one page but I might have more in the future and I don't want to repeat the text on each page. 

[Dimiter Madjarov]

Hello Etienne,

The template is applied to each individual page, even on multiple page export. This is demonstrated in the example from my previous post.

Regarding the other approach, I cannot state what is the exact issue with it, without inspecting a runnable version. If further assistance is required regarding this, you could open a ticket and send us the runnable version of the code, so we could advise further.

Regards,
Dimiter Madjarov
Telerik by Progress