Exporting a page with many Kendo charts to letter-size PDF

Question

I am trying to export a webpage with HTML/CSS and about 19 charts to a multi-page letter size PDF.

So far it can export the entire webpage on 1 continuous page, however, if printing, it will be zoomed-out to fit 1 page only.

Below is the javascript for exporting the PDF, setting paper size, margins, and force page breaks at all the divs that are placed between the chart areas.

Does something need to be declared in the kendo chart JS itself?

$("#export-pdf").click(function () {
    // Convert the DOM element to a drawing using kendo.drawing.drawDOM
    kendo.drawing.drawDOM($(".content-wrapper"))
        .then(function (group) {
             // Render the result as a PDF file
             return kendo.drawing.exportPDF(group, {
                 paperSize: "a4",
                 margin: "2cm",
                 // Page Break divs between each partial with a kendo chart
                 forcePageBreak: ".page-break"
             });
        })
        .done(function (data) {
            // Save the PDF file
            kendo.saveAs({
                dataURI: data,
                fileName: "exportPDF")).pdf",
            });
        });

With the JS above, it shows something really weird:

1/4 of the top of the webpage zoomed-in and cropped to a letter size page. Only 1 page is produced.

We are trying to get kendo export pdf function to take everything in the "content-wrapper" and put it on multiple letter-size pages so it can be printed out and legible.

Any help or insight is appreciated!!

Vanessa Walden Culver Vanessa Walden Culver · Accepted Answer · 2019-05-23T19:31:52

I had the "pageSize" "margin" and "forcePageBreak" in the wrong section - it needed to be in the drawDom event in order to work.

Corrected code:

$("#export-pdf").click(function () {
    // Convert the DOM element to a drawing using kendo.drawing.drawDOM
    kendo.drawing.drawDOM(".content-wrapper", {
                 paperSize: "a4",
                 margin: "2cm",
                 // Page Break divs between each partial with a kendo chart
                 forcePageBreak: ".page-break"
    })
        .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: "exportPDF")).pdf",
            });
        });

Exporting a page with many Kendo charts to letter-size PDF

1 Answers