导出为 PDF 增加每页的项目数

Question

我有一个希望导出其内容的网格控件。初始化时，pageSize 属性设置为 10 个项目，但是我想在exportToPDF 期间增加每页的项目数。

我尝试在执行导出之前修改dataSource 的pageSize，但这似乎对最终产品没有影响。

var grid = $("#grid").data("kendoGrid");                                    
var filter = grid.dataSource.filter;
grid.dataSource.query({
    filter: filter,
    pageSize: 20, // has no effect on the exported PDF
    page: 1,
    group: [{
        field: "groupField1",
        dir: "asc"
    }, {
        field: "groupField2",
        dir: "asc"
    }, {
        field: "groupField3",
        dir: "asc"
    }]
});

var progress = $.Deferred();
grid._drawPDF(progress)
    .then(function (root) {
        return kendo.drawing.exportPDF(root, { forcePageBreak: ".page-break", multiPage: true });
    })
    .done(function (dataURI) {
        // ... do some manual manipulation of dataURI
        kendo.saveAs({
            dataURI: manipualtedDataURI
        });
progress.resolve();

我是否遗漏了什么，以便在 PDF 导出的每一页上显示更多项目？

编辑

将我的网格定义包含在以下答案建议的 pdfExport 函数中（永远不会被调用）：

var grid = $("#reportGrid").kendoGrid({                        
    pdf: {
        allPages: true,
        avoidLinks: true,
        repeatHeaders: true,            
        template: kendo.template($("#page-template").html()),
        scale: 0.7,
        margin: { top: "2.5cm", right: "1cm", bottom: "1.5cm", left: "1cm" },
        paperSize: "A4",
        landscape: true
    },
    // *this function is not getting called*
    pdfExport: function(e) {
        e.sender.dataSource.pageSize(10);
        e.promise.done(function() {
            e.sender.dataSource.pageSize(20);
        });
    },
    toolbar: kendo.template($("#template").html()),
    ...
});    

注意：模板用于在 PDF 导出的每一页上包含页眉/页脚。

另一个注意事项：“手动操作 dataURI”包括到服务器执行与另一个 PDF 文件的合并，所以我不能通过网格使用默认导出:(

编辑 2

我已经扩展了@R.K.Saini 的回答中的Dojo 示例，以使用我需要生成PDF 导出的方法（根据原始帖子）。 sn-p 记录正在导出的网格的 URI 以及何时调用 pdfExport 函数。如您所见，当使用内置网格“导出为 PDF”按钮时，pdfExport 功能会被触发，但当使用网格下方的附加按钮时，则不会。

Answer 1

您可以使用 pdfExport 事件在 pdf 导出开始之前更改网格数据源的页面大小，然后在导出完成后您只需恢复之前的页面大小。

此事件的回调函数接收作为 e.sender 的网格实例和作为 e.promise 的承诺，可用于在导出完成时设置页面大小。

更多信息请查看http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-pdfExport

    $("#grid").kendoGrid({
    dataSource: dataSource,
    pdf: {
        allPages: true
    },
    pdfExport: function(e) {
      e.sender.dataSource.pageSize(10);
      e.promise.done(function() {
          e.sender.dataSource.pageSize(20);
      });
    },
    ...
   //Other configguration
 });

这是一个工作演示http://dojo.telerik.com/UzOXO

编辑

您还可以在自定义导出函数中更改网格页面大小，只需在调用 _drawPdf() 函数之前更改网格页面大小并在完成后将其更改回来。

$("#btnPdfExport").kendoButton({
  click: function () {
      var grid = $("#grid").data("kendoGrid");                                    

      var progress = $.Deferred();
      // Change grid datasource pagesize before calling _drawPDF
      grid.dataSource.pageSize(20);
      grid._drawPDF(progress)
          .then(function (root) {
              return kendo.drawing.exportPDF(root, { forcePageBreak: ".page-break", multiPage: true });
          })
          .done(function (dataURI) {
              console.log("Exporting "  + dataURI);
              kendo.saveAs({
                  dataURI: dataURI,
                  fileName: "export.pdf"
              });
              progress.resolve();
              // Change grid datasource pagesize when done
              grid.dataSource.pageSize(10);
          });            
  }
});

在此处查看更新 DOJO http://dojo.telerik.com/UzOXO/8