search

Aymkdn / html-to-pdfmake

This module permits to convert HTML to the PDFMake format
https://aymkdn.github.io/html-to-pdfmake/index.html
MIT License
545 stars 88 forks source link

Bug: Table widths parsing issue #206

Closed luicfrr closed 6 months ago

luicfrr commented 6 months ago

Hello, thanks for your awesome project

I'm facing a table widths parsing issue. I'm using a wysiwyg editor to generate my html template and this is the html table I'm getting:

<table style="border-collapse: collapse; width: 80%; height: 40px;" border="1">
  <colgroup>
    <col style="width: 50%;">
    <col style="width: 50%;">
  </colgroup>
  <tbody>
    <tr style="height: 20px;">
      <td style="background-color: rgb(251, 238, 184); border: 1px solid rgb(241, 196, 15); height: 20px;">
        col 1-1
      </td>
      <td style="background-color: rgb(248, 202, 198); text-align: right; border: 2px solid rgb(224, 62, 45); height: 20;">
        col 1-2
      </td>
    </tr>
    <tr style="height: 20px;">
      <td style="border-image: initial; height: 20px; text-align: center;">
        col 2-1
      </td>
      <td style="border-image: initial; height: 20px; text-align: justify;">
        col 2-2
      </td>
    </tr>
  </tbody>
</table>

But after parsing it to PDFMake my table is not taking 80% of pdf width as shown in image bellow: Captura de Tela 2024-03-01 às 14 03 41

After some tests with parsed result I've noticed that if I change table.widths to [ "40%", "40%" ] my table is now at correct 80% of screen size. I think this is something related to size parsing.

Here's my both parsed tables together (top table is original parsed and bellow is modificated):

var dd = {
  "content": [
    {
      "nodeName": "TABLE",
      "marginBottom": 5,
      "borderCollapse": "collapse",
      "width": "80%",
      "height": 30,
      "style": [
        "html-table"
      ],
      "table": {
        "body": [
          [
            {
              "text": " col 1-1 ",
              "nodeName": "TD",
              "borderCollapse": "collapse",
              "height": 15,
              "fillColor": "#fbeeb8",
              "border": [
                true,
                true,
                true,
                true
              ],
              "borderColor": [
                "#f1c40f",
                "#f1c40f",
                "#f1c40f",
                "#f1c40f"
              ],
              "style": [
                "html-td",
                "html-tr",
                "html-tbody",
                "html-table"
              ]
            },
            {
              "text": " col 1-2 ",
              "nodeName": "TD",
              "borderCollapse": "collapse",
              "height": 20,
              "fillColor": "#f8cac6",
              "alignment": "right",
              "border": [
                true,
                true,
                true,
                true
              ],
              "borderColor": [
                "#e03e2d",
                "#e03e2d",
                "#e03e2d",
                "#e03e2d"
              ],
              "style": [
                "html-td",
                "html-tr",
                "html-tbody",
                "html-table"
              ]
            }
          ],
          [
            {
              "text": " col 2-1 ",
              "nodeName": "TD",
              "borderCollapse": "collapse",
              "height": 15,
              "borderImage": "initial",
              "alignment": "center",
              "style": [
                "html-td",
                "html-tr",
                "html-tbody",
                "html-table"
              ]
            },
            {
              "text": " col 2-2 ",
              "nodeName": "TD",
              "borderCollapse": "collapse",
              "height": 15,
              "borderImage": "initial",
              "alignment": "justify",
              "style": [
                "html-td",
                "html-tr",
                "html-tbody",
                "html-table"
              ]
            }
          ]
        ],
        "widths": [
          "auto",
          "auto"
        ],
        "heights": [
          20,
          15
        ]
      }
    },
    {
      "nodeName": "TABLE",
      "marginBottom": 5,
      "borderCollapse": "collapse",
      "width": "80%",
      "height": 30,
      "style": [
        "html-table"
      ],
      "table": {
        "body": [
          [
            {
              "text": " col 1-1 ",
              "nodeName": "TD",
              "borderCollapse": "collapse",
              "height": 15,
              "fillColor": "#fbeeb8",
              "border": [
                true,
                true,
                true,
                true
              ],
              "borderColor": [
                "#f1c40f",
                "#f1c40f",
                "#f1c40f",
                "#f1c40f"
              ],
              "style": [
                "html-td",
                "html-tr",
                "html-tbody",
                "html-table"
              ]
            },
            {
              "text": " col 1-2 ",
              "nodeName": "TD",
              "borderCollapse": "collapse",
              "height": 20,
              "fillColor": "#f8cac6",
              "alignment": "right",
              "border": [
                true,
                true,
                true,
                true
              ],
              "borderColor": [
                "#e03e2d",
                "#e03e2d",
                "#e03e2d",
                "#e03e2d"
              ],
              "style": [
                "html-td",
                "html-tr",
                "html-tbody",
                "html-table"
              ]
            }
          ],
          [
            {
              "text": " col 2-1 ",
              "nodeName": "TD",
              "borderCollapse": "collapse",
              "height": 15,
              "borderImage": "initial",
              "alignment": "center",
              "style": [
                "html-td",
                "html-tr",
                "html-tbody",
                "html-table"
              ]
            },
            {
              "text": " col 2-2 ",
              "nodeName": "TD",
              "borderCollapse": "collapse",
              "height": 15,
              "borderImage": "initial",
              "alignment": "justify",
              "style": [
                "html-td",
                "html-tr",
                "html-tbody",
                "html-table"
              ]
            }
          ]
        ],
        "widths": [
          "40%",
          "40%"
        ],
        "heights": [
          20,
          15
        ]
      }
    }
  ]
}

I think this leads us to another problem of: if a table is width: 80% and a table row is width: 30% so in screen it should be 30% of table's 80%.

Aymkdn commented 6 months ago

Define the width of a table is super tricky.

An easy fix for your case is to add the attribute data-pdfmake="{'widths':['40%','40%']}" to the <table>. Autocalculate this width seems to much complex to be reliable...

github-actions[bot] commented 6 months ago

This issue has been automatically closed because the requestor didn't provide any additional comment.