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

本文介绍了使用 datatables 导出为 pdf 时设置列宽的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

hi i have this table that i wanted to export but the width of one column is so long when the content is only short and it makes the layout not looking good when it is exported to pdf im using the codes from datatables when exporting and here is my code

$(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]
            }
        }]
    });
});

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

is there a way where i can set the width of a specific column? thanks in advance

推荐答案

您可以使用 customize 回调来更改 PDFmakes 的样式字典".如果要强制 #2 列的宽度为 100px 或最大 100px，请执行以下操作:

You can use the customize callback to alter PDFmakes' "style dictionary". If you want to force the #2 column to be 100px or max 100px in width, do this :

{
  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样式规则

This will pass the CSS style rule

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

到PDFmake.请参阅文档 -> http://pdfmake/#/gettingstarted 转到样式词典"部分

to PDFmake. See the documentation -> http://pdfmake/#/gettingstarted go for section "Style dictionaries"

这篇关于使用 datatables 导出为 pdf 时设置列宽的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！