在Kendo UI中将日期添加到pdf导出

Question

这是我第一次使用这个网站。今天是我在Kendo UI中的首次亮相。我的老板买下了它，并对我寄予厚望！我绝对喜欢它，如果我诚实，但我被困在一个问题上，我已经谷歌了每一个可能的搜索短语，但似乎找不到解决办法。所以我要发布这个请求，然后上床睡觉，希望是最好的结果。要不是这点小事，我会在一天内完成我的第一项任务:/

我希望将日期添加到Kendo UI中的PDF导出。

这是我的代码。

$("#grid").kendoGrid({
                    toolbar: ["excel", "pdf"],
                    excel: {
                        fileName: "FlexibleSalesReport-"+ fileNameDate + ".xlsx",
                        proxyURL: "//demos.telerik.com/kendo-ui/service/export",
                        filterable: true
                    },
                    pdf: {
                        allPages: true,
                        avoidLinks: true,
                        paperSize: "A4",
                        margin: { top: "2cm", left: "0.5cm", right: "0.5cm", bottom: "1cm" },
                        landscape: true,
                        repeatHeaders: true,
                        template: $("#page-template").html(),
                        scale: 0.6,
                        date: new Date(),
                        title: 'My Title',
                        subject: 'My subject'

                    },
                    dataSource: {
                        //type: "odata",
                        // transport: {
                        //     read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
                        // },

                        data: products,
                        schema: {
                            model: {
                                fields: {

                                    Name: { type: "string" },
                                    WebName: { type: "string" },
                                    Code: { type: "string" },
                                    Icing: { type: "string" },
                                    Filling: { type: "string" },
                                    AssociatedOrderingPage: { type: "string" },
                                    Sold: { type: "number" },
                                    TotalValue: { type: "string "}


                                }
                            }
                        },
                        pageSize: 10,
                        serverPaging: false,
                        serverFiltering: false,
                    },
                    height: 980,
                    filterable: {
                        mode: "row"
                    },
                    pageable: true,
                    sortable: true,
                    columns: 
                    ['Data removed for brevity']
                });

我已经添加了日期选项，我不确定在模板中从哪里拉出该选项。下面是我的模板代码。因为它在脚本标记中，所以我不能调用函数或将数据注入span标记来将日期添加到pdf标题的末尾。

<script type="x/kendo-template" id="page-template">

            <div class="page-template">
                <div class="header">
                <div style="float: right">Page #: pageNum # of #: totalPages #</div>
                ########### Sales Report - <span id="thisOne"></span><!-- I'd like to inject into this span, even this comment isn't commented out in my IDE {VS Code}

                </div>
                <div class="watermark">#####</div>
                <div class="footer">
                Page #: pageNum # of #: totalPages #
                </div>
            </div>
            </script>

The intended result

提前感谢，尽管我已经读过了该做什么和不该做什么。我愿意接受对我的补充的建设性批评

Answer 1

好吧。所以经过更多的研究。我找到了解决方案，我将与你们分享。

要在模板中定义任何自定义Javascript，必须将其添加到散列标签之间(对某些人来说是井号)。例如：

# var foo = "bar"; #

然后，要将变量打印到报表，请使用以下语法：

#= foo #

我的问题的解决方案是将模板部分替换为

<script type="x/kendo-template" id="page-template">
            #
                var theDate = new Date();

            #
            <div class="page-template">
                <div class="header">
                <div style="float: right">Page #: pageNum # of #: totalPages #</div>
                [Obfuscated for client privacy] Flexible Sales Report - <span>#=theDate#</span> 

                </div>
                <div class="watermark">[Obfuscated for client privacy]</div>
                <div class="footer">
                Page #: pageNum # of #: totalPages #: 


                </div>
            </div>
            </script>

我真心希望这对某些人有帮助。