Make others svg compatible with kendo pdf export

[Massimo]

Is there a way to make other svg pompatible with the pdf export?

Your charts are rendered as svg element and they are supported, but other chart doesn't:

http://dojo.telerik.com/eMUPu

[Plamen Lazarov]

Hello Massimo,

Exporting third party charts as a PDF is currently not supported. This is becauce the content of <svg> elements is not exported by default. In order to export a chart, we need a drawing api model, which the Drawing API can export. The Kendo UI Chart constructs such a model internally, while the other chart does not, and that's why it cannot be exported to PDF.

A comprehensive list of the existing PDF export limitations is provided in the following help section.

http://docs.telerik.com/kendo-ui/framework/drawing/drawing-dom#known-limitations

Regards,
Plamen Lazarov
Telerik

 

[Massimo]

In my case Highcharts has his own export:

http://jsfiddle.net/pscjzhe4/1/

Is there a way to extend kendo export with highcharts export?

[Massimo]

Ok, this is a fast workaround:

function beforePDFPrinting() {
    var cc = document.getElementsByTagName("svg");
    for (i = 0; i < cc.length; i++) {
        var svg = cc[i];
        var rect = svg.getBoundingClientRect();

        var img = document.createElement("img");
        img.src = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svg.outerHTML)));
        img.style = "position:absolute;top:" + rect.top + "px;left:" + rect.left + "px;";
        img.className = "remove-after-print";
        svg.parentNode.insertBefore(img, svg);
    }
}

function afterPDFPrinting() {
    $(".remove-after-print").remove();
}

function PDFPrint() {

    beforePDFPrinting();

    kendo.drawing.drawDOM($("#content"))
        .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 (data) {
            // Save the PDF file
            kendo.saveAs({
                dataURI: data,
                fileName: "Export.pdf"
            });

            afterPDFPrinting();
        });

}

[Sagar]

I am using the above code in my angular 15 project getting error -ERROR TypeError: Cannot set property className of [object SVGElement] which has only a getter

[Martin]

Hi, Sagar, could you please share a small example that reproduces the error so that we can further investigate the error?

[Roman]

Hi Massimo,

 

This workaround works fine for Google Chrome but on Internet Explorer 11 I am having problem with retrieving of SVG outerHTML. 
Can you please advise?

 

Thanks,

Roman

[T. Tsonev]

Hi,

The problem here is that the resulting image element will be tainted, meaning inaccessible by JavaScript.
This is a security restriction of the browser itself. Hence the failing export.

Regards,
T. Tsonev
Telerik

 

 

[Roman]

Hi,

Thanks for your reply. I have changed the code and put hard-coded SVG element and still Kendo UI does not print it.
You can see that image is being added to DOM and is valid, but exported PDF does not contain it. Any ideas?

function beforePDFPrinting() {
    var cc = document.getElementsByTagName("svg");
    for (i = 0; i < cc.length; i++) {
        var svg = cc[i];
        var rect = svg.getBoundingClientRect();

            var source = btoa(unescape(encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" height="100" width="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"/></svg>')));
            var img = document.createElement("img");
            img.src = 'data:image/svg+xml;base64,' + source;
            img.style = "position:absolute;top:" + rect.top + "px;left:" + rect.left + "px;";
            img.className = "remove-after-print";
            svg.parentNode.insertBefore(img, svg);
    }
}

 

 

[T. Tsonev]

Hi,

Where do you get the SVG data from doesn't really matter. IE will still treat is as "external" and will disallow obtaining the image data.

I'm sorry I can't be of more help.

Regards,
T. Tsonev
Telerik

 

 

[Roman]

Hello,

are there any plans on supporting SVGs created using other drawing APIs than Kendo UI?

[T. Tsonev]

Hi,

Not for the moment. This will require parsing the SVG and converting it to Drawing API primitives.
Something we don't have to do for our own components that already output shapes in the required format.

Regards,
T. Tsonev
Telerik

 

 

[Louis-Philippe]

2022 update, it seems supported now:

https://www.telerik.com/kendo-angular-ui/components/pdf-export/embedded-images/#toc-svg-image-resolution

[Luca]

Hello,

I'm also trying to export mutliple SVGs as PDF but when I call the kendo.drawing.exportPDF I have the following ReferenceExcetpion:

OperationCaller is not defined

I'm currently using a 2019 version of Kendo in AngularJS with jQuery 3.5.1

Do you know if the export is supported for that version?

[Martin]

Could you please share a Dojo example so that we can debug the exception? Also, jQuery 3.5.1 is not compatible with any 2019 Kendo version. Please check our jQuery support article.

[Luca]

Hello, I'm trying to copy the example on the Dojo, but I'm having some issues...

https://dojo.telerik.com/AfIlAYOq

jQuery: 3.5.1

AngularJS: 1.8.2

Kendo: 2019.3.1023

 

[Martin]

I can see that is the code from a  previous post in this thread. While I was not able to observe the error you are experiencing in this dojo example, that is a customer's approach to convert an svg content to img so I cannot say what might be causing the problem in this custom logic. What I can offer is to try to load an svg directly into an img tag like below:

<img src="images/MySVGImage.svg" width="500" height="500" alt="SVG" />