如何为数据表制作 PDF 100% 宽度的表格答案

【问题标题】：How to make table of PDF 100% width for datatables如何为数据表制作 PDF 100% 宽度的表格
【发布时间】：2017-03-28 16:49:22
【问题描述】：

我有一个表格，我在数据表中保存为 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 jquery datatable

【解决方案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（可能已过期，也可能不会过期）。

【讨论】：