未捕獲的TypeError：$（...）。data（...）。sqaveAsPDF不是函數。 劍道網格

Question

我想在kendo網格中將數據導出為pdf。

網格：

    $("#tax_lists").kendoGrid({
        toolbar: ["excel","pdf"],
        excel: {
            allPages: true,
            fileName: "Products.xlsx"
        },
        pdf: {
            allPages: true,
            avoidLinks: true,
            paperSize: "A4",
            margin: { top: "2cm", left: "1cm", right: "1cm", bottom: "1cm" },
            landscape: true,
            repeatHeaders: true,
            template: $("#page-template").html(),
            scale: 0.8
        },
        dataSource: sData,
        sortable: true,
        resizable: true,
          columns: [
          {hidden: true, field: "TaxStatementID",attributes:{"class":"tax_statement_id"}},
          {field: "Month", title: "Month"},
          {field: "AnnualSalary", title: "Annual Salary",attributes:{"class":"AnnualSalary"},footerTemplate: "<div><b>Sum</b> #= compute('.AnnualSalary')#</div>"},
          {field: "MonthlySalary", title: "Monthly Salary",attributes:{"class":"MonthlySalary"},footerTemplate: "<div><b>Sum</b> #= compute('.MonthlySalary')#</div>"},
          {field: "SlabNo", title: "Tax Slab"},
          {field: "MonthlyTax", title: "Monthly Tax", attributes:{"class":"monthly-tax"},footerTemplate: "<div><b>Sum</b> #= compute('.monthly-tax')#</div>"},
          {field: "TaxAdjustment", title: "Tax Adjustment",template:"#=TaxAdjustment#"},
          {field: "TaxAreas", title: "Tax Arrears"},
          {title: "Tax Payable",template:"#=adjustment_type==1?parseFloat(MonthlyTax)+parseFloat(TaxAdjustment)+parseFloat(TaxAreas):(parseFloat(MonthlyTax)+parseFloat(TaxAreas))-parseFloat(TaxAdjustment)#", attributes:{"class":"TaxPayable"},footerTemplate: "<div><b>Sum</b> #= compute('.TaxPayable')#</div>"},
          {hidden: true, field: "employee_id",attributes:{"class":"employee_id"}},
          {hidden: true, field: "employment_id",attributes:{"class":"employment_id"}},
          ],
      });

首先我嘗試kendo工具欄pdf，但它不起作用，它重新刷新頁面而不是導出到pdf。 然后我將按鈕放在網格的頂部。

<button id="grid-pdf">Export to PDF</button>

並定義一個函數

功能：

$("#grid-pdf").kendoButton(
    {
        click:function(){
        var grid = $("#tax_lists").data("kendoGrid").saveAsPDF();
        }
    });

用於手動計算總和的計算函數

    function compute(){
    $(cls).each(function() {
        if (cls==".AnnualSalary") {
            AnnualSalary += parseInt($(this).text());
        }else if(cls==".MonthlySalary"){
            MonthlySalary += parseInt($(this).text());
        }else if(cls==".monthly-tax"){
            monthlyTax += parseInt($(this).text());
        }else{
            TaxPayable +=parseInt($(this).text());
        }
    });
    if (cls==".AnnualSalary") {
        return AnnualSalary;
    }else if(cls==".MonthlySalary"){
        return MonthlySalary;
    }else if(cls=".monthly-tax"){
        return monthlyTax;
    }else{
        return TaxPayable;
    }
}

再次失敗它說：

未捕獲的TypeError：$（...）。data（...）。saveAsPDF不是函數*

我使用的資源：

<script type="text/javascript" src="<?=base_url('assets/plugins/kendo/jszip.min.js')?>"></script>
<script type="text/javascript" src="<?=base_url('assets/plugins/kendo/kendo.all.min.js')?>"></script>
<script type="text/javascript" src="<?=base_url('assets/plugins/kendo/pako_deflate.min.js')?>"></script>

知道這里出了什么問題......

Answer 1

如果你提供一個顯示問題的工作jsfiddle會更好。

無論如何，我使用你的代碼創建了一個jsfiddle與一些任意數據。 你可以在這里找到它。 一旦提供了更多詳細信息，我就可以根據需要調整代碼。

這是您修改的代碼：

 $("#tax_lists").kendoGrid({
     toolbar: ["excel", "pdf"],
  excel: {
    allPages: true,
    fileName: "Products.xlsx"
  },
  pdf: {
    allPages: true,
    avoidLinks: true,
    paperSize: "A4",
    margin: {
      top: "2cm",
      left: "1cm",
      right: "1cm",
      bottom: "1cm"
    },
    landscape: true,
    repeatHeaders: true,
    template: $("#page-template").html(),
    scale: 0.8
  },
  dataSource: {
    data: [{
      "Month": 1,
      "AnnualSalary": 9.2,
      "MonthlySalary": 1994,
      "MonthlyTax": "The Shawshank Redemption"
    }]
  },
  sortable: true,
  resizable: true,
  columns: [{
    hidden: true,
    field: "TaxStatementID",
    attributes: {
      "class": "tax_statement_id"
    }
  }, {
    field: "Month",
    title: "Month"
  }, {
    field: "AnnualSalary",
    title: "Annual Salary",
    attributes: {
      "class": "AnnualSalary"
    }
  }, {
    field: "MonthlySalary",
    title: "Monthly Salary",
    attributes: {
      "class": "MonthlySalary"
    }
  }, {
    field: "SlabNo",
    title: "Tax Slab"
  }, {
    field: "MonthlyTax",
    title: "Monthly Tax",
    attributes: {
      "class": "monthly-tax"
    }
  }],
});