我有一个表,要另存为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' },
                      ]
                  }
                ]
            });


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

最佳答案

通过进一步扩展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(可能已经过时也可能未过时)。

09-16 14:39