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

Problems with exporting page with charts

1 Answer 74 Views
Drawing API
This is a migrated thread and some comments may be shown as answers.
Daniel Plomp
Top achievements
Rank 2
Daniel Plomp asked on 21 Sep 2015, 04:08 PM

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

 

1 Answer, 1 is accepted

Sort by
0
T. Tsonev
Telerik team
answered on 24 Sep 2015, 07:02 AM
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!
 
Tags
Drawing API
Asked by
Daniel Plomp
Top achievements
Rank 2
Answers by
T. Tsonev
Telerik team
Share this question
or