Question

这是一个小提琴的例子 Angular datatable - print and pdf example

当列数没有增加时，整个数据没有进入打印或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上将纵向调整为横向。

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

1 个答案: