Problems with exporting page with charts

2 posts, 0 answers
  1. Daniel Plomp
    Daniel Plomp avatar
    130 posts
    Member since:
    Feb 2004

    Posted 21 Sep 2015 Link to this post

    Hi,

    I've constructed a page which containers some paragraph blocks and charts. I have a button that will export the DOM to an A4 PDF. I have some influence on the paragraphs, but the charts are not being scaled to the A4 format.

    The page is based on Bootstrap, so I use rows and columns.

    kendo.drawing.drawDOM($(".page-container"),
            {
                paperSize: "A4",
                margin: { left: "20mm", top: "20mm", right: "20mm", bottom: "20mm" }
            })
            .then(function (group) {
                // Render the result as a PDF file
                return kendo.drawing.exportPDF(group);
            })
            .done(function (data) {
                // Save the PDF file
                kendo.saveAs({
                    dataURI: data,
                    fileName: "Proposal.pdf",
                    forceProxy: true,
                    proxyURL: '@Url.Action("Download")'
                });
            });

    Questions

    • Is Bootstrap not supported at all?
    • Can I have influence on the size of the charts like I can with e.g. <p> tags by adding the .k-pdf-export class?
    • Can I have influence on where I put page breaks?

    Thanks in advance,
    Daniel

     

  2. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 24 Sep 2015 Link to this post

    Hello,

    Please accept my apologies for the delayed response.

    The PDF export module will take input from the computed styles. The choice of CSS framework, if any, is irrelevant as long as it produces the required layout.
    The Chart, and a good proportion of the Kendo UI widgets, will not resize automatically when the container size is changed.
    They require an explicit layout update to respond to the new dimensions. For example (pseudo-code):
    var container = $(".page-container").addClass("print");
    kendo.resize(container);
    kendo.drawing.drawDOM(container, ...)
    .always(function() {
        $(container).removeClass("print");
    });

    Page breaks can be specified manually, with some restrictions.

    I hope this helps.

    Regards,
    T. Tsonev
    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
Back to Top