jQuery DataTables 导出 pdf 截断列

Question

我有一个包含大量列的数据集。

导出 pdf 时，不适合页面的列会被截断。

我尝试使用“方向”和“页面大小”选项，但还不够。

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

理想情况下，它应该执行以下操作之一：

1. 使数据适合一页（使字体非常小）
2. 在 pdf 的另一页中继续数据

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

成为

Answer 2

感谢@parlad，但是下面是完美的解决方案-

{
            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', 可以解决问题 :)，但您也可以使用 A1、A2 或 A3， 希望对其他人有所帮助。

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

有一个解决方案，在这种情况下，如果您将所有列设置为相等长度，我检查了 16 列，发现所有列都正确显示。

您可以手动设置宽度，如果您不知道列数，也可以动态设置宽度。

首先添加以下行：

doc.content[0].layout = objLayout;

现在您可以以不同的方式设置表格宽度。选择你想要的。

方法一：

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

方法二： 如果要为不同的不同列设置固定宽度，则设置固定列大小：

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

方法三： 动态设置大小相等（如果有不同列数不同的表）

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