How to export to PDF in Angular

[Jhony]

Hello,

How can i do to export to PDF in angular 4 ?

I didn't find the documentation.

 

Thank you!

[Dimiter Topalov]

Hello Jhony,

Please check out the following sections of our documentation for a detailed explanation and demos on exporting drawings to PDF and creating drawings out of HTML elements by utilizing the Kendo UI Drawing package:

http://www.telerik.com/kendo-angular-ui/components/drawing/pdf-output/

http://www.telerik.com/kendo-angular-ui/components/drawing/drawing-dom/

PDF export is also a built-in functionality of the Kendo UI Grid and Charts. Further information is available in the following sections:

http://www.telerik.com/kendo-angular-ui/components/grid/pdf-export/

http://www.telerik.com/kendo-angular-ui/components/charts/chart/export-options/#toc-exporting-to-pdf

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Jyo]

How can i use kendo to export highcharts into pdf?

I want to use highcharts to make chart and then wanna convert into pdf.. is there any way to use kendo UI for this without using chart component of kendo ???

kindly response.

[Dimiter Topalov]

Hi Jyo,

Exporting SVG elements to PDF is not supported. This is a documented limitation of the PDF export functionality:

https://www.telerik.com/kendo-angular-ui/components/drawing/limitations-browser-support/#toc-elements-and-styles

I see that the question is whether it is possible to export a third-party chart using the Kendo UI PDF export, but such functionality is not available due to the limitation, described above. Thus, the most straight-forward approach to export a chart to PDF will be using the Kendo UI for Angular Charts that provide PDF export as a built-in feature:

https://www.telerik.com/kendo-angular-ui/components/charts/

https://www.telerik.com/kendo-angular-ui/components/charts/chart/export-options/#toc-exporting-to-pdf

As for exporting a custom or third-party chart to PDF, there are a couple of possible approaches for a custom implementation that might yield the desired result:

- Use the Drawing library primitives to draw what needs to be exported (this is what the Kendo UI for Angular Charts do internally):

https://www.telerik.com/kendo-angular-ui/components/drawing/

To export the custom chart, it needs a custom exportVisual or similar method defined that returns a Group with everything to be drawn inside. In other words all chart elements need to be drawn with the Drawing API so that the result can be successfully exported.

- Alternatively the SVG Chart can be somehow (via a third-party library or custom logic) be converted to Canvas, and the canvas then can be exported to PDF.

We do not recommend any third-party library explicitly, but the following one seems to be providing the desired functionality:

https://github.com/canvg/canvg

Alternatively, the developer can utilize the Chrome and FireFox capabilities regarding drawing canvas based on SVG image (not supported in Edge and IE):

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage#Browser_compatibility

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik