DataTables 以 100% 宽度导出 PDF

Posted 2023-02-24

【中文标题】DataTables 以 100% 宽度导出 PDF

【英文标题】：DataTables Export PDF with 100% Width

【发布时间】：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);

【参考方案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="*"