如何从 DataTable 中删除 PDF 导出结果中的标题并将颜色表填充更改为白色？答案

【问题标题】：How to remove header in PDF export result from DataTable and change color table fill to white?如何从 DataTable 中删除 PDF 导出结果中的标题并将颜色表填充更改为白色？
【发布时间】：2021-05-21 17:10:48
【问题描述】：

我尝试从 DataTable 中删除导出的 PDF 中的标题，但没有成功。另外，如何将颜色表改为全白边框黑？

var table = $('#ReportTable').DataTable( {
    lengthChange: false,
    buttons: [
                {"extend": 'pdf', 
                "className": 'btn btn-sm btn-primary rounded-pill px-3 mb-3 mb-sm-0',
                    customize: function(doc) {
                        doc.header = false;
                        doc.pageMargins = [ 150, 20, 150, 20 ];
                    },
                },
                {
                    "extend": 'print',
                    "className": 'btn btn-sm btn-primary rounded-pill px-3 mb-3 mb-sm-0'
                },
            ]
} );

table.buttons().container()
    .appendTo( '#ReportTable_wrapper .col-md-6:eq(0)' );

【问题讨论】：

标签： laravel datatables

【解决方案1】：

您可以使用title 控制标题（“SiPanda”），您可以使用customize 控制用于 PDF 中交替行的不同颜色（条纹线）。

我不想干扰您对customize 的现有使用，所以这是我的测试示例，您可以将其用作模型：

var table = $('#example').DataTable( {
dom: 'Brftip',
buttons: [
  { 
    extend: 'pdfHtml5', 
    text: 'To PDF',
    title: '',
    customize: function ( pdf, btn, tbl ) {
      delete pdf.styles.tableBodyOdd.fillColor;
    }
  }  
]
} );

title: '' 很简单（假设您的 PDF 实际上是从网页标题中获取其标题）。

delete pdf.styles.tableBodyOdd.fillColor; 假定您的 DataTable 使用“标准”斑马条纹样式。

此命令有效，因为 DataTable 将以下属性传递给 PDFMake：

tableBodyEven: Object {  }
tableBodyOdd: Object { fillColor: "#f3f3f3" }

因此，我们从tableBodyOdd 对象中删除fillColor: "#f3f3f3" 属性。

如果您使用了不同的 DataTables 样式，您可能会看到与我看到的不同的东西 - 在这种情况下，您可以使用 console.log( pdf ); 仔细查看。

更新

我错过了关于“和边框黑色”的部分 - 所以这里也是一种方法：

buttons: [
  { 
    extend: 'pdfHtml5', 
    text: 'To PDF',
    title: '',
    customize: function ( pdf, btn, tbl ) {
      delete pdf.styles.tableBodyOdd.fillColor;

      pdfMake.tableLayouts = {
        exampleLayout: {
          hLineWidth: function (i) {
            return 0.2;
          },
          vLineWidth: function (i) {
            return 0.2;
          },
          hLineColor: function (i) {
            return 'black';
          },
          vLineColor: function (i) {
            return 'black';
          }
          //paddingLeft: function (i) {
          //  return i === 0 ? 0 : 8;
          //},
          //paddingRight: function (i, node) {
          //  return (i === node.table.widths.length - 1) ? 0 : 8;
          //}
        }
      };

      pdf.content[0].layout = "exampleLayout";
    }
  }  
]

在上面的 sn-p 中，我定义了一个名为 pdfMake.tableLayouts 的对象，其中包含一个名为 exampleLayout 的自定义对象。

我的exampleLayout 在表格中的每个单元格周围定义了细黑线。

然后我通过以下方式使用此自定义布局：

pdf.content[0].layout = "exampleLayout";

您可以选择自己的线宽和颜色。

最终结果：

【讨论】：