bpampuch / pdfmake

Client/server side PDF printing in pure JavaScript
http://pdfmake.org
Other
11.7k stars 2.04k forks source link

Table row height overlapping problem #1300

Open almen21 opened 6 years ago

almen21 commented 6 years ago

Hello,

i've found a problem with table row heights. I' m trying to build a pdf that contains a dynamic table bigger than the page. Each table row must have a static height (in px), but when the page ends, the table row overlaps the bottom page margin instead of breaking into a new page. I noticed that the problem is even present on tables playground, at "Defining row heights": if you increase heights values (eg: heights: [200, 500, 70]) the table overlaps page bottom margin. See the image below:

image

liborm85 commented 6 years ago

Attach example for reproduce problem executable on playground.

almen21 commented 6 years ago
var dd = {
    "content": [{
        "table": {
            "body": [
                [
                    "Monday 05/03/2018",
                    "Tuesday 06/03/2018",
                    "Wednesday 07/03/2018",
                    "Thursday 08/03/2018",
                    "Friday 09/03/2018",
                    "Saturday 10/03/2018"
                ],
                [
                    [{
                        "table": {
                            "widths": [
                                "*"
                            ],
                            "heights": [
                                716
                            ],
                            "body": [
                                [{
                                    "text": [
                                        "08:00 - 20:00\n"
                                    ],
                                    "fillColor": "#ffffff",
                                    "color": "#000000"
                                }]
                            ]
                        },
                        "style": "slotsTable",
                        "layout": {}
                    }],
                    [{
                        "table": {
                            "widths": [
                                "*"
                            ],
                            "heights": [
                                716
                            ],
                            "body": [
                                [{
                                    "text": [
                                        "08:00 - 20:00\n"
                                    ],
                                    "fillColor": "#ffffff",
                                    "color": "#000000"
                                }]
                            ]
                        },
                        "style": "slotsTable",
                        "layout": {}
                    }],
                    [{
                        "table": {
                            "widths": [
                                "*"
                            ],
                            "heights": [
                                716
                            ],
                            "body": [
                                [{
                                    "text": [
                                        "08:00 - 20:00\n"
                                    ],
                                    "fillColor": "#ffffff",
                                    "color": "#000000"
                                }]
                            ]
                        },
                        "style": "slotsTable",
                        "layout": {}
                    }],
                    [{
                        "table": {
                            "widths": [
                                "*"
                            ],
                            "heights": [
                                56,
                                236,
                                416
                            ],
                            "body": [
                                [{
                                    "text": [
                                        "08:00 - 09:00\n"
                                    ],
                                    "fillColor": "#ffffff",
                                    "color": "#000000"
                                }],
                                [{
                                    "text": [
                                        "09:00 - 13:00\n"
                                    ],
                                    "fillColor": "#E0FFFF",
                                    "color": "#000000"
                                }],
                                [{
                                    "text": [
                                        "13:00 - 20:00\n"
                                    ],
                                    "fillColor": "#ffffff",
                                    "color": "#000000"
                                }]
                            ]
                        },
                        "style": "slotsTable",
                        "layout": {}
                    }],
                    [{
                        "table": {
                            "widths": [
                                "*"
                            ],
                            "heights": [
                                56,
                                6,
                                226,
                                116,
                                236,
                                56
                            ],
                            "body": [
                                [{
                                    "text": [
                                        "08:00 - 09:00\n"
                                    ],
                                    "fillColor": "#ffffff",
                                    "color": "#000000"
                                }],
                                [{
                                    "text": [
                                        "09:00 - 09:10\n",
                                        {
                                            "text": "Acme Corp.: ",
                                            "bold": true
                                        },
                                        "Austin, texas-Direttivo xx\n"
                                    ],
                                    "fillColor": "#2D4EA5",
                                    "color": "#ffffff"
                                }],
                                [{
                                    "text": [
                                        "09:10 - 13:00\n"
                                    ],
                                    "fillColor": "#E0FFFF",
                                    "color": "#000000"
                                }],
                                [{
                                    "text": [
                                        "13:00 - 15:00\n"
                                    ],
                                    "fillColor": "#ffffff",
                                    "color": "#000000"
                                }],
                                [{
                                    "text": [
                                        "15:00 - 19:00\n"
                                    ],
                                    "fillColor": "#E0FFFF",
                                    "color": "#000000"
                                }],
                                [{
                                    "text": [
                                        "19:00 - 20:00\n"
                                    ],
                                    "fillColor": "#ffffff",
                                    "color": "#000000"
                                }]
                            ]
                        },
                        "style": "slotsTable",
                        "layout": {}
                    }],
                    [{
                        "table": {
                            "widths": [
                                "*"
                            ],
                            "heights": [
                                716
                            ],
                            "body": [
                                [{
                                    "text": [
                                        "08:00 - 20:00\n"
                                    ],
                                    "fillColor": "#ffffff",
                                    "color": "#000000"
                                }]
                            ]
                        },
                        "style": "slotsTable",
                        "layout": {}
                    }]
                ]
            ],
            "widths": "*"
        },
        "style": "daysTable"
    }],
    "pageSize": "A4",
    "pageOrientation": "landscape",
    "styles": {
        "slotsTable": {
            "fontSize": 9
        },
        "daysTable": {
            "fontSize": 9
        },
        "dayCell": {
            "margin": 0,
            "padding": 0
        }
    }
}
weisborg commented 4 years ago

I think this may be the closest example to the problem I'm having too. I'm trying to use a table to create labels. Currently it is configured to be "heights": 144, "widths": [120, 168], and margins on the page are all half inch (36). The label is to be 2 inches tall and 4 inches wide with a Data Matrix svg barcode on the left side and Descriptive text on the right. The data itself Prints fine. None of the content is big enough to extend the heights, so I expect exactly 5 labels on a page. I get that on page one and if I tell it to render grid lines I see them all, but it is like page 2 adds margin height or something to the height of the first label making it taller and shifting everything else down. If I render grid lines page 2 and beyond no longer have the bottom line and it seems like the first rows on all following pages get taller and taller.

I tried adding dontBreakRows: true, and I guess it works by making it print 4 per page. Seems like something isn't exact. When I look at the inner page height in the JSON after the page is created it says 10 inches. I tried setting a 0 margin on the table too, but no luck. I still have the big white space at the bottom.