Comments (12)
I'm not at home this weekend so I cannot test, but it's probably something in your code that is causing this issue....
I'll do a test on Monday
from html-to-pdfmake.
Could be, mind you all other elements work fine it's just the 'hr' and I've not applied any styling to it just to be sure that it's not me, so it's all doing this with default setup.
Regards
from html-to-pdfmake.
I tried to reproduce your issue but I cannot.
Can you check the content of docDefinition
and spot the difference between your first attempt and the second one? That might help understand what's going on.
from html-to-pdfmake.
Thanks for checking Aymkdn, unfortunately that did not lead to anything, the docDefinition objects in both instances look the same:
from html-to-pdfmake.
Can you check the code coming from html-to-pdfmake
? Because you're showing how the docDefinition
looks like after pdfmake
has changed it. Using something like JSON.stringify(docDefinition)
.
from html-to-pdfmake.
Actually, show JSON.stringify(html)
, and not docDefinition
from html-to-pdfmake.
OK, we have different results between the first and second open.
Here's the first:
JSON.stringify(html): [{"nodeName":"DIV","stack":[{"text":"My title","nodeName":"H1","fontSize":24,"bold":true,"marginBottom":5,"style":["html-h1","html-div"]},{"text":"This is some example content...","nodeName":"P","margin":[0,5,0,10],"style":["html-p","html-div"]},{"nodeName":"HR","margin":[0,12,0,12],"canvas":[{"type":"line","x1":0,"y1":0,"x2":514,"y2":0,"lineWidth":0.5,"lineColor":"#000000"}]}]}] breadcrumbs.ts:103
here's the 2nd:
JSON.stringify(html): [{"nodeName":"DIV","stack":[{"text":"My title","nodeName":"H1","fontSize":24,"bold":true,"marginBottom":5,"style":["html-h1","html-div"],"_margin":[0,0,0,5],"_inlines":[],"_minWidth":41.09765625,"_maxWidth":79.76953125,"positions":[{"pageNumber":1,"pageOrientation":"portrait","pageInnerHeight":761.89,"pageInnerWidth":515.28,"left":40,"top":40,"verticalRatio":0,"horizontalRatio":0}]},{"text":"This is some example content...","nodeName":"P","margin":[0,5,0,10],"style":["html-p","html-div"],"_margin":[0,5,0,10],"_inlines":[],"_minWidth":50.0390625,"_maxWidth":169.1484375,"positions":[{"pageNumber":1,"pageOrientation":"portrait","pageInnerHeight":761.89,"pageInnerWidth":515.28,"left":40,"top":78.125,"verticalRatio":0.0500400320256205,"horizontalRatio":0}]},{"nodeName":"HR","margin":[0,12,0,12],"canvas":[{"type":"line","x1":40,"y1":114.1875,"x2":554,"y2":114.1875,"lineWidth":0.5,"lineColor":"#000000"}],"_margin":[0,12,0,12],"_maxWidth":514,"_minWidth":514,"_maxHeight":0,"_minHeight":0,"positions":[{"pageNumber":1,"pageOrientation":"portrait","pageInnerHeight":761.89,"pageInnerWidth":515.28,"left":40,"top":114.1875,"verticalRatio":0.09737298035149432,"horizontalRatio":0}]}],"_margin":null,"_minWidth":514,"_maxWidth":514,"positions":[{"pageNumber":1,"pageOrientation":"portrait","pageInnerHeight":761.89,"pageInnerWidth":515.28,"left":40,"top":40,"verticalRatio":0,"horizontalRatio":0},{"pageNumber":1,"pageOrientation":"portrait","pageInnerHeight":761.89,"pageInnerWidth":515.28,"left":40,"top":78.125,"verticalRatio":0.0500400320256205,"horizontalRatio":0},{"pageNumber":1,"pageOrientation":"portrait","pageInnerHeight":761.89,"pageInnerWidth":515.28,"left":40,"top":114.1875,"verticalRatio":0.09737298035149432,"horizontalRatio":0}]}] breadcrumbs.ts:103
and the 3rd:
JSON.stringify(html): [{"nodeName":"DIV","stack":[{"text":"My title","nodeName":"H1","fontSize":24,"bold":true,"marginBottom":5,"style":["html-h1","html-div"],"_margin":[0,0,0,5],"_inlines":[],"_minWidth":41.09765625,"_maxWidth":79.76953125,"positions":[{"pageNumber":1,"pageOrientation":"portrait","pageInnerHeight":761.89,"pageInnerWidth":515.28,"left":40,"top":40,"verticalRatio":0,"horizontalRatio":0}]},{"text":"This is some example content...","nodeName":"P","margin":[0,5,0,10],"style":["html-p","html-div"],"_margin":[0,5,0,10],"_inlines":[],"_minWidth":50.0390625,"_maxWidth":169.1484375,"positions":[{"pageNumber":1,"pageOrientation":"portrait","pageInnerHeight":761.89,"pageInnerWidth":515.28,"left":40,"top":78.125,"verticalRatio":0.0500400320256205,"horizontalRatio":0}]},{"nodeName":"HR","margin":[0,12,0,12],"canvas":[{"type":"line","x1":80,"y1":228.375,"x2":594,"y2":228.375,"lineWidth":0.5,"lineColor":"#000000"}],"_margin":[0,12,0,12],"_maxWidth":554,"_minWidth":554,"_maxHeight":114.1875,"_minHeight":114.1875,"positions":[{"pageNumber":1,"pageOrientation":"portrait","pageInnerHeight":761.89,"pageInnerWidth":515.28,"left":40,"top":114.1875,"verticalRatio":0.09737298035149432,"horizontalRatio":0}]}],"_margin":null,"_minWidth":554,"_maxWidth":554,"positions":[{"pageNumber":1,"pageOrientation":"portrait","pageInnerHeight":761.89,"pageInnerWidth":515.28,"left":40,"top":40,"verticalRatio":0,"horizontalRatio":0},{"pageNumber":1,"pageOrientation":"portrait","pageInnerHeight":761.89,"pageInnerWidth":515.28,"left":40,"top":78.125,"verticalRatio":0.0500400320256205,"horizontalRatio":0},{"pageNumber":1,"pageOrientation":"portrait","pageInnerHeight":761.89,"pageInnerWidth":515.28,"left":40,"top":114.1875,"verticalRatio":0.09737298035149432,"horizontalRatio":0}]}] breadcrumbs.ts:103
from html-to-pdfmake.
I see the difference in the canvas:
from html-to-pdfmake.
It looks like your html
variable (in the second call) has some values from the first pdfmake
call… Which is weird based on the code you sent me. Except if you test a code that is not the one you sent in your first comment?
from html-to-pdfmake.
I'm testing the code I sent you above, but I'm running it within a larger react project, it's not isolated with just 1 file, so it's possible that something else interferes which is strange. It is also strange that only the HR is affected out of all the elements.
I have found a workaround for now simply adding a separator line with underscores. I don't like doing this but it works.
Have you tried adding separator line with another element applying border for example with your script?
from html-to-pdfmake.
I don't see anything in the code related to HR
that could explain what is happening with your code.
Each call of:
const html = htmlToPdfmake(`
<div>
<h1>My title</h1>
<p>
This is some example content...
</p>
<hr />
</div>`);
Should return the same code, all the time, because you pass a static HTML code to htmlToPdfmake
… In what you sent, it looks like the previous html
is merged with the new html
… Which doesn't make sense…
Have you tried adding separator line with another element applying border for example with your script?
I only created this lib for a very small project, but now I don't use it anymore: I just maintain it for the community, adding new stuff when people ask for it.
So, no, I never tried anything, except what you can see in example.js or in the test file.
from html-to-pdfmake.
OK, sounds good, no worries, and thanks for your swift replies.
Cheers!
from html-to-pdfmake.
Related Issues (20)
- Feature request: support for native Ecma script modules HOT 3
- Cannot load images in the Node.js environment HOT 2
- Support for header / footer HOT 4
- Table cell organization bug HOT 3
- Freeze bug HOT 4
- Adding extra white space in pdf. HOT 8
- Cannot size an image HOT 10
- 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
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.