2016-08-15 3 views
3

У меня есть набор данных с большим количеством колоний.jQuery DataTables export pdf отключает столбцы

При экспорте pdf столбцы, которые не помещаются на странице, обрезаются.

Я пробовал использовать опции «ориентация» и «размер страницы», но его недостаточно.

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

В идеале он должен выполнить одно из следующих действий:

  1. Установите на одной странице (что делает шрифт очень маленький)
  2. Continue данные на другой странице в Ф
+0

Вы когда-нибудь находили решение для этого? Я столкнулся с той же проблемой и еще не нашел исправления. – jbgarr

ответ

1

мне удалось решить эту проблему с помощью установки опции для PDF, как

{ 
       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

стал

enter image description here

0

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

+2

Он отключается, когда я расширяю вашу скрипку с большим количеством столбцов и длинными значениями строк: https://jsfiddle.net/Lr77dgmt/34/ – ImpendingDoom

0

благодаря @parlad, однако ниже является идеальным решением -

{ 
      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', делает трюк :) Надеюсь, что это помогает другим.

Смежные вопросы