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

Make others svg compatible with kendo pdf export

11 Answers 537 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Massimo
Top achievements
Rank 1
Massimo asked on 28 Sep 2015, 08:01 AM

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

11 Answers, 1 is accepted

Sort by
0
Plamen Lazarov
Telerik team
answered on 30 Sep 2015, 09:05 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Massimo
Top achievements
Rank 1
answered on 01 Oct 2015, 07:50 AM

In my case Highcharts has his own export:

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

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

0
Massimo
Top achievements
Rank 1
answered on 02 Oct 2015, 09:48 AM
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();
        });
         
}
0
Roman
Top achievements
Rank 1
answered on 07 Apr 2016, 02:39 PM

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

0
T. Tsonev
Telerik team
answered on 11 Apr 2016, 11:53 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Roman
Top achievements
Rank 1
answered on 11 Apr 2016, 12:00 PM

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);
    }
}

 

 

0
T. Tsonev
Telerik team
answered on 13 Apr 2016, 11:54 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Roman
Top achievements
Rank 1
answered on 10 May 2016, 11:23 AM

Hello,

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

0
T. Tsonev
Telerik team
answered on 12 May 2016, 07:08 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Louis-Philippe
Top achievements
Rank 1
Iron
answered on 23 Jan 2022, 08:11 PM

2022 update, it seems supported now:

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

0
Luca
Top achievements
Rank 1
Iron
answered on 16 Feb 2022, 07:48 PM

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
Telerik team
commented on 18 Feb 2022, 10:11 AM

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
Top achievements
Rank 1
Iron
commented on 18 Feb 2022, 04:12 PM

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
Telerik team
commented on 22 Feb 2022, 10:17 AM

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" />

Tags
General Discussions
Asked by
Massimo
Top achievements
Rank 1
Answers by
Plamen Lazarov
Telerik team
Massimo
Top achievements
Rank 1
Roman
Top achievements
Rank 1
T. Tsonev
Telerik team
Roman
Top achievements
Rank 1
Louis-Philippe
Top achievements
Rank 1
Iron
Luca
Top achievements
Rank 1
Iron
Share this question
or