Question

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

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

以下是用于导出PDF，设置图表大小之间的所有div处的纸张大小，边距和强制分页符的javascript。

是否需要在剑道图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，并裁切成一个字母大小的页面。仅产生一页。

我们正在尝试让kendo export pdf函数将所有内容放入“内容包装器”中，并将其放置在多个具有字母大小的页面上，以便可以打印出清晰的文字。

任何帮助或见识都受到赞赏！

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

1 个答案: