Make others svg compatible with kendo pdf export

10 posts, 0 answers
  1. Massimo
    Massimo avatar
    21 posts
    Member since:
    Apr 2013

    Posted 28 Sep 2015 Link to this post

    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

  2. Plamen Lazarov
    Admin
    Plamen Lazarov avatar
    135 posts

    Posted 30 Sep 2015 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Massimo
    Massimo avatar
    21 posts
    Member since:
    Apr 2013

    Posted 01 Oct 2015 Link to this post

    In my case Highcharts has his own export:

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

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

  5. Massimo
    Massimo avatar
    21 posts
    Member since:
    Apr 2013

    Posted 02 Oct 2015 Link to this post

    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();
            });
             
    }
  6. Roman
    Roman avatar
    2 posts
    Member since:
    Sep 2013

    Posted 07 Apr in reply to Massimo Link to this post

    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

  7. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 11 Apr Link to this post

    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!
     
  8. Roman
    Roman avatar
    2 posts
    Member since:
    Sep 2013

    Posted 11 Apr in reply to T. Tsonev Link to this post

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

     

     

  9. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 13 Apr Link to this post

    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!
     
  10. Roman
    Roman avatar
    1 posts
    Member since:
    Apr 2013

    Posted 10 May in reply to Plamen Lazarov Link to this post

    Hello,

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

  11. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 12 May Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready