search

pdfme / pdfme

A TypeScript based PDF generator library, made with React.
https://pdfme.com
MIT License
2.16k stars 192 forks source link

Generate PDF creating blank pages when trying to render tables (v4 branch) #470

Open hlin-neo4j opened 1 month ago

hlin-neo4j commented 1 month ago

Describe the bug

With the below template json, I've set up 10 pages each with a single table, column, and text. On playground, generating the template gives back 10 blank pages.

To Reproduce

  1. Run Playground on v4 branch and Load Template with the below json file.
  2. Click Generate PDF 
    {
"schemas": [
{
  "table0_0": {
    "type": "table",
    "position": {
      "x": 20,
      "y": 20
    },
    "width": 70,
    "height": 107.1416,
    "head": ["m0.summary_text"],
    "content": "[[\"000000LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT, SED DO EIUSMOD TEMPOR INCIDIDUNT UT LABORE ET DOLORE MAGNA ALIQUA. UT ENIM AD MINIM VENIAM, QUIS NOSTRUD EXERCITATION ULLAMCO LABORIS NISI UT ALIQUIP EX EA COMMODO CONSEQUAT. DUIS AUTE IRURE DOLOR IN REPREHENDERIT IN VOLUPTATE VELIT ESSE CILLUM DOLORE EU FUGIAT NULLA PARIATUR. EXCEPTEUR SINT OCCAECAT CUPIDATAT NON PROIDENT, \"]]",
    "headWidthPercentages": [100],
    "showHead": true,
    "tableStyles": {
      "borderColor": "#000000",
      "borderWidth": 0.3
    },
    "headStyles": {
      "alignment": "left",
      "verticalAlignment": "middle",
      "fontSize": 13,
      "lineHeight": 1,
      "characterSpacing": 0,
      "fontColor": "#ffffff",
      "backgroundColor": "#2980ba",
      "borderColor": "",
      "borderWidth": {
        "top": 0,
        "right": 0,
        "bottom": 0,
        "left": 0
      },
      "padding": {
        "top": 5,
        "bottom": 5,
        "left": 5,
        "right": 5
      }
    },
    "bodyStyles": {
      "alignment": "left",
      "verticalAlignment": "middle",
      "fontSize": 13,
      "lineHeight": 1,
      "characterSpacing": 0,
      "fontColor": "#000000",
      "backgroundColor": "",
      "borderColor": "#888888",
      "borderWidth": {
        "top": 0.1,
        "bottom": 0.1,
        "left": 0.1,
        "right": 0.1
      },
      "padding": {
        "top": 5,
        "bottom": 5,
        "left": 5,
        "right": 5
      },
      "alternateBackgroundColor": "#f5f5f5"
    },
    "columnStyles": {}
  }
},
{
  "table0_1": {
    "type": "table",
    "position": {
      "x": 20,
      "y": 20
    },
    "width": 70,
    "height": 107.1416,
    "head": ["m0.summary_text"],
    "content": "[[\"1LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT, SED DO EIUSMOD TEMPOR INCIDIDUNT UT LABORE ET DOLORE MAGNA ALIQUA. UT ENIM AD MINIM VENIAM, QUIS NOSTRUD EXERCITATION ULLAMCO LABORIS NISI UT ALIQUIP EX EA COMMODO CONSEQUAT. DUIS AUTE IRURE DOLOR IN REPREHENDERIT IN VOLUPTATE VELIT ESSE CILLUM\"]]",
    "headWidthPercentages": [100],
    "showHead": true,
    "tableStyles": {
      "borderColor": "#000000",
      "borderWidth": 0.3
    },
    "headStyles": {
      "alignment": "left",
      "verticalAlignment": "middle",
      "fontSize": 13,
      "lineHeight": 1,
      "characterSpacing": 0,
      "fontColor": "#ffffff",
      "backgroundColor": "#2980ba",
      "borderColor": "",
      "borderWidth": {
        "top": 0,
        "right": 0,
        "bottom": 0,
        "left": 0
      },
      "padding": {
        "top": 5,
        "bottom": 5,
        "left": 5,
        "right": 5
      }
    },
    "bodyStyles": {
      "alignment": "left",
      "verticalAlignment": "middle",
      "fontSize": 13,
      "lineHeight": 1,
      "characterSpacing": 0,
      "fontColor": "#000000",
      "backgroundColor": "",
      "borderColor": "#888888",
      "borderWidth": {
        "top": 0.1,
        "bottom": 0.1,
        "left": 0.1,
        "right": 0.1
      },
      "padding": {
        "top": 5,
        "bottom": 5,
        "left": 5,
        "right": 5
      },
      "alternateBackgroundColor": "#f5f5f5"
    },
    "columnStyles": {}
  }
},
{
  "table0_2": {
    "type": "table",
    "position": {
      "x": 20,
      "y": 20
    },
    "width": 70,
    "height": 107.1416,
    "head": ["m0.summary_text"],
    "content": "[[\"2LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT, SED DO EIUSMOD TEMPOR INCIDIDUNT UT LABORE ET DOLORE MAGNA ALIQUA. UT ENIM AD MINIM VENIAM, QUIS NOSTRUD EXERCITATION ULLAMCO LABORIS NISI UT ALIQUIP EX EA COMMODO CONSEQUAT. DUIS AUTE IRURE DOLOR IN REPREHENDERIT IN VOLUPTATE VELIT ESSE CILLUM\"]]",
    "headWidthPercentages": [100],
    "showHead": true,
    "tableStyles": {
      "borderColor": "#000000",
      "borderWidth": 0.3
    },
    "headStyles": {
      "alignment": "left",
      "verticalAlignment": "middle",
      "fontSize": 13,
      "lineHeight": 1,
      "characterSpacing": 0,
      "fontColor": "#ffffff",
      "backgroundColor": "#2980ba",
      "borderColor": "",
      "borderWidth": {
        "top": 0,
        "right": 0,
        "bottom": 0,
        "left": 0
      },
      "padding": {
        "top": 5,
        "bottom": 5,
        "left": 5,
        "right": 5
      }
    },
    "bodyStyles": {
      "alignment": "left",
      "verticalAlignment": "middle",
      "fontSize": 13,
      "lineHeight": 1,
      "characterSpacing": 0,
      "fontColor": "#000000",
      "backgroundColor": "",
      "borderColor": "#888888",
      "borderWidth": {
        "top": 0.1,
        "bottom": 0.1,
        "left": 0.1,
        "right": 0.1
      },
      "padding": {
        "top": 5,
        "bottom": 5,
        "left": 5,
        "right": 5
      },
      "alternateBackgroundColor": "#f5f5f5"
    },
    "columnStyles": {}
  }
},
{
  "table0_3": {
    "type": "table",
    "position": {
      "x": 20,
      "y": 20
    },
    "width": 70,
    "height": 107.1416,
    "head": ["m0.summary_text"],
    "content": "[[\"3LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT, SED DO EIUSMOD TEMPOR INCIDIDUNT UT LABORE ET DOLORE MAGNA ALIQUA. UT ENIM AD MINIM VENIAM, QUIS NOSTRUD EXERCITATION ULLAMCO LABORIS NISI UT ALIQUIP EX EA COMMODO CONSEQUAT. DUIS AUTE IRURE DOLOR IN REPREHENDERIT IN VOLUPTATE VELIT ESSE CILLUM\"]]",
    "headWidthPercentages": [100],
    "showHead": true,
    "tableStyles": {
      "borderColor": "#000000",
      "borderWidth": 0.3
    },
    "headStyles": {
      "alignment": "left",
      "verticalAlignment": "middle",
      "fontSize": 13,
      "lineHeight": 1,
      "characterSpacing": 0,
      "fontColor": "#ffffff",
      "backgroundColor": "#2980ba",
      "borderColor": "",
      "borderWidth": {
        "top": 0,
        "right": 0,
        "bottom": 0,
        "left": 0
      },
      "padding": {
        "top": 5,
        "bottom": 5,
        "left": 5,
        "right": 5
      }
    },
    "bodyStyles": {
      "alignment": "left",
      "verticalAlignment": "middle",
      "fontSize": 13,
      "lineHeight": 1,
      "characterSpacing": 0,
      "fontColor": "#000000",
      "backgroundColor": "",
      "borderColor": "#888888",
      "borderWidth": {
        "top": 0.1,
        "bottom": 0.1,
        "left": 0.1,
        "right": 0.1
      },
      "padding": {
        "top": 5,
        "bottom": 5,
        "left": 5,
        "right": 5
      },
      "alternateBackgroundColor": "#f5f5f5"
    },
    "columnStyles": {}
  }
},
{
  "table0_4": {
    "type": "table",
    "position": {
      "x": 20,
      "y": 20
    },
    "width": 70,
    "height": 107.1416,
    "head": ["m0.summary_text"],
    "content": "[[\"4LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT, SED DO EIUSMOD TEMPOR INCIDIDUNT UT LABORE ET DOLORE MAGNA ALIQUA. UT ENIM AD MINIM VENIAM, QUIS NOSTRUD EXERCITATION ULLAMCO LABORIS NISI UT ALIQUIP EX EA COMMODO CONSEQUAT. DUIS AUTE IRURE DOLOR IN REPREHENDERIT IN VOLUPTATE VELIT ESSE CILLUM\"]]",
    "headWidthPercentages": [100],
    "showHead": true,
    "tableStyles": {
      "borderColor": "#000000",
      "borderWidth": 0.3
    },
    "headStyles": {
      "alignment": "left",
      "verticalAlignment": "middle",
      "fontSize": 13,
      "lineHeight": 1,
      "characterSpacing": 0,
      "fontColor": "#ffffff",
      "backgroundColor": "#2980ba",
      "borderColor": "",
      "borderWidth": {
        "top": 0,
        "right": 0,
        "bottom": 0,
        "left": 0
      },
      "padding": {
        "top": 5,
        "bottom": 5,
        "left": 5,
        "right": 5
      }
    },
    "bodyStyles": {
      "alignment": "left",
      "verticalAlignment": "middle",
      "fontSize": 13,
      "lineHeight": 1,
      "characterSpacing": 0,
      "fontColor": "#000000",
      "backgroundColor": "",
      "borderColor": "#888888",
      "borderWidth": {
        "top": 0.1,
        "bottom": 0.1,
        "left": 0.1,
        "right": 0.1
      },
      "padding": {
        "top": 5,
        "bottom": 5,
        "left": 5,
        "right": 5
      },
      "alternateBackgroundColor": "#f5f5f5"
    },
    "columnStyles": {}
  }
},
{
  "table0_5": {
    "type": "table",
    "position": {
      "x": 20,
      "y": 20
    },
    "width": 70,
    "height": 107.1416,
    "head": ["m0.summary_text"],
    "content": "[[\"5LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT, SED DO EIUSMOD TEMPOR INCIDIDUNT UT LABORE ET DOLORE MAGNA ALIQUA. UT ENIM AD MINIM VENIAM, QUIS NOSTRUD EXERCITATION ULLAMCO LABORIS NISI UT ALIQUIP EX EA COMMODO CONSEQUAT. DUIS AUTE IRURE DOLOR IN REPREHENDERIT IN VOLUPTATE VELIT ESSE CILLUM\"]]",
    "headWidthPercentages": [100],
    "showHead": true,
    "tableStyles": {
      "borderColor": "#000000",
      "borderWidth": 0.3
    },
    "headStyles": {
      "alignment": "left",
      "verticalAlignment": "middle",
      "fontSize": 13,
      "lineHeight": 1,
      "characterSpacing": 0,
      "fontColor": "#ffffff",
      "backgroundColor": "#2980ba",
      "borderColor": "",
      "borderWidth": {
        "top": 0,
        "right": 0,
        "bottom": 0,
        "left": 0
      },
      "padding": {
        "top": 5,
        "bottom": 5,
        "left": 5,
        "right": 5
      }
    },
    "bodyStyles": {
      "alignment": "left",
      "verticalAlignment": "middle",
      "fontSize": 13,
      "lineHeight": 1,
      "characterSpacing": 0,
      "fontColor": "#000000",
      "backgroundColor": "",
      "borderColor": "#888888",
      "borderWidth": {
        "top": 0.1,
        "bottom": 0.1,
        "left": 0.1,
        "right": 0.1
      },
      "padding": {
        "top": 5,
        "bottom": 5,
        "left": 5,
        "right": 5
      },
      "alternateBackgroundColor": "#f5f5f5"
    },
    "columnStyles": {}
  }
},
{
  "table0_6": {
    "type": "table",
    "position": {
      "x": 20,
      "y": 20
    },
    "width": 70,
    "height": 107.1416,
    "head": ["m0.summary_text"],
    "content": "[[\"6LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT, SED DO EIUSMOD TEMPOR INCIDIDUNT UT LABORE ET DOLORE MAGNA ALIQUA. UT ENIM AD MINIM VENIAM, QUIS NOSTRUD EXERCITATION ULLAMCO LABORIS NISI UT ALIQUIP EX EA COMMODO CONSEQUAT. DUIS AUTE IRURE DOLOR IN REPREHENDERIT IN VOLUPTATE VELIT ESSE CILLUM\"]]",
    "headWidthPercentages": [100],
    "showHead": true,
    "tableStyles": {
      "borderColor": "#000000",
      "borderWidth": 0.3
    },
    "headStyles": {
      "alignment": "left",
      "verticalAlignment": "middle",
      "fontSize": 13,
      "lineHeight": 1,
      "characterSpacing": 0,
      "fontColor": "#ffffff",
      "backgroundColor": "#2980ba",
      "borderColor": "",
      "borderWidth": {
        "top": 0,
        "right": 0,
        "bottom": 0,
        "left": 0
      },
      "padding": {
        "top": 5,
        "bottom": 5,
        "left": 5,
        "right": 5
      }
    },
    "bodyStyles": {
      "alignment": "left",
      "verticalAlignment": "middle",
      "fontSize": 13,
      "lineHeight": 1,
      "characterSpacing": 0,
      "fontColor": "#000000",
      "backgroundColor": "",
      "borderColor": "#888888",
      "borderWidth": {
        "top": 0.1,
        "bottom": 0.1,
        "left": 0.1,
        "right": 0.1
      },
      "padding": {
        "top": 5,
        "bottom": 5,
        "left": 5,
        "right": 5
      },
      "alternateBackgroundColor": "#f5f5f5"
    },
    "columnStyles": {}
  }
},
{
  "table0_7": {
    "type": "table",
    "position": {
      "x": 20,
      "y": 20
    },
    "width": 70,
    "height": 107.1416,
    "head": ["m0.summary_text"],
    "content": "[[\"7LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT, SED DO EIUSMOD TEMPOR INCIDIDUNT UT LABORE ET DOLORE MAGNA ALIQUA. UT ENIM AD MINIM VENIAM, QUIS NOSTRUD EXERCITATION ULLAMCO LABORIS NISI UT ALIQUIP EX EA COMMODO CONSEQUAT. DUIS AUTE IRURE DOLOR IN REPREHENDERIT IN VOLUPTATE VELIT ESSE CILLUM\"]]",
    "headWidthPercentages": [100],
    "showHead": true,
    "tableStyles": {
      "borderColor": "#000000",
      "borderWidth": 0.3
    },
    "headStyles": {
      "alignment": "left",
      "verticalAlignment": "middle",
      "fontSize": 13,
      "lineHeight": 1,
      "characterSpacing": 0,
      "fontColor": "#ffffff",
      "backgroundColor": "#2980ba",
      "borderColor": "",
      "borderWidth": {
        "top": 0,
        "right": 0,
        "bottom": 0,
        "left": 0
      },
      "padding": {
        "top": 5,
        "bottom": 5,
        "left": 5,
        "right": 5
      }
    },
    "bodyStyles": {
      "alignment": "left",
      "verticalAlignment": "middle",
      "fontSize": 13,
      "lineHeight": 1,
      "characterSpacing": 0,
      "fontColor": "#000000",
      "backgroundColor": "",
      "borderColor": "#888888",
      "borderWidth": {
        "top": 0.1,
        "bottom": 0.1,
        "left": 0.1,
        "right": 0.1
      },
      "padding": {
        "top": 5,
        "bottom": 5,
        "left": 5,
        "right": 5
      },
      "alternateBackgroundColor": "#f5f5f5"
    },
    "columnStyles": {}
  }
},
{
  "table0_8": {
    "type": "table",
    "position": {
      "x": 20,
      "y": 20
    },
    "width": 70,
    "height": 107.1416,
    "head": ["m0.summary_text"],
    "content": "[[\"8LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT, SED DO EIUSMOD TEMPOR INCIDIDUNT UT LABORE ET DOLORE MAGNA ALIQUA. UT ENIM AD MINIM VENIAM, QUIS NOSTRUD EXERCITATION ULLAMCO LABORIS NISI UT ALIQUIP EX EA COMMODO CONSEQUAT. DUIS AUTE IRURE DOLOR IN REPREHENDERIT IN VOLUPTATE VELIT ESSE CILLUM\"]]",
    "headWidthPercentages": [100],
    "showHead": true,
    "tableStyles": {
      "borderColor": "#000000",
      "borderWidth": 0.3
    },
    "headStyles": {
      "alignment": "left",
      "verticalAlignment": "middle",
      "fontSize": 13,
      "lineHeight": 1,
      "characterSpacing": 0,
      "fontColor": "#ffffff",
      "backgroundColor": "#2980ba",
      "borderColor": "",
      "borderWidth": {
        "top": 0,
        "right": 0,
        "bottom": 0,
        "left": 0
      },
      "padding": {
        "top": 5,
        "bottom": 5,
        "left": 5,
        "right": 5
      }
    },
    "bodyStyles": {
      "alignment": "left",
      "verticalAlignment": "middle",
      "fontSize": 13,
      "lineHeight": 1,
      "characterSpacing": 0,
      "fontColor": "#000000",
      "backgroundColor": "",
      "borderColor": "#888888",
      "borderWidth": {
        "top": 0.1,
        "bottom": 0.1,
        "left": 0.1,
        "right": 0.1
      },
      "padding": {
        "top": 5,
        "bottom": 5,
        "left": 5,
        "right": 5
      },
      "alternateBackgroundColor": "#f5f5f5"
    },
    "columnStyles": {}
  }
},
{
  "table0_9": {
    "type": "table",
    "position": {
      "x": 20,
      "y": 20
    },
    "width": 70,
    "height": 107.1416,
    "head": ["m0.summary_text"],
    "content": "[[\"9LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISCING ELIT, SED DO EIUSMOD TEMPOR INCIDIDUNT UT LABORE ET DOLORE MAGNA ALIQUA. UT ENIM AD MINIM VENIAM, QUIS NOSTRUD EXERCITATION ULLAMCO LABORIS NISI UT ALIQUIP EX EA COMMODO CONSEQUAT. DUIS AUTE IRURE DOLOR IN REPREHENDERIT IN VOLUPTATE VELIT ESSE CILLUM\"]]",
    "headWidthPercentages": [100],
    "showHead": true,
    "tableStyles": {
      "borderColor": "#000000",
      "borderWidth": 0.3
    },
    "headStyles": {
      "alignment": "left",
      "verticalAlignment": "middle",
      "fontSize": 13,
      "lineHeight": 1,
      "characterSpacing": 0,
      "fontColor": "#ffffff",
      "backgroundColor": "#2980ba",
      "borderColor": "",
      "borderWidth": {
        "top": 0,
        "right": 0,
        "bottom": 0,
        "left": 0
      },
      "padding": {
        "top": 5,
        "bottom": 5,
        "left": 5,
        "right": 5
      }
    },
    "bodyStyles": {
      "alignment": "left",
      "verticalAlignment": "middle",
      "fontSize": 13,
      "lineHeight": 1,
      "characterSpacing": 0,
      "fontColor": "#000000",
      "backgroundColor": "",
      "borderColor": "#888888",
      "borderWidth": {
        "top": 0.1,
        "bottom": 0.1,
        "left": 0.1,
        "right": 0.1
      },
      "padding": {
        "top": 5,
        "bottom": 5,
        "left": 5,
        "right": 5
      },
      "alternateBackgroundColor": "#f5f5f5"
    },
    "columnStyles": {}
  }
}
],
"basePdf": {
"width": 210,
"height": 297,
"padding": [20, 20, 20, 20]
},
"pdfmeVersion": "4-dev"
}

Expected behavior

Render the pages each with the tables as configured.

Your Environment

- pdfme package(@pdfme/generator or @pdfme/ui): v4, pdfme
- pdfme version: branch v4, commit e47202e76c42014df28cacf60574a65de7e05a51
- Operating system: Macos Sonoma 14.4.1
- Node.js version or Browser name & version: node 20.10.0

Your Error Log

No error log

Additional context

I think it could be related to the "height" property of the table schemas not getting dynamically resized properly? Also, if you resize the table on the second page, the Generate PDF will correctly render.

hlin-neo4j commented 1 month ago

After some more debugging, I'm finding that setting the heights to 0 does the trick to fix it... so far.