How to create dynamic page break in ionic pdfmake

Question

I am using pdf make plugin in ionicframework to create pdf and download it works fine but when I add more contents which are of dynamic the page doesn't get breaks automatically can anyone tell me how to make page break automatically using pdf make.I have tried using

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

But it doesn't break the page.

Code:

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'
    }
  };

Answer 1

It looks like the empty columns are the problem. The problem is more frequent and causes problems in the measurement.

Example: You have given a particular column as empty like this

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

But you have to give like this:

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

Try to change all the columns where you have given empty strings and check for more info check the link: Pdfmake autopage break issues