CODEWITHSUNDEEP
jquerypdfdatatables
ImpendingDoom
ImpendingDoom

Reputation: 437

jQuery DataTables export pdf cuts off columns

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

Upvotes: 16

Views: 26918

Answers (5)

Vivek Chaturvedi
Vivek Chaturvedi

Reputation: 540

thanks @parlad , however Below is the perfect solution -

{
            extend : 'pdfHtml5',
            title : function() {
                return "ABCDE List";
            },
            orientation : 'landscape',
            pageSize : 'A0', // You can also use "A1","A2" or "A3", most of the time "A3" works the best.
            text : '<i class="fa fa-file-pdf-o"> PDF</i>',
            titleAttr : 'PDF'
        }

pageSize : 'A0', does the trick :), but you can also use A1, A2 or A3, Hope it helps to others.

Upvotes: 14

Emon Ahmed
Emon Ahmed

Reputation: 11

  "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"]

Upvotes: -1

Hriju
Hriju

Reputation: 738

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;

Upvotes: 0

parlad
parlad

Reputation: 1163

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'
            }

enter image description here

became

enter image description here

Upvotes: 16

user6390636
user6390636

Reputation:

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

Upvotes: 1

Related Questions