表格数据无法在角度数据表中点击打印

Question

这是一个小提琴示例Angular 数据表 - 打印和 pdf 示例

当 no.of 列增加时，整个数据不会出现在打印或 pdf 中。 例如，我在表中有 30 列，打印时只有 20 列正在打印，其他列都丢失了。 我想要点击打印按钮的所有列。 怎么解决？ 下面是代码

html

<h1>Print test</h1>
<div class="data-table-container">
<table class="table table-hover table-striped table-bordered data-table">
<thead>
  <tr>
    <th class="text-right">No.</th>
    <th>Name</th>
    <th>Name1</th>
    <th>Name2</th>
    <th>Name3</th>
    <th>Name4</th>
    <th>Name5</th>
    <th>Name6</th>
    <th>Name7</th>
    <th>Name8</th>
    <th>Name9</th>
    <th>Name10</th>
    <th>Name11</th>
    <th>Name12</th>
    <th>Name13</th>
    <th>Name14</th>
    <th>Name15</th>
    <th>Name16</th>
    <th>Name17</th>
    <th>Name18</th>
    <th>Name19</th>
    <th>Name20</th>
    <th>Name21</th>
    <th>Name22</th>
    <th>Name23</th>
    <th>Name24</th>
  </tr>
</thead>
<tbody>
  <tr>
    <td class="text-right">1</td>
    <td>Name 1</td>
    <td>Name1</td>
    <td>Name2</td>
    <td>Name3</td>
    <td>Name4</td>
    <td>Name5</td>
    <td>Name6</td>
    <td>Name7</td>
    <td>Name8</td>
    <td>Name9</td>
    <td>Name10</td>
    <td>Name11</td>
    <td>Name12</td>
    <td>Name1</td>
    <td>Name2</td>
    <td>Name3</td>
    <td>Name4</td>
    <td>Name5</td>
    <td>Name6</td>
    <td>Name7</td>
    <td>Name8</td>
    <td>Name9</td>
    <td>Name10</td>
    <td>Name11</td>
    <td>Name12</td>
  </tr>
  <tr>
    <td class="text-right">2</td>
    <td>Name 2</td>
    <td>Name1</td>
    <td>Name2</td>
    <td>Name3</td>
    <td>Name4</td>
    <td>Name5</td>
    <td>Name6</td>
    <td>Name7</td>
    <td>Name8</td>
    <td>Name9</td>
    <td>Name10</td>
    <td>Name11</td>
    <td>Name12</td>
    <td>Name1</td>
    <td>Name2</td>
    <td>Name3</td>
    <td>Name4</td>
    <td>Name5</td>
    <td>Name6</td>
    <td>Name7</td>
    <td>Name8</td>
    <td>Name9</td>
    <td>Name10</td>
    <td>Name11</td>
    <td>Name12</td>
  </tr>
</tbody>
<tfoot>
            <tr>
                <td colspan="2" class="text-center">footer text</td>
            </tr>
        </tfoot>
</table>
</div>

js代码：

    paging: false,
    columnDefs: [{
    targets: 'no-sort',
    orderable: false
    }],
    dom: '<"row"<"col-sm-6"Bl><"col-sm-6"f>>' +
    '<"row"<"col-sm-12"<"table-responsive"tr>>>' +
    '<"row"<"col-sm-5"i><"col-sm-7"p>>',
    fixedHeader: {
    header: true
    },
    buttons: {
    buttons: [{
      extend: 'print',
      text: '<i class="fa fa-print"></i> Print',
      title: $('h1').text(),
      exportOptions: {
        columns: ':not(.no-print)'
      },
      footer: true,
      autoPrint: true
     }, {
      extend: 'pdf',
      text: '<i class="fa fa-file-pdf-o"></i> PDF',
      title: $('h1').text(),
      exportOptions: {
        columns: ':not(.no-print)'
      },
      footer: true
    }],
    dom: {
      container: {
        className: 'dt-buttons'
      },
      button: {
        className: 'btn btn-default'
      }
    }
   }

Answer 1

默认情况下，它的打印 A4 尺寸不适合您的数据宽度。 将 pdf 大小调整为 A3 并重试，或者您可以在该 A4 大小的 pdf 上将方向从 potrait 更改为横向