Image Issue with Tables

[gaganjot-kaur3197]

Hello Team

I hope you are doing well. I have used your NPM library html-to-docx for converting html templates to docx files. I am facing some issues with inserting images into them. I have tried multiple ways of inserting images inside html.

1. Absolute URL - Links to an external image that is hosted on another website
2. Relative URL - Links to an image that is hosted within the website. The above two methods didn't work for me. Then I tried with the base64 image data source and it worked for me. Now, when I am using base64 images within html template, I am facing some issues with the tables. The table border disappears and I am not getting the docx generated correctly. While if I do not insert any image to the html template, then the tables are working fine. I am using the official MS office to view the docs.

I have shared two sample docx files one with image and one without image.

The sample source code to insert an image - <table style="width: 100%; border: none; border-spacing: 0; border-collapse: collapse;" border="0" cellspacing="0" cellpadding="0"> <tr style="border-collapse: collapse; border-spacing: 0;"> <td style="padding: 0px; margin: 0px; text-align: left; border-collapse: collapse; border-spacing: 0;" align="left"> <h1 style="color: #161950; font-size: 35px; font-weight: bold;">Tesla, Inc.</h1> <p style="color: #6565aa; font-size: 18px; font-family: 'Helvetica'; line-height: 17px; margin: 5px 0 20px; letter-spacing: 0px;">Company Snapshot</p> </td> <td style="padding: 0px; margin: 0px; text-align: right; border-collapse: collapse; border-spacing: 0;" align="right"> <img src="data:image/png;base64,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" /> </tr> </table>

Can you please look into this issue and why there are table border issues when I am trying to insert an image in the html template.

Looking forward to hearing from you.

Snapshot-without-image.docx Snapshot-with-image.docx

[privateOmega]

@gaganjot-kaur3197 Hope you are doing good as well. Currently images are only supported by base64 string, although a fix for external urls should be straight forward to implement. Happy to merge a PR, if you could raise one.

I am not really what table issue are you referring to because I tried opening it in WPS and it seems to have all the borders. Any chance you tried zooming in/out, I have seen some word-processor softwares kind of don't show borders properly on zoom levels even though it's actually there. Try zooming in/out to a different level and post it here?

Edit: Attaching the screenshots of the 2 docx in WPS

[gaganjot-kaur3197]

Hi @privateOmega , Thanks for the information. We have not made any changes in your module so far and implemented it in our application codebase only. If you already have a fix for this then can you please apply and release it. Regarding table border issues, We are facing this issue only when we are adding images to the html templates. Otherwise, It is working fine for us. Below are the screenshot for the docs, The doc without image - 100% zoom level The doc with image - 100% zoom level The issue occurs on 110%, 130%, 150% , 160% zoom level etc.

[privateOmega]

@gaganjot-kaur3197 I also haven't worked on bringing support for external images to html-to-docx, so thats something that I could only take up whenever I become available. And like I said, are you facing issues at all zoom levels, I had already attached screenshots of the same documents, you had attached opened in WPS, chances are it must be a bug from MS Office, since it works smoothly on WPS, MS office products are known for buggy implementation of the standard even though people consider it as gold standards of word processing.Try opening the same document in different versions of MS office at different zoom levels, if its still an issue, we can look if something can be additionally.

[gaganjot-kaur3197]

Thanks @privateOmega for quick help. We will look into this. Please update once when you will work on external images support.

[nicolasiscoding]

@privateOmega been watching this repo for a bit, isn't this addressed in #148 ?