DataTables PDF 导出单元格填充

Posted 2023-05-09

【中文标题】DataTables PDF 导出单元格填充

【英文标题】：DataTables PDF Export Cell Padding

【发布时间】：2020-01-30 15:49:51

【问题描述】：

有没有办法减少 DataTables 导出的 PDF 中的单元格填充？ PDFMake playground 声明在导出表格时可以编辑单元格填充，但我没有遇到任何这样做的代码示例。任何帮助表示赞赏。

【参考方案1】：

在 pdfmake 中可以通过为表格定义表格布局来完成：https://pdfmake.github.io/docs/document-definition-object/tables/#own-table-layouts

例如：

const tableNode = 
  style: 'tableStyle',
  table: 
    widths: ["*", "*", "*"],
    body: []
  ,
  layout: 
    paddingLeft: (i, node) => 10,
    paddingRight: (i, node) => 10,
    paddingTop: (i, node) => 10,
    paddingBottom: (i, node) => 10
  

【参考方案2】：

好吧，我也遇到了这个问题，这是我能想到的最简单的解决方案。

        <script type="text/javascript">
            $(document).ready(function () 
                let $table = $('#whatever-your-table-is');
                $table.DataTable(
                    buttons: [ 
                        'copy',
                        'excel',
                        'csv', 
                        
                            extend: 'pdf',
                            customize: function (doc) 
                                // Here's where you can control the cell padding
                                doc.styles.tableHeader.margin =
                                  doc.styles.tableBodyOdd.margin =
                                  doc.styles.tableBodyEven.margin = [10, 10, 10, 10];
                            ,
                            pageSize : 'LETTER'
                        
                    ]
                );
            );
        </script>

如果你找到一个未缩小的版本，这里是 DataTables 设置的样式的转储，所以我想我可以搞砸 tableBodyOdd 和 tableBodyEven 并且它有效。

    var doc = 
        pageSize: config.pageSize,
        pageOrientation: config.orientation,
        content: [
            
                table: 
                    headerRows: 1,
                    body: rows
                ,
                layout: 'noBorders'
            
        ],
        styles: 
            tableHeader: 
                bold: true,
                fontSize: 11,
                color: 'white',
                fillColor: '#2d4154',
                alignment: 'center'
            ,
            tableBodyEven: ,
            tableBodyOdd: 
                fillColor: '#f3f3f3'
            ,
            tableFooter: 
                bold: true,
                fontSize: 11,
                color: 'white',
                fillColor: '#2d4154'
            ,
            title: 
                alignment: 'center',
                fontSize: 15
            ,
            message: 
        ,
        defaultStyle: 
            fontSize: 10
        
    ;