将包含许多 Kendo 个图表的页面导出为信纸大小的 PDF

Question

我正在尝试将包含 HTML/CSS 和大约 19 个图表的网页导出为多页字母大小的 PDF。

到目前为止，它可以将整个网页导出到 1 个连续的页面上，但是，如果打印，它将缩小到仅适合 1 页。

下面是 javascript 用于导出 PDF、设置纸张大小、页边距以及在图表区域之间放置的所有 div 强制分页符。

是否需要在 kendo 图表 JS 本身中声明某些内容？

$("#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",
            });
        });

对于上面的 JS，它显示了一些非常奇怪的东西：

网页顶部的 1/4 被放大并裁剪为信纸大小的页面。仅生成 1 页。

我们正在尝试获得 kendo 导出 pdf 功能，以获取 "content-wrapper" 中的所有内容并将其放在多个字母大小的页面上，以便打印出来并清晰可见。

感谢任何帮助或见解！

Answer 1

我的 "pageSize" "margin" 和 "forcePageBreak" 在错误的部分 - 它需要在 drawDom 事件中才能工作。

更正后的代码：

$("#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",
            });
        });

将包含许多 Kendo 个图表的页面导出为信纸大小的 PDF

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

kendo-ui

kendo-asp.net-mvc