javascript - 如何使 PDF 表格的数据表宽度为 100%

Question

我有一个表，我将其保存为数据表中的 pdfHtml5。我试图使表格全宽，但没有成功。如何使用 pdfHtml5 的样式使表格宽度为 100%？

  dom: 'Bfrtip',
                buttons: [
                  {
                      extend: 'collection',
                      text: '<div class="image"><img src="/Asset/Image/Capture.jpg" alt="" /></div>',
                      autoClose: true,
                      buttons: [{
                          extend: 'pdfHtml5', text: 'Download PDF Document', className: 'pdfdoc', title: podTitle, message: pod.data.pod_description_text + "\n" + "\n" + printDate, customize: function (doc) {
                              doc.defaultStyle.alignment = 'left';
                              doc.styles.tableHeader.alignment = 'left';
                              doc.styles.message = {
                                  alignment: 'center'
                              }
                                    doc.styles.table = {
                                  alignment: 'center',
                                  width: '100%',
                              }

                              /*doc.content[1].table.widths = Array(doc.content[1].table.body[0].length + 1).join('*').split('');*/
                              doc.pageMargins = [ 80, 20, 80, 20 ];

                          }
                      }, { extend: 'excel', text: 'Download Excel Document', className: 'exceldoc' },
                      ]
                  }
                ]
            });

Answer 1

通过进一步扩展 pdfHtml5，您可以指示 Buttons 扩展使用的 pdfmake 库使用 100% 宽度。 DataTables 论坛有一个post与所需的代码:

var tbl = $('.dTable');
var settings={};
settings.buttons = [
    {
        extend:'pdfHtml5',
        text:'Export PDF',
        orientation:'landscape',
        customize : function(doc){
            var colCount = new Array();
            $(tbl).find('tbody tr:first-child td').each(function(){
                if($(this).attr('colspan')){
                    for(var i=1;i<=$(this).attr('colspan');$i++){
                        colCount.push('*');
                    }
                }else{ colCount.push('*'); }
            });
            doc.content[1].table.widths = colCount;
        }
    }
];
$('.dTable').dataTable(settings);

请注意，如果您只是复制上面代码的自定义部分，则必须将 tbl 替换为 "#myTable" 或类似内容。

另请参阅相关的 GitHub ticket ，包括另一个 implementation (可能会也可能不会过时)。