DataTables 以 100% 宽度导出 PDF答案

【问题标题】：DataTables Export PDF with 100% WidthDataTables 以 100% 宽度导出 PDF
【发布时间】：2016-06-09 03:24:58
【问题描述】：

我正在尝试将我的表格导出为 100% 宽度的 PDF。我尝试了以下方法，但我没有成功

var settings={};
settings.buttons = [
    {
        extend:'pdfHtml5',
        text:'Export PDF',
        orientation:'landscape',
        customize : function(doc){ 
            doc.styles['table'] = { width:100% }
        }
    }
];
$('.dTable').dataTable(settings);

【问题讨论】：

标签： jquery css pdf datatables

【解决方案1】：

找到了一种更简单快捷的方法。

{
  extend: 'pdf',
  customize: function (doc) {
    doc.content[1].table.widths = 
        Array(doc.content[1].table.body[0].length + 1).join('*').split('');
  }
}

这里发生的事情是这样的：

doc.content[1].table.widths 是每个列的宽度数组，如果每个列都是 '*'，则表示表格将适合 100% 的页面，列均匀分布。

Array(doc.content[1].table.body[0].length + 1) 在我的表的所有列的长度中创建一个数组。

.join('*') 从数组中的所有单元格创建一个字符串，每个单元格都有一个 '*'。

.split(''); 将其拆分回一个数组。

希望我能帮助到别人。

【讨论】：

完美运行！谢谢
这个似乎有效，但超出了右边的页边距
@darioxlz 我只能猜测这部分代码在你的表加载之前就已经运行了。

【解决方案2】：

在挖掘和挖掘之后，我发现您只需要为每一列添加一个宽度“*”。我创建了一个简单的函数，以便根据 td 标签的数量创建一个数组，并包含一个 colspan 检查。

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);

【讨论】：

我可以开始工作的唯一解决方案，谢谢！！虽然我认为$i++ 应该只是i++，因为它是前面在同一行中声明的 JavaScript（而不是 jQuery）变量。

【解决方案3】：

您可以为每列选择所需的大小，并让它们适合您需要的空间。您只需要对此进行一些调整：

"doc.content[1].table.widths = [90,90,90,90,90,90,90,90]; " : {
    extend: 'pdfHtml5',
    orientation: 'landscape',//orientamento stampa
    pageSize: 'A4', //formato stampa
    alignment: "center", //non serve a nnt ma gli dice di stampare giustificando centralmente
    titleAttr: 'PDF',   //titolo bottone
    exportOptions: {// quali colonne vengono mandate in stampa (indice posizionale)
        columns: [ 1,2,3,4,5,6,7,8 ]
    },
    customize : function(doc){ 
        doc.styles.tableHeader.alignment = 'left'; //giustifica a sinistra titoli colonne
        doc.content[1].table.widths = [90,90,90,90,90,90,90,90]; //costringe le colonne ad occupare un dato spazio per gestire il baco del 100% width che non si concretizza mai
    }
}

【讨论】：

如果您使用代码格式和正确的拼写/语法，您的答案会更容易理解。此外，您可能希望在代码 cmets 中坚持使用英语。
我遇到了宽度问题。错误显示是无法设置未定义的属性“宽度”

【解决方案4】：

customize : function(doc){
    var colCount = new Array();
    var length = $('#reports_show tbody tr:first-child td').length;
    console.log('length / number of td in report one record = '+length);
    $('#reports_show').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(parseFloat(100 / length)+'%'); }
    });
}

它在我的情况下工作。它计算标题中数据标签的数量。然后它为每个数据标签分配 100 /（数据标签的数量）宽度。

【讨论】：

【解决方案5】：

请试试这个工作正常对于居中对齐的整个数据和全宽生成的pdf：-

customize: function(doc) {
    doc.content[1].table.widths =Array(doc.content[1].table.body[0].length + 1).join('*').split('');
    doc.defaultStyle.alignment = 'center';
    doc.styles.tableHeader.alignment = 'center';
},

【讨论】：

【解决方案6】：

var dtTbl = tbl.DataTable({
            dom: 'Bt',
            buttons: [{
                    extend: "pdfHtml5",
                    title: "Report",
                    customize: function(doc) {
                        console.log(doc.content)
                        doc.content.splice(0, 0, {
                            margin: [12, 0, 0, 12],
                            alignment: "center",
                        });

                        doc.content[2].table.widths = ["*", "*", "*"];
                    }]
            })

这就是我所做的，并且奏效了。我只有 3 个标题，所以我在表格宽度中插入了三个星号。

【讨论】：

【解决方案7】：

这项工作非常出色……适应性强。为我编辑。更改表的 id 或类的类 (.Datatable)

customize: function(doc) {
    var colCount = new Array();
    var tr = $('.DataTable tbody tr:first-child');
    var trWidth = $(tr).width();

    var length = $('.DataTable tbody tr:first-child td').length;
    $('.DataTable').find('tbody tr:first-child td').each(function() {
        var tdWidth = $(this).width();
        var widthFinal = parseFloat(tdWidth * 115);
        widthFinal = widthFinal.toFixed(2) / trWidth.toFixed(2);
        if ($(this).attr('colspan')) {
            for (var i = 1; i <= $(this).attr('colspan'); $i++) {
                colCount.push('*');
            }
        } else {
            colCount.push(parseFloat(widthFinal.toFixed(2)) + '%');
        }
    });
    doc.content[1].table.widths = colCount;
}

【讨论】：

【解决方案8】：

您应该在“pdfmake.js”文件中查找 t.table.widths 的位置并将值更改为“*”。

t.table.widths="*"

【讨论】：