KendoUI - 绘制DOM和网格,然后一起保存为PDF

时间:2016-05-25 13:13:21

标签: javascript html pdf kendo-ui kendo-grid

如何使用KendoUI将DOM和Grid绘制成一个PDF?

例如:我有我的网格的摘要标题,它的独立DOM元素(.report-header)和Kendo.Grid(.report-table)。我想把它们画成一个PDF文件。现在我有这个:

<div id="report">
  <div class="report-header"></div>
  <div class="report-table"></div>
</div>

kendo.drawing.drawDOM("#report", {
            allPages: true,
            avoidLinks: true,
            paperSize: "A4",
            margin: { top: "1cm", left: "1cm", right: "1cm", bottom: "1cm" },
            landscape: true,
            repeatHeaders: true,
            template: $("#page-template").html(),
            scale: 0.5,
            title: 'Raport dzienny'
        }).then(function(group){
            kendo.drawing.pdf.saveAs(group, 'file.pdf');
        });

它正在工作,但桌子并未全部完成。如何解决?

1 个答案:

答案 0 :(得分:-1)

我看不到$("#page-template").html()。它需要创建。

这样的事情:

<script type="x/kendo-template" id="page-template">
    <div class="page-template">
        <div class="header">
            <div style="float: right">Page #: pageNum # of #: totalPages #</div>
            Multi-page grid with automatic page breaking
        </div>
        <div class="watermark">KENDO UI</div>
        <div class="footer">Page #: pageNum # of #: totalPages #</div>
    </div>
</script>