alihassan143 / htmltopdfwidgets

Html To Pdf
https://pub.dev/packages/htmltopdfwidgets
Apache License 2.0
12 stars 18 forks source link

Tables not displayed #26

Closed wilrojasdev closed 6 months ago

wilrojasdev commented 7 months ago

Issue:

I'm encountering an issue where tables from HTML content are not being displayed properly in the generated PDF document. According to the library documentation, tables are supported, but in my case, they are not rendering. I'm using the latest version of the package.

Steps to Reproduce:

final widgets = await HTMLToPdf().convert( htmlContent, fontFallback: [Font.helvetica(), Font.helveticaBold()], ); newPdf.addPage( pw.MultiPage( build: (pw.Context context) { return widgets; }, ), );

Expected Result:

image

Current Result:

image

Additional Information:

I'm using the latest version of the htmltopdfwidgets package. Attached is a snippet of HTML code containing a table that is not displayed correctly in the PDF: <div style="width: 9cm; padding: 0 3px;"><h2 style="text-align: center;">Dinefy</h2><p style="text-align: center;">carrera 13 9-04 versalles | 3115314971 | Florencia</p><p style="text-align: center;">NIT: 6803628<p>Recibo No: Recibo-68</p><p>Fecha: 1/25/2024 4:27:56 PM</p><p>Cliente: Menor Cuantia</p> <table style="width: 100%; border-collapse: collapse; border-bottom: 1px solid black;"><tr style="border: 1px solid black;"><th style="text-align: left; width: 15%;">Cant.</th><th style="text-align: left;">Descripción</th><th style="text-align: right;padding-right:3px;">Valor</th></tr><tr><td style="text-align: left;">2</td><td style="text-align: left;">Todas</td><td style="text-align: right;">6000</td></tr><tr><td style="text-align: left;">4</td><td style="text-align: left;">Adición de pan</td><td style="text-align: right;">4000</td></tr><tr><td style="text-align: left;">2</td><td style="text-align: left;">Vegetariana</td><td style="text-align: right;">17000</td></tr><tr><td style="text-align: left;">1</td><td style="text-align: left;">Jugo hit gopack</td><td style="text-align: right;">3500</td></tr></table><div style="float: right; border-left: 1px solid black; border-right: 1px solid black; border-bottom: 1px solid black; width: 50%; margin-top: -1px; margin-bottom: 3px;"><div style="float: left; width: 50%;"><p style="text-align: right;">Total:</p></div><div style="float: right; width: 50%;"><p style="text-align: right;padding-right:3px;">30500</p></div></div></div>

alihassan143 commented 7 months ago

@wilrojasdev thanks for the issue but currently issue is that you wrapped whole code in div that making issue for now

Dinefy

carrera 13 9-04 versalles | 3115314971 | Florencia

NIT: 6803628

Recibo No: Recibo-68

Fecha: 1/25/2024 4:27:56 PM

Cliente: Menor Cuantia

Cant. Descripción Valor
2 Todas 6000
4 Adición de pan 4000
2 Vegetariana 17000
1 Jugo hit gopack 3500

Total:

30500

if you just remove parent widget everything become clear but i will try to fix this issue
alihassan143 commented 7 months ago

image

alihassan143 commented 7 months ago

currently covering different css samples quite complex but i will add them one by one after some time