Окно печати печатает только первую страницу. При предварительном просмотре печати в jQuery Datatables на угловом изображении прокрутки не видно

Question

Я использую Jquery Datatable под углом 7, чтобы открыть содержимое таблицы в окне предварительного просмотра, как показано в примере Datatable . Я могу получить данные, но когда я нажимаю кнопку «Печать», чтобы открыть экран предварительного просмотра, он открывается, но отображается только первая страница, так как моя таблица содержит более 50 строк. Внешний свиток не виден, как в примере Datatable .

 <table id="tblDetails" class="stripe  responsive no-wrap" style="width:100%">
       <thead>
           <tr>
            <th>TRANSACTION DATE</th>
            <th>DESCRIPTION</th>
            <th>DEBIT</th>
            <th>CREDIT</th>
            <th>CURRENT BALANCE</th>
            </tr>
       </thead>
</table>

В My component.ts

 $("#tblStatementDetails").DataTable({
      data: this.statementDetails,
      retrieve: true,
      border: false,
      className: "",
      orderClasses: false,
      responsive: true,
      scrollX: true,
      paging: false,
      dom: "Bfrtip",
      buttons: [
        {
          extend: "print",
          title: "",
          customize: function (win) {
            debugger;


            $(win.document.body)
              .find("table").addClass('compact');

          }
        }
      ],

      columns: [
        { data: "dtCaptureDate", className: "text-center ", width: "7%", border: "none", color: "#8a807f !important", },
        { data: "szTransactionDescription", className: "text-center", width: "15%", border: "none", color: "#8a807f !important" },
        { data: "Debits", className: "text-center", width: "7%", border: "none", color: "#8a807f !important" },
        { data: "Credits", className: "text-center", width: "7%", border: "none", color: "#8a807f !important" },
        { data: "szRedCapital", className: "text-center", width: "7%", border: "none", color: "#8a807f !important" },
      ]
    });

в моем angular.json

"src/assets/datatable/js/jquery.dataTables.min.js",
"src/assets/datatable/js/dataTables.buttons.min.js",
"src/assets/datatable/js/buttons.flash.min.js",
"src/assets/datatable/js/jszip.min.js",
"src/assets/datatable/js/pdfmake.min.js",
"src/assets/datatable/js/vfs_fonts.js",
"src/assets/datatable/js/buttons.html5.min.js",
"src/assets/datatable/js/buttons.print.min.js"

В index.html я добавил

  <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />

  <link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css" />