pdf - 使用 datatables.net 导出为 pdf 时设置列宽

Question

嗨，我有一张我想导出的表格，但是当内容很短时，一列的宽度很长，并且在导出时使用 datatables.net 中的代码将其导出为 pdf 时，布局看起来不太好，并且这是我的代码

$(document).ready(function() {
    var currentDate = new Date()
    var day = currentDate.getDate()
    var month = currentDate.getMonth() + 1
    var year = currentDate.getFullYear()

    var d = day + "-" + month + "-" + year;
    $('#detailTable').DataTable({
        dom: 'Bfrtip',
        buttons: [{
            extend: 'excelHtml5',
            title: d + ' Purchase Orders'
        }, {
            extend: 'csvHtml5',
            title: d + ' Purchase Orders'
        }, {
            extend: 'pdfHtml5',
            title: d + ' Purchase Orders',
            orientation: 'landscape',
            pageSize: 'LEGAL',
            exportOptions: {
                columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
            }
        }]
    });
});

有没有办法设置特定列的宽度？提前致谢

Answer 1

您可以使用 customize回调以更改 PDFmakes 的“样式字典”。如果你想强制 #2 列是 100px或最大 100px在宽度上，这样做:

{
  extend: 'pdfHtml5',
  title: d + ' Purchase Orders',
  orientation: 'landscape',
  pageSize: 'LEGAL',
  exportOptions: {
     columns: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
  },
  //-------------------------- 
  customize : function(doc) {
     doc.styles['td:nth-child(2)'] = { 
       width: '100px',
       'max-width': '100px'
     }
  }
}

这将通过 CSS 样式规则

td:nth-child(2) {
  width: 100px;
  max-width: 100px;
}

到 PDFmake。查看文档 -> http://pdfmake.org/#/gettingstarted转到“样式词典”部分