在 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>

预期结果

提前致谢，尽管我已经通读了注意事项。我愿意接受对我的补充的建设性批评

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>

我真诚地希望这对某人有帮助。