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

Export multiple charts to PDF?

26 Answers 482 Views
Charts
This is a migrated thread and some comments may be shown as answers.
JohnVS
Top achievements
Rank 1
JohnVS asked on 21 Nov 2014, 04:24 PM
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?

26 Answers, 1 is accepted

Sort by
0
Accepted
Dimiter Madjarov
Telerik team
answered on 24 Nov 2014, 04:56 PM
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
 
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 08 Dec 2014, 06:29 PM
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..
0
Dimiter Madjarov
Telerik team
answered on 09 Dec 2014, 12:25 PM
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
 
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 09 Dec 2014, 08:07 PM
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. 





0
Dimiter Madjarov
Telerik team
answered on 10 Dec 2014, 02:26 PM
Hello Puneel,


Thank you for the update. have a great day!

Regards,
Dimiter Madjarov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
JohnVS
Top achievements
Rank 1
answered on 13 Feb 2015, 04:22 PM
The link to the demo no longer works. Where can I now read about exporting multiple Grids to PDF?
0
Accepted
Puneel
Top achievements
Rank 1
answered on 13 Feb 2015, 04:53 PM
0
Puneel
Top achievements
Rank 1
answered on 13 Feb 2015, 05:06 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
Dimiter Madjarov
Telerik team
answered on 17 Feb 2015, 08:35 AM

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
 
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: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
Dimiter Madjarov
Telerik team
answered on 19 Feb 2015, 09:24 AM

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
 
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:36 PM
THank you and looking forward for that.
0
Sha
Top achievements
Rank 1
answered on 19 May 2015, 10:13 PM

Hi,

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

 

Thanks,

Sha

0
Dimiter Madjarov
Telerik team
answered on 20 May 2015, 07:01 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Rachael
Top achievements
Rank 1
answered on 11 Apr 2016, 08:52 PM

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

0
Mihai
Telerik team
answered on 12 Apr 2016, 07:54 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Rachael
Top achievements
Rank 1
answered on 12 Apr 2016, 03:42 PM
Thank you!
0
Mark
Top achievements
Rank 1
answered on 24 Jun 2016, 04:40 PM

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.

0
Mark
Top achievements
Rank 1
answered on 24 Jun 2016, 04:44 PM
I am trying to do the same thing, but the above link to the demo is broken.  Is it still available?
0
Dimiter Madjarov
Telerik team
answered on 27 Jun 2016, 07:21 AM

Hello Mark,

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

Regards,
Dimiter Madjarov
Telerik
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
0
Etienne
Top achievements
Rank 1
answered on 07 Nov 2016, 05:45 AM

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 

0
Dimiter Madjarov
Telerik team
answered on 07 Nov 2016, 09:06 AM

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
 
Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
 
0
Etienne
Top achievements
Rank 1
answered on 08 Nov 2016, 04:11 AM

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. 

0
Dimiter Madjarov
Telerik team
answered on 08 Nov 2016, 04:44 PM

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
 
Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
 
0
Etienne
Top achievements
Rank 1
answered on 08 Nov 2016, 11:54 PM

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. 

0
Dimiter Madjarov
Telerik team
answered on 09 Nov 2016, 09:04 AM

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
 
Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
 
Tags
Charts
Asked by
JohnVS
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Puneel
Top achievements
Rank 1
JohnVS
Top achievements
Rank 1
Sha
Top achievements
Rank 1
Rachael
Top achievements
Rank 1
Mihai
Telerik team
Mark
Top achievements
Rank 1
Etienne
Top achievements
Rank 1
Share this question
or