Aymkdn / html-to-pdfmake

This module permits to convert HTML to the PDFMake format
https://aymkdn.github.io/html-to-pdfmake/index.html
MIT License
545 stars 88 forks source link

Cannot size an image #199

Closed kla-ko closed 10 months ago

kla-ko commented 10 months ago

Hi I didn't manage to size an image appropriately. It always runs off the boundaries of the generated pdf. I've tried to:

Nothing showed any effect.

Any suggestions?

Thanks

Aymkdn commented 10 months ago

I've just tried in the playground, and it looks OK: image

Maybe you can provide more info?

The HTML code:

<div><img src="https://cdn.getyourguide.com/img/location/53341a461c85b.jpeg/99.jpg" width="250" /></div>

The parameters/options:

{
  "imagesByReference":true
}
kla-ko commented 10 months ago

Hmm. Yes. Playground works well even with my dataURL. Let me investigate further. Thanks for the quick response ...

kla-ko commented 10 months ago

On thing I noticed when comparing to the playground: I have additional properties in the generated pdfMake content, which are _maxWidth, _minWidth and _width and these have very high values. Here is a snippet from the total pdfMake content:

image

The actual width property looks good.

The html snippet is this one: image

Aymkdn commented 10 months ago

Can you try with width="250" instead of using style?

kla-ko commented 10 months ago

I got it working! The actual image tag is embedded within a hierarchy of DIVs. Some of these DIVs are generated by a UI Builder which I'm using to build my pages. I believe, due to some css flex inheritance magic, the image was scaled across the whole page in the pdf (although it shows correctly on the web page). I stripped down this DIV hell and now it works. Unfortunately, I cannot reproduce what the actual root cause is. I will try further to reproduce and post any result here.

I just can say for now that the above mentioned _width, _maxWidth, _minWidth now show reasonable vaules, or even NaN for some divs up in the hierarchy. Maybe this is already a trace for you to follow up.

Thanks and best regards,

Aymkdn commented 10 months ago

I'm glad you figured it out :)

kla-ko commented 10 months ago

Found the issue!

Check this html within your test environment:

<div style=" min-height: 200px; border:1px solid black;">
  <h1>My title</h1>
  <p>
    This is a sentence with a <strong>bold word</strong>, <em>one in italic</em>,
    and <u>one with underline</u>. And finally <a href="https://www.somewhere.com">a link</a>.
  </p>
<img width=100 height=60 src="data:image/png;base64,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">
</div>

You see that, the generated pdf creates a distorted image.
Now, remove ``min-height: 200px;`` from the top DIV --> everything works fine!

Hope this helps,

Regards,
Aymkdn commented 10 months ago

Good catch! It inherits from the parent. Modifying it can be a bit tricky, so I'll refrain from making changes to the code to avoid potential side effects.

kla-ko commented 10 months ago

So, I will add style="min-height: 0px; min-width: 0px" to my image element. Just to make sure ...

Aymkdn commented 10 months ago

So, I will add style="min-height: 0px; min-width: 0px" to my image element. Just to make sure ...

Yes, it will do the trick.