Export <svg> element to PDF?

[Slobodan Babic]

Hello.

I need to export a simple radar chart (generated by your EJ2 Chart component) to PDF file.

As I see it now, the only way to do it now is to traverse through svg element, parse all the elements and build a PDF file from scratch. 

Do you maybe have a feature to export svg element to PDF somewhere in your roadmap?

There is a library here (svg2pdf.js) for doing something like that, but since I am already using your Chart and PDF components I would rather not include more dependencies in my project.

Thank you.

[Dharanidharan Dharmasivam]

Hi Slobodan, 

Thanks for using Syncfusion products. 

We have analyzed your query. As of now we don’t have inbuild support for exporting chart as pdf. So, we have considered your requirement as feature request and added to our feature request list. This will be available in any of our upcoming releases. 

However we have pdf library for EJ2, through which we have exported chart to pdf as a workaround. Kindly find the code snippet to achieve this. 

TS: 

// Required modules for exporting 

import { PdfDocument, PdfPage, PdfBitmap, RectangleF } from '@syncfusion/ej2-pdf-export'; 

 

class Main { 

    public drawImage(imageString: string): void { 

        imageString = imageString.slice(imageString.indexOf(',') + 1); 

        // create a new PDF document 

        let document: PdfDocument = new PdfDocument(); 

        // add a page to the document 

        let page1: PdfPage = document.pages.add(); 

        // create a base64 string of the JPEG image 

        /* tslint:disable */ 

        // load the image from the base64 string of original image 

        let image: PdfBitmap = new PdfBitmap(imageString); 

        // draw the image 

        page1.graphics.drawImage(image, 0, 0, 300, 300); 

        /* tslint:enable */ 

 

        // save the document 

        document.save('output.pdf'); 

        // destroy the document 

        document.destroy(); 

    } 

}; 

 

 

document.getElementById('togglebtn').onclick = () => { 

    let fileName: string = (<HTMLInputElement>(document.getElementById('fileName'))).value; 

    if (mode.value == 'PDF') { 

// Draw chart as an image element 

        let element: HTMLCanvasElement = <HTMLCanvasElement>createElement('canvas', { 

            id: 'ej2-canvas', 

            attrs: { 

                'width': chart1.availableSize.width.toString(), 

                'height': chart1.availableSize.height.toString() 

            } 

        }); 

// ... 

        let url: string = window.URL.createObjectURL( 

            new Blob( 

                [(new XMLSerializer()).serializeToString(chart1.svgObject)], 

                { type: 'image/svg+xml' } 

            ) 

        ); 

        let image: HTMLImageElement = new Image(); 

        let ctx: CanvasRenderingContext2D = element.getContext('2d'); 

        image.onload = (() => { 

            ctx.drawImage(image, 0, 0); 

            window.URL.revokeObjectURL(url); 

// Converting canvas element to string 

            let imageString: string = element.toDataURL('image/jpeg').replace('image/jpeg', 'image/octet-stream'); 

            let obj: Main = new Main(); 

            obj.drawImage(imageString); 

        }); 

        image.src = url; 

    } 

}; 

Sample for reference can be find from below link. 

http://plnkr.co/edit/6fyaYr3QYaQatjvlkSKC?p=preview  

Kindly revert us, if you have any concerns. 

Thanks, 

Dharani. 

[Slobodan Babic]

Thank you for your answer.

Your workaround is not solving my problem, since it exports raster image to pdf, and I need vector PDF.

Hope that proper PDF export will be available some time soon...

Have a nice day.

[Dharanidharan Dharmasivam]

Hi Slobodan,  

 

Thanks for your revert. 

 

We have analyzed our query. We have considered your request for exporting chart as vector pdf and logged feature request for your requirement. This will be available in any of our upcoming releases. 

 

Kindly revert us, if you have any concerns 

Thanks, 

Dharani.