jquery - 如何移动表格导出pdfhtml5数据表？

Question

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

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

结果导出 pdf 像这样

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

Answer 1

您可以使用customize回调来更改生成的PDF的布局。它没有很好的记录(我猜)，但请参阅 PDFMake definition object docs要了解命名和对象结构，请参阅 this answer (由我)作为一个非常简单的例子来说明如何做。

据我所知，没有任何选项可以让您强制将整个内容居中(即一种 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。