如何在离子pdfmake中创建动态分页符

时间:2017-09-07 13:47:13

标签: angularjs ionic-framework ionic2 ionic3 pdfmake

我在ionicframework中使用pdf make plugin创建pdf并下载它工作正常但是当我添加更多动态内容时,页面不会自动中断,任何人都可以告诉我如何自动使用分页符pdf make.I尝试过使用

pageBreakBefore: function (currentNode, followingNodesOnPage) {
      return currentNode.headlineLevel === 1 && followingNodesOnPage.length === 0;
    },

但它并没有破坏页面。

代码:

var dd = {
    pageSize: 'A4',
    pageOrientation: 'portrait',
    content: [
      { text: $translate.instant('{{"billnumber_message" | translate}}') + invoice.billno, alignment: 'left', style: 'subheader'},
       { text: $translate.instant('{{"billdate_message" | translate}}') + currentbilldate, alignment: 'right', style: 'subheader'},

      { text: $translate.instant('{{"billto_message" | translate}}') + invoice.name + ',\n' + invoice.location + ',\n' + invoice.mobileno + '\n', style: 'subheader' },
      {
        style: 'itemsTable',
        table: {
          widths: ['*', '*', '*', '*'],
          body: [
            [
                { text: $translate.instant('{{"billDescription_message" | translate}}'), style: 'itemsTableHeader' },
                { text: $translate.instant('{{"billquantity_message" | translate}}'), style: 'itemsTableHeader' },
                { text: $translate.instant('{{"billrate_message" | translate}}'), style: 'itemsTableHeader' },
                { text: $translate.instant('{{"billtotal_message" | translate}}'), style: 'itemsTableHeader' },
            ]
          ].concat(items)
        }
      },
      {
        style: 'totalsTable',
        table: {
          widths: [75, '*', 75],
          body: [
            [
              '',
              $translate.instant('{{"billtotalamount_message" | translate}}'),
              invoice.Subtotal,
            ],
            [
              '',
              $translate.instant('{{"billothercharges_message" | translate}}'),
              invoice.OtherCharges,
            ],
            [
              '',
              $translate.instant('{{"billdebitcapture_message" | translate}}'),
              invoice.debitcapure,
            ],
            [
              '',
              '',
              '',
            ],
            [
              '',
              '',
              '',
            ]
          ]
        },
        layout: 'noBorders'
      },
      {
        style: 'subheaderbalance',
        table: {
          widths: [75, '*', 75],
          body: [
            [
              '',
              $translate.instant('{{"billamountgiven_message" | translate}}'),
              invoice.Total,
            ]
          ]
        },
        layout: 'noBorders'
      },
      { text: '', alignment: 'right'},
      { text: '', alignment: 'right'},
      { text: '', alignment: 'right'},
      { text: $translate.instant('{{"billhistory_message" | translate}}') + invoice.Previousbill, alignment: 'center' },
      { text: '', alignment: 'right'},
      { text: '', alignment: 'right'},
      { text: '', alignment: 'right'},
      /*{ text: $translate.instant('{{"billpreviousdebit_message" | translate}}') + invoice.PreviousDebitCapture, alignment: 'right' },*/
      {
        style: 'itemsTable',
        table: {
          widths: [75, '*', 75],
          body: [
            [
              { text: $translate.instant('{{"billdate_message" | translate}}'), style: 'itemsTableHeader' },
              { text: $translate.instant('{{"description_message" | translate}}'), style: 'itemsTableHeader' },
              { text: $translate.instant('{{"amount_message" | translate}}'), style: 'itemsTableHeader' },
            ]
          ].concat(previousbillitems)
        },
      },
      {
        style: 'totalsTable',
        table: {
          widths: [75, '*', 75],
          body: [
            [
              '',
              $translate.instant('{{"billpreviousdebit_message" | translate}}'),
              invoice.PreviousDebitCapture,
            ],
            [
              '',
              $translate.instant('{{"billtotaldebit_message" | translate}}'),
              totaldebit,
            ],
            [
              '',
              $translate.instant('{{"billtotaldebitcapture_message" | translate}}'),
              invoice.debitcapure,
            ]
          ]
        },
        layout: 'noBorders'
      },
      {
        style: 'subheaderbalance',
        table: {
          widths: [75, '*', 75],
          body: [
            [
              ':',
              $translate.instant('{{"billledgerbalance" | translate}}'),
              (totaldebit - invoice.debitcapure),
            ]
          ]
        },
        layout: 'noBorders'
      },
      //{ text: $translate.instant('{{"billtotaldebit_message" | translate}}') + totaldebit , alignment: 'right' },
      //{ text: $translate.instant('{{"billtotaldebitcapture_message" | translate}}') + invoice.debitcapure, alignment: 'right'},
      //{ text: '', alignment: 'left'},
      //{ text: $translate.instant('{{"billledgerbalance" | translate}}') + (totaldebit - invoice.debitcapure), alignment: 'right', style: 'subheader'},
      // add signature
      { text: '', alignment: 'right'},
      { text: '', alignment: 'right'},
      { text: '', alignment: 'right'},
      { text: '', alignment: 'right'},
      { text: '', alignment: 'right'},
      { text: '', alignment: 'right'},
      { text: $translate.instant('{{"billsignature_message" | translate}}'), alignment: 'right', style: 'subheader'},
      { text: '', alignment: 'right'},
    ],
    pageBreakBefore: function (currentNode, followingNodesOnPage) {
      return currentNode.headlineLevel === 1 && followingNodesOnPage.length === 0;
    },
    styles: {
      subheader: {
        fontSize: 16,
        bold: true,
        margin: [0, 20, 0, 5]
      },
      subheaderbalance: {
        fontSize: 16,
        bold: true,
        alignment: 'right',
        margin: [0, 20, 0, 5]
      },
      itemsTable: {
        alignment: 'center',
        margin: [0, 5, 0, 15]
      },
      itemsTableHeader: {
        bold: true,
        fontSize: 13,
        color: 'black',
        alignment: 'center'
      },
      itemsTableAmount: {
        bold: true,
        fontSize: 13,
        color: 'black',
        alignment: 'right'
      },
      totalsTable: {
        bold: true,
        alignment: 'right',
        margin: [0, 30, 0, 0]
      },
    },
    defaultStyle: {
      //font: 'TSCu_SaiIndira'
    }
  };

1 个答案:

答案 0 :(得分:0)

看起来空列是问题所在。 问题更加频繁,导致测量出现问题。

实施例:  您已将特定列设为空,如此

       [
          '',
          $translate.instant('{{"billtotaldebit_message" | translate}}'),
          totaldebit,
        ],

但你必须这样给:

[
          ' ',
          $translate.instant('{{"billtotaldebit_message" | translate}}'),
          totaldebit,
        ],

尝试更改已提供空字符串的所有列,并检查更多信息,请检查链接:Pdfmake autopage break issues