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

How to format for print and export group of graphs

6 Answers 210 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Lee
Top achievements
Rank 1
Iron
Iron
Iron
Lee asked on 04 Dec 2019, 04:50 PM

I am trying to export a group of charts to a pdf. The chart grouping is similar to the ones here: https://demos.telerik.com/kendo-ui/pdf-export/index

I would like to reformat them so that they fit nicely on a letter size piece of paper. I looked at the example here: https://demos.telerik.com/kendo-ui/pdf-export/page-layout.

My issue is that in this example, the web page is already formatted like the printed page. In my case I want to take example 1 (pdf-export/index) and format it like example 2 (pdf-export/page-layout).

I tried using the .k-pdf-export class to do this but my charts ended up sized incorrectly with pieces cut off. 

What is the best way to accomplish my goal?

6 Answers, 1 is accepted

Sort by
0
Petar
Telerik team
answered on 06 Dec 2019, 02:11 PM

Hi Lee,

The functionality you are trying to achieve is demonstrated in this Dojo example. The export is not fine-tuned(the output file is not well-formatted) but demonstrates how we can add header and footer to an exported to PDF HTML content. 

The key thing here is the definition of the template that will be used for the exported document and the CSS code that formats this template. 

Check the linked Dojo project and let me know if you have any questions. 

You may also find useful the below links:

I hope the above will help you implement the functionality you want to achieve. 

Regards,
Petar
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Lee
Top achievements
Rank 1
Iron
Iron
Iron
answered on 06 Dec 2019, 03:41 PM
It looks like this dojo avoids the issue by not resizing the charts from the way they appear on the screen. I wanted mine sized differently so they fit nicely side by side on the page and fill the vertical height. 
0
Petar
Telerik team
answered on 10 Dec 2019, 03:08 PM

Hi Lee,

I am not sure that the PDF export supports Chart's resizing in a way they fit on the page of the exported document. Let me try to implement the desired functionality and I will write you back in the next 48 hours with feedback about this case. 

Regards,
Petar
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Lee
Top achievements
Rank 1
Iron
Iron
Iron
answered on 10 Dec 2019, 03:27 PM
Great. Thanks.
0
Accepted
Petar
Telerik team
answered on 12 Dec 2019, 10:53 AM

Hi Lee,

Please check this Dojo example. It demonstrates the desired functionality of exporting the charts from the previously discussed Dojo project in separate pages in the exported file. 

To be able to achieve the desired functionality, we have to programmatically resize the Charts before the export of the document and scale them back once the PDF is exported. 

The scaling is done once on "PDF export" button click and then the resize to the original dimensions can be done using two approaches:

Approach 1: Using setTimeout function

                   kendo.drawing.pdf.saveAs(group, "Invoice.pdf");
                  	setTimeout(function(){                   	                        						                                             		$("#referrals").css({"width":"20%","height":"240px"}).data("kendoChart").resize();
                        $("#applications").css({"width":"20%","height":"240px"}).data("kendoChart").resize();
                        $("#users").css({"width":"50%","height":"240px"}).data("kendoChart").resize();  
                    }, 800)
                })

Approach 2: Using a callback function of the proxyUrl of the kendo.drawing.pdf.saveAs function.

          kendo.drawing.pdf.saveAs(group, "Invoice.pdf", "/someurl",function(){
                        $("#referrals").css({"width":"20%","height":"240px"}).data("kendoChart").resize();
                        $("#applications").css({"width":"20%","height":"240px"}).data("kendoChart").resize();
                        $("#users").css({"width":"50%","height":"240px"}).data("kendoChart").resize();           
        	});

Regards,
Petar
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Lee
Top achievements
Rank 1
Iron
Iron
Iron
answered on 12 Dec 2019, 02:12 PM
Thank you, Petar. This should do the trick. 
Tags
General Discussions
Asked by
Lee
Top achievements
Rank 1
Iron
Iron
Iron
Answers by
Petar
Telerik team
Lee
Top achievements
Rank 1
Iron
Iron
Iron
Share this question
or