如何移动表格导出pdfhtml5数据表？答案

【问题标题】：How to move table export pdfhtml5 datatable?如何移动表格导出pdfhtml5数据表？
【发布时间】：2016-05-02 22:37:43
【问题描述】：

我想使用 pdfhtml 导出数据表这是我的代码

$(document).ready(function() {
   $('#example').DataTable( {
      dom: 'Bfrtip',
         buttons: [ {
            extend: 'pdfHtml5',
            text: 'PDF with image'
         } ]
    } );
} );

并像这样导出pdf

如何将桌子移动到中心？我可以修改这个布局吗？

【问题讨论】：

标签： jquery pdf datatables

【解决方案1】：

您可以使用customize 回调来更改生成的PDF 的布局。它没有很好的文档记录（我猜），但请参阅PDFMake definition object docs 以了解命名和对象结构，并参阅this answer（我的）作为一个非常简单的示例。

AFAIK 没有选项可以让您强制将整个内容居中（即一种 docDefinition.content.align 或类似的），但您可以否决页边距和列宽。

$('#example').DataTable({
    dom: 'Bfrtip',
    buttons: [ {
       extend: 'pdfHtml5',
       text: 'PDF with image',
       customize: function(doc) {
          //pageMargins [left, top, right, bottom] 
          doc.pageMargins = [ 150, 20, 150, 20 ];
       }
    }]
});

这将有效地在每个页面上创建一个 150 像素的左/右页边距，使表格居中。现在您只需确定最适合您需要的边距大小。在该过程中，您可能还需要强制导出列的宽度：

$('#example').DataTable( {
    dom: 'Bfrtip',
    buttons: [{
       extend: 'pdfHtml5',
       text: 'PDF with image',
       customize: function(doc) {
          doc.content.forEach(function(item) {
             if (item.table) {
                // Set width for 3 columns
                item.table.widths = [100, 40, '*'] 
             } 
          });
       }
    }]
});

我正在迭代 content 数组，因为我们无法确定哪个索引包含 table 属性。以上只是将导出的三列布局设置为具有100px、40px 和“其余”宽度。如果要根据内容调整宽度，请使用 'auto'。请注意，如果您的 item.table.widths 与表中的列数不完全匹配，则导出将失败。

无论如何 - 通过定义 pageMargin 并可能对某些列的宽度进行一些小的调整，您应该能够非常轻松地创建居中的 PDF。

【讨论】：