通过PDF和其他模板导出KendoGrid

Question

我有一个剑道的工作PDF出口。现在，我想向每个导出的页面添加一个标题(例如，客户名称和编号)。我试着像提供的演示这里那样做，但没有看到文本或分页器。但是，它确实为文档添加了页边距。

模板：

<script id="page-template-pdf" type="x/kendo-template">
<div class="page-template-pdf">
    <div class="header-pdf">
        Customer: {{cust.id}}
    </div>
    <div class="footer-pdf">
        <div style="float: right">Page #: pageNum # of #: totalPages #</div>
    </div>
</div>
</script>

CSS:

<style>
.page-template-pdf {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

    .page-template-pdf .header-pdf {
        position: absolute;
        top: 30px;
        left: 30px;
        right: 30px;
        border-bottom: 1px solid #888;
        text-align: center;
        font-size: 18px;
        color: orangered;
    }

    .page-template-pdf .footer-pdf {
        position: absolute;
        bottom: 30px;
        left: 30px;
        right: 30px;
    }
</style>

我的控制器内的网格定义：

...            
toolbar: [
                { name: "pdf", text: "PDF Export" },
                { name: "excel", text: "Excel Export" },
                { template: kendo.template($("#laGridFilterTemplate").html()) }
            ],
            pdf: {
                allPages: true,
                landscape: true,
                paperSize: ["1573pt", "672pt"],
                margin: { top: "3cm", right: "0cm", bottom: "1cm", left: "0cm" },
                template: kendo.template($("#page-template-pdf").html())
            }, ...

Answer 1

我希望你能从5个月前就找到一个解决方案，但是我今天大部分时间都在努力解决这个问题，而我的解决办法是增加一个标准的纸张大小。

网格PDF定义

pdf: {
        allPages: true,
        avoidLinks: true,
        repeatHeaders: true,
        template: kendo.template($("#page-template").html()),
        scale: 0.8,
        margin: { top: "3cm", right: "1cm", bottom: "1cm", left: "1cm" },
        paperSize: "A4",
        landscape: true
    }

希望能帮助其他人，谁一直在寻找肯多的指导。

Answer 2

我找到了一个办法。但是，只有当要传递给模板的内容是页面URL的一部分时，它才能起作用。对我来说，在最后一个"/“之后的url中的最后一个元素是我在pdf导出头中想要的。我是为kendo模板中的header div这样做的，它对我起了作用：

<div class="header">
    # var ar = window.location.href.split('/'); #
    #: ar[ar.length - 1] #
</div>