web-dev-qa-db-ja.com

DataTablesエクスポートPDF幅100％

テーブルをPDFに100％の幅でエクスポートしようとしています。以下を試しましたが失敗しました

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

それを行うためのより簡単で迅速な方法を見つけました。

_{
  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('');は、それを配列に分割して戻します。

私が途中で誰かを助けたことを願っています。

40
Rabbi Shuki Gur

掘り下げた後、各列に「*」の幅を追加するだけでよいことがわかりました。 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);
3
Douglas Cottrell
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 /（データタグなし）の幅を割り当てます。

2
Umar Asghar
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つしかないので、表の幅に3つのアスタリスクを挿入しました。

1
wayne

すべての列に必要なサイズを選択して、必要なスペースに合わせることができます。これを調整するだけです。

"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
    }
}
1
Giuliano Knoke

'pdfmake.js'ファイルでt.table.widthsと書かれている場所を探して、値を '*'に変更する必要があります。

t.table.widths = "*"

0
Lukas Correa

この作品は優れています...順応性があります。私のために編集されました。テーブルの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;
}
0
Josué Leo Moreno