"HR" misbehave on re-render...

[AndonIgnatov]

I'm using your awesome script with React.js.
The issue I encountered is with the <hr /> element.

Background:
I've setup a button that will generate a PDF from some content, the issue is that if you click the button multiple times, basically to generate the same report multiple times the <hr /> keeps adding all this spacing above and to the right of it and with each newly generated instance the gaps are getting bigger.

Here's some code snippet to try to reproduce this:

const html = htmlToPdfmake(`
    <div>
      <h1>My title</h1>
      <p>
        This is some example content...
      </p>
      <hr />
    </div>`);

  const docDefinition = {
    content: [
      html,
    ]
  };

  const pdfDocGenerator = () => {
    pdfMake.createPdf(docDefinition).open();
  };

  return (
    <Button onClick={pdfDocGenerator}>Open PDF</Button>
  );

Here's some screenshots to demonstrate the issue.

First open:

Second open:

Third open:

and so on...
Thanks

[Aymkdn]

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

[AndonIgnatov]

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

[Aymkdn]

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.

[AndonIgnatov]

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

Any other ideas?

[Aymkdn]

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).

[Aymkdn]

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

[AndonIgnatov]

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

[AndonIgnatov]

I see the difference in the canvas:

[Aymkdn]

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?

[AndonIgnatov]

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?

[Aymkdn]

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.

[AndonIgnatov]

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

Cheers!