jquery - DataTables PDF 导出单元格填充

Question

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

Answer 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
  }
}

Answer 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
        }
    };