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

Question

Here is a fiddle example Angular datatable - print and pdf example

When no.of column increases whole data is not getting in the print or in the pdf. For example, I have 30 columns in the table and on taking print only 20 columns are printing and other columns are missing. I want all columns on clicking print button. How can it solve? Below are the codes

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 code:

    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

By default its printing A4 Size which doesn't fit the width of your data. Adjust the pdf size to A3 and try again, or you can change the orientation fro potrait to landscape on that A4 size pdf