如何移动表导出pdfhtml5数据表？

Question

我想使用pdfhtml导出datatable，这是我的代码

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

结果导出如下所示

​

怎么把桌子移到中间？我可以修改这个布局吗？

Answer 1

您可以使用customize回调来更改生成的PDF的布局。它没有这么好的文档(我猜)，但是看到了PDFMake定义对象文档来洞察命名和对象结构，并将这个答案 (由我看)看作是一个非常简单的如何做的例子。

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 on左右的页边距，并以表格为中心。现在你只需要找出最适合你需求的保证金大小。在此过程中，您可能还需要强制导出列的宽度：

$('#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和“rest”宽度。如果希望将宽度调整到内容，请使用'auto'。注意，如果您的item.table.widths与表中的列数不完全匹配，则导出将失败。

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