How to format for print and export group of graphs

[Lee]

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?

[Petar]

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:

• https://docs.telerik.com/kendo-ui/knowledge-base/spreadsheet-save-with-additional-content-to-single-pdf
• https://docs.telerik.com/kendo-ui/knowledge-base/page-break-by-group-grid-pdf-export

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

Regards,
Petar
Progress Telerik

[Lee]

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. 

[Petar]

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

[Lee]

Great. Thanks.

[Petar]

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

[Lee]

Thank you, Petar. This should do the trick.