Comments (5)
Aymkdn
commented on August 28, 2024
1
You HTML code is still dirty.... The correct code is:
<table width="363">
<tbody>
<tr height="19">
<td height="82" width="25">Sr.</td>
<td width="212">Title</td>
<td width="126">DESC<br>?( Description )</td>
</tr>
<tr height="42">
<td height="84" rowspan="2" width="25">1</td>
<td rowspan="2" width="212">Test 1</td>
<td width="126">Test 1 Desc</td>
</tr>
<tr height="42">
<td height="42" width="126">Test 1 Desc 2</td>
</tr>
<tr height="84">
<td height="172" rowspan="2" width="25">2</td>
<td rowspan="2" width="212">Test 2</td>
<td width="126">Test 2 Desc</td>
</tr>
<tr height="88">
<td height="88" width="126">Test 2 Desc 2</td>
</tr>
</tbody>
</table>That renders as the below:
| Sr. | Title | DESC ?( Description ) |
| 1 | Test 1 | Test 1 Desc |
| Test 1 Desc 2 | ||
| 2 | Test 2 | Test 2 Desc |
| Test 2 Desc 2 |
And in the PDF:
Please note that PDFMake doesn't support width and height on cells but it will only apply the same width or height to all columns/rows (see section "tables" from the PDFMake Playground).
So, in your case it might be necessary to play with special properties. Example:
<!-- the important part is the `data-pdfmake` that defines the width for each column ([25,212,126]) and the height each row ([19,42,42,42,42]) ––>
<table data-pdfmake="{"widths":[25,212,126],"heights":[19,42,42,42,42]}">
<tbody>
<tr height="19">
<td height="82" width="25">Sr.</td>
<td width="212">Title</td>
<td width="126">DESC<br>?( Description )</td>
</tr>
<tr height="42">
<td height="84" rowspan="2" width="25">1</td>
<td rowspan="2" width="212">Test 1</td>
<td width="126">Test 1 Desc</td>
</tr>
<tr height="42">
<td height="42" width="126">Test 1 Desc 2</td>
</tr>
<tr height="84">
<td height="172" rowspan="2" width="25">2</td>
<td rowspan="2" width="212">Test 2</td>
<td width="126">Test 2 Desc</td>
</tr>
<tr height="88">
<td height="88" width="126">Test 2 Desc 2</td>
</tr>
</tbody>
</table>The result in the PDF:
from html-to-pdfmake.
Aymkdn
commented on August 28, 2024
It would have been nice to use a greeting, followed by a sentence, and even maybe a "thank you" at some point.
This module is to transform HTML to PDFMake language, then PDFMake will do the hard work. The purpose of this tool is not to handle all CSS properties that exist today, especially when it becomes complicated design.
When I test your code, I can see you use a lot of CSS styles, and many of them are not compatible with what PDFMake support. Something as simple as border:none should be border:0 to make it work with PDFMake.
Also you use colgroup and col that are not supported... and to make things even worse, you use plenty of unnacessary nested tags and styles.
Long story short: your code is way too much complicated to be magically handled by html-to-pdfmake. It could be greatly simplify to make it work.
from html-to-pdfmake.
kiranpandhure
commented on August 28, 2024
Thank you for your response but even after removing colgroup i am getting error
from html-to-pdfmake.
Aymkdn
commented on August 28, 2024
As I said, colgroup is only one of the many problems.
Long story short: your code is way too much complicated to be magically handled by
html-to-pdfmake. It could be greatly simplify to make it work.
from html-to-pdfmake.
kiranpandhure
commented on August 28, 2024
Thank for your response as per your findings i have removed colgroup and simplified html but still it gives me error of _calwidth as earlier i have posted with screenshot.
| Sr. | Title | DESC ?( Description ) |
| 1 | Test 1 | Test 1 Desc |
| Test 1 Desc 2 | ||
| 2 | Test 2 | Test 2 Desc |
| Test 2 Desc 2 |
from html-to-pdfmake.
Related Issues (20)
- img breaks line HOT 1
- lineHeight property handling HOT 5
- Feature request: handle and support invalid image HOT 1
- Issue with list items not rendering HOT 3
- Feature Request: HOT 2
- line-height issue HOT 3
- Bug: Table widths parsing issue HOT 2
- Dynamic table widths update HOT 11
- ErrorHandler: TypeError: cellWidth.replace is not a function at index.js:385:105 HOT 5
- Copying and pasting the text "finally" from the PDF and the letter "i" is not included when pasted HOT 1
- Bug: Newlines get inserted after images where they actually shouldn't be HOT 1
- Adding Extra Space in-between HOT 4
- rgba colors parsed incorrectly HOT 1
- I want to load HTML content on top and image information below of that HOT 4
- React native HOT 7
- Displaying footer on everypage when generating PDF through HTML HOT 1
- page-break-inside: avoid; doesn't work when generating PDF from html HOT 1
- Use of "white-space:nowrap" HOT 1
- Cannot convert html tag with !important on style properties, resulting error in pdfmake HOT 2
- PDFmake does not support the rgba format, so black text displayed as a blue text HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from html-to-pdfmake.