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'
}
}
}
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.