jQuery的DataTables導出pdf切斷列

導出pdf時，不適合頁面的列會被截斷。

我嘗試使用'方向'和'頁面大小'選項，但它不夠。

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

理想情況下，應該做以下操作之一：

適合在一個頁面上的數據（使字體非常小）
繼續數據在另一頁中的PDF

來源

2016-08-15 ImpendingDoom

你有沒有找到這個解決方案？我遇到了同樣的問題，但尚未找到修復程序。 – jbgarr

我設法與像

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

設置選項對PDF解決這個問題3210

成爲

來源

2017-08-25 05:14:41

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

來源

2016-08-15 18:41:24 Goku

當我用更多的列和更長的行長度值擴展小提琴時，它會切斷：https：//jsfiddle.net/Lr77dgmt/34/ – ImpendingDoom

感謝@parlad，但下面是完美的解決方案 -

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

每頁： 'A0'，的伎倆:) 希望它可以幫助別人。

來源

2017-09-03 10:56:22

jQuery的DataTables導出pdf切斷列

回答

相關問題