Giter Club home page Giter Club logo

Comments (12)

Aymkdn avatar Aymkdn commented on August 28, 2024

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.

AndonIgnatov avatar AndonIgnatov commented on August 28, 2024

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.

Aymkdn avatar Aymkdn commented on August 28, 2024

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.

AndonIgnatov avatar AndonIgnatov commented on August 28, 2024

Thanks for checking Aymkdn, unfortunately that did not lead to anything, the docDefinition objects in both instances look the same:

image
Any other ideas?

from html-to-pdfmake.

Aymkdn avatar Aymkdn commented on August 28, 2024

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.

Aymkdn avatar Aymkdn commented on August 28, 2024

Actually, show JSON.stringify(html), and not docDefinition

from html-to-pdfmake.

AndonIgnatov avatar AndonIgnatov commented on August 28, 2024

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.

AndonIgnatov avatar AndonIgnatov commented on August 28, 2024

I see the difference in the canvas:
image

from html-to-pdfmake.

Aymkdn avatar Aymkdn commented on August 28, 2024

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.

AndonIgnatov avatar AndonIgnatov commented on August 28, 2024

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.

Aymkdn avatar Aymkdn commented on August 28, 2024

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.

AndonIgnatov avatar AndonIgnatov commented on August 28, 2024

OK, sounds good, no worries, and thanks for your swift replies.

Cheers!

from html-to-pdfmake.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.