Pdfmake: Pdf shows incomplete data when large number of columns in table

[ghost]

I am using datatable button extension to export as pdf which actually uses pdfmake to create the pdf.

The problem I am experiencing ( similar to this issue ) is that when there are too many columns in the table the pdf drops some of the columns, hence showing incomplete data as shown below.

I have the access to ddo before it gets handed over to pdfmake api, therefore I can manipulate it any way I want.

Is there any way I can avoid this. Any way I can wrap those cut/missing columns so that they come in a new row?

I really need help with this one. Thanks in Advance

[bhericher]

When you define the pdf button on your table, you can specify the columns that will be included (see [(http://www.datatables.net/extensions/buttons/examples/html5/columns.html))] : maybe it can help you

[jbgarr]

I'm running into the exact same issue. While editing the number of columns that are exported works to avoid the issue, the main problem still exists - tables that are too wide are cut off. Is there not a way to have content overflow extended to another page or something like that? I want my users to have the ability to export ALL the columns without having the content cut off. Any help with this would be much appreciated!

[emma1672]

The only thing I found is to use print button, then save as pdf. Although, technologically, it's not a solution, it is the only thing works for me right now. If anyone has better solution, I'm glad to hear it.

[nadeeshaKN]

Any further improvements on this ? Now would have been a perfect time to solve it!

[diksha694]

I'm facing the same issue. Need a solution urgently

[liborm85]

duplicate: https://github.com/bpampuch/pdfmake/issues/441

[sigmagithub]

i m facing same issue.

[9vimu9]

change page size

            extend: 'pdfHtml5',
            orientation: 'landscape',//landscape give you more space
            pageSize: 'A0',//A0 is the largest A5 smallest(A0,A1,A2,A3,legal,A4,A5,letter))
            title:title

datatatables link
https://datatables.net/reference/button/pdf

more about standard paper sizes
http://www.papersizes.org/a-series-full-sized-diagram.htm

[tperalta]

Hi, you can fix that with size font like this:

{ extend: 'pdfHtml5', orientation: 'landscape', pageSize: 'A4', customize: function (doc) { doc.defaultStyle.fontSize = 1; //2,3,4,etc doc.styles.tableHeader.fontSize = 1; //2, 3, 4, etc } }

[Jbegley1995]

I found a good implementation for DataTables, I added a star auto sizing option for the table widths. It basically works by figuring out the full auto sized width of all the columns and than stretches that to 100% of the available width that is left. Star sizing kind of seemed weird to me because it gives all of the columns the same width when I think naturally they just want it to fit the page. Anyway its a starting point and it works great for me, let me know if it helps anybody and we can try to get it added to the repository

Changes to pdfmake.js (version v0.1.33):

line 23083 replace the buildColumnWidths function with this modified version:

    function buildColumnWidths(columns, availableWidth) {
        var autoColumns = [],
            autoMin = 0, autoMax = 0,
            starColumns = [],
            starAutoColumns = [],
            starMaxMin = 0,
            starMaxMax = 0,
            starAutoColWidth = 0,
            fixedColumns = [],
            initial_availableWidth = availableWidth;

        columns.forEach(function (column) {
            if (isAutoColumn(column)) {
                autoColumns.push(column);
                autoMin += column._minWidth;
                autoMax += column._maxWidth;
            } else if (isStarColumn(column)) {
                starColumns.push(column);
                starMaxMin = Math.max(starMaxMin, column._minWidth);
                starMaxMax = Math.max(starMaxMax, column._maxWidth);
            } else if (isStarAutoColumn(column)){ 
                starAutoColumns.push(column);
            } else {
                fixedColumns.push(column);
            }
            starAutoColWidth += column._minWidth;
        });

        starAutoColumns.forEach(function (column) {
            column._calcWidth = initial_availableWidth*(column._minWidth/starAutoColWidth);
        });

        fixedColumns.forEach(function (col) {
            // width specified as %
            if (typeof col.width === 'string' && /\d+%/.test(col.width)) {
                col.width = parseFloat(col.width) * initial_availableWidth / 100;
            }
            if (col.width < (col._minWidth) && col.elasticWidth) {
                col._calcWidth = col._minWidth;
            } else {
                col._calcWidth = col.width;
            }

            availableWidth -= col._calcWidth;
        });

        // http://www.freesoft.org/CIE/RFC/1942/18.htm
        // http://www.w3.org/TR/CSS2/tables.html#width-layout
        // http://dev.w3.org/csswg/css3-tables-algorithms/Overview.src.htm
        var minW = autoMin + starMaxMin * starColumns.length;
        var maxW = autoMax + starMaxMax * starColumns.length;
        if (minW >= availableWidth) {
            // case 1 - there's no way to fit all columns within available width
            // that's actually pretty bad situation with PDF as we have no horizontal scroll
            // no easy workaround (unless we decide, in the future, to split single words)
            // currently we simply use minWidths for all columns
            autoColumns.forEach(function (col) {
                col._calcWidth = col._minWidth;
            });

            starColumns.forEach(function (col) {
                col._calcWidth = starMaxMin; // starMaxMin already contains padding
            });
        } else {
            if (maxW < availableWidth) {
                // case 2 - we can fit rest of the table within available space
                autoColumns.forEach(function (col) {
                    col._calcWidth = col._maxWidth;
                    availableWidth -= col._calcWidth;
                });
            } else {
                // maxW is too large, but minW fits within available width
                var W = availableWidth - minW;
                var D = maxW - minW;

                autoColumns.forEach(function (col) {
                    var d = col._maxWidth - col._minWidth;
                    col._calcWidth = col._minWidth + d * W / D;
                    availableWidth -= col._calcWidth;
                });
            }

            if (starColumns.length > 0) {
                var starSize = availableWidth / starColumns.length;

                starColumns.forEach(function (col) {
                    col._calcWidth = starSize;
                });
            }
        }
    }

The only difference is that it utilizes the isStarAutoColumn function if it is being used but I figured this would be easier than copying and pasting on different lines inside the funciton.

line 23183 add:

function isStarAutoColumn(column){
    return column.width === null || column.width === undefined || column.width === '%';
}

And inside of your datatables options use this inside of your customize function for your pdf button:

doc.content[0].table.widths =
         Array(doc.content[0].table.body[0].length + 1).join('%').split('');

[akhiljain1611]

not able to find buildColumnWidths definition in pdfmake.js @jbgarr

[akhiljain1611]

is there any way to do a column Wrap rather than changing page size ? @tperalta

[mjlitz]

Just break the overflowing columns into another page. There is probably a better way to do this, but this has been working for me and is a good starting point. Doesn't require any font-size change. Once you get below size 8, it's hard to read.
https://stackoverflow.com/questions/44183273/pdfmake-wide-table-page-break/52823682#52823682

[oshada007]

i did changes to pdfmake.js v0.1.33 and add mentioned option in customise function in my pdf button then it gives me error
"Uncaught TypeError: Cannot read property 'body' of undefined"
so i changed it to
doc.content[1].table.widths = Array(doc.content[1].table.body[0].length + 1).join('%').split('');
then i got error
pdfmake.min.js:2 Uncaught Error: unsupported number:
04%8%8%8%8%8%8%8%8%8%8%8%8%8%8%8%8%040
at o.number (pdfmake.min.js:2)
at c.rect (pdfmake.min.js:2)
at w (pdfmake.min.js:2)
at pdfmake.min.js:2
at g.createPdfKitDocument (pdfmake.min.js:2)
at l._createDoc (pdfmake.min.js:2)
at l.getBuffer (pdfmake.min.js:2)
at l.getBlob (pdfmake.min.js:2)
at l.download (pdfmake.min.js:2)
at s.action (buttons.html5.js:1426)

what i am doing wrong, how to fixed this issue?

[Navaruban]

Any further improvements on this ?