在Kendo UI中添加日期到pdf導出

這是我第一次使用這個網站。今天是我進入Kendo UI的首次亮相。我的老闆買下了它，並寄予厚望！如果我是誠實的，我絕對喜歡它，但是我陷入了一個問題，我搜索了每一個可能的搜索短語，但似乎找不到解決辦法。所以我會發布這個請求並上牀睡覺，期待最好的。如果不是這個錯誤，我會在一天內完成我的第一項任務：/在Kendo UI中添加日期到pdf導出

我期待在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

感謝，雖然我已經通過該做的和不該做閱讀。我接受建設性的批評，我的加入

來源

2017-01-13 Mark Bell

好的。所以經過更多的研究。我找到了我將與大家分享的解決方案。

要定義模板中的任何自定義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>

更換模板部分

我真誠希望這可以幫助別人。

來源

2017-01-13 13:50:15

在Kendo UI中添加日期到pdf導出

回答

相關問題