jQuery DataTables export pdf cuts off columns

Question

I have a dataset with large number of colums.

When exporting the pdf , columns that dont fit on the page get cut off.

I tried using the 'orientation' and 'page-size' options but its not enough.

    buttons: [
                {
                    extend: 'pdfHtml5',
                    orientation: 'landscape',
                    pageSize: 'LEGAL'
                }
            ]

Ideally it should do one of the following:

1. Fit the data on one page ( making the font really small )
2. Continue the data in another page in the the pdf

Answer 1

i managed to solve this problem with setting option for pdf like

 {
                extend : 'pdfHtml5',
                title : function() {
                    return "ABCDE List";
                },
                orientation : 'landscape',
                pageSize : 'LEGAL',
                text : '<i class="fa fa-file-pdf-o"> PDF</i>',
                titleAttr : 'PDF'
            } 

became

Answer 2

thanks @parlad , however Below is the perfect solution -

{
            extend : 'pdfHtml5',
            title : function() {
                return "ABCDE List";
            },
            orientation : 'landscape',
            pageSize : 'A0',
            text : '<i class="fa fa-file-pdf-o"> PDF</i>',
            titleAttr : 'PDF'
        } 

pageSize : 'A0', does the trick :) Hope it helps to others.

Answer 3

CDN :

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css
https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js
https://cdn.datatables.net/s/bs/jszip-2.5.0,pdfmake-0.1.18,dt-1.10.10,b-1.1.0,b-flash-1.1.0,b-html5-1.1.0,b-print-1.1.0,fh-3.1.0,sc-1.4.0/datatables.min.css
https://cdn.datatables.net/s/bs/jszip-2.5.0,pdfmake-0.1.18,dt-1.10.10,b-1.1.0,b-flash-1.1.0,b-html5-1.1.0,b-print-1.1.0,fh-3.1.0,sc-1.4.0/datatables.min.js

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>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="text-right">1</td>
        <td>Java</td>
      </tr>
      <tr>
        <td class="text-right">2</td>
        <td>HTML</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td colspan="2" class="text-center">footer text</td>
      </tr>
    </tfoot>
  </table>
</div>

JavaScript :

$('table.data-table').DataTable({
  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: false
    }, {
      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'
      }
    }
  }
});

Fiddle

Answer 4

There is a solution, in that case, if you set all the column to equal length, I checked for 16 columns and found it all columns are appearing correctly.

you can set the width manually or you can also set the width dynamically if you are not aware of the number of columns.

add the following line first:

doc.content[0].layout = objLayout;

Now you can set the table widths different way. Choose the one you want.

Method 1:

//For equal column size
doc.content[0].table.widths = ["*", "*", "*", "*", "*", "*","*","*", "*"];

Method 2: For setting fixed column size if you want to set a fixed width for different different columns:

doc.content[0].table.widths = ["5%", "5%", "8%", "8%", "8%", "8%","7%", "7%", "8%", "6%", "8%", "8%","7%", "7%"];

Method 3: Dynamically set the equal size (if there are different tables with different number of columns)

//Get the column length
var colCount = table.columns().header().length;
//use a loop
for(var col=0;col<colCount;col++)
{
   size[col]='*';
}
doc.content[0].table.widths = size;

Answer 5

  "buttons": [
  {
    extend: 'print',
    text: 'Print',
    title: 'All trucks',
    exportOptions: {
      columns: [0,1]
    },
    footer: true,
    autoPrint: true
  },
  {
    extend: 'excel',
    text: 'Excel',
    title: 'All trucks',
    exportOptions: {
      columns: [0,1]
    },
    footer: true,
    autoPrint: true
  },
  "colvis"]