12

I'm currently creating a Word document by generating HTML and changing the header information to display as a .doc file. It's a poor man's method, but it works just fine (until now).

I was just asked to include an image in the file. My best idea was to base64 embed the image. This works fine in a browser, however Word just gives me a box with an X in it.

Suggestions on how I can embed an image into this file and have it display in Microsoft Word?

St. John Johnson
  • 6,590
  • 7
  • 35
  • 56
  • Not an actual answer, but I recall something about having the alt-text of the image as a href and it will replace the image(?). That was for a doc->pdf convert though, but it might help :3 – glasnt Feb 24 '10 at 22:08
  • St. John did you have any success with embedding images in a Word document and if so which technique did you use? Thanks. – fractious Mar 10 '10 at 17:18
  • @Fractious I ended up using absolute URLs. From the testing I did, there was no automated blocking of the remote image (like Outlook does). The only downside is that the viewer needs access to the internet to view the image (luckily it is only a cosmetic image and doesn't affect the purpose of the file). – St. John Johnson Mar 12 '10 at 18:45
  • For anyone who stumbles upon this question in the future : base64-images in HTML **are read and displayed correctly by Word 2016**, both in HTML files and HTML content pasted from the clipboard. It seems like 2016 is the first version to include this functionality, since 2013 also fails. I have not tested 2019 or 365. – Daniel Kamil Kozar Jun 04 '20 at 12:35
  • @DanielKamilKozar this does not work in latest Word from office 365. – qualverse Mar 01 '21 at 22:01

4 Answers4

16

That's a tough one, Word isn't able to handle data: base64 encoded images in HTML, at least that's the outcome in this question and this MSDN discussion.

You have three options:

  • Create a folder in the location of the document, store it alongside the document, and reference images relatively (<img src='imageFolder/image1.jpg'>)

  • Work with absolute URLs or file paths (even more sucky)

  • Look into the new Word > 2003 XML based file format(s), it is definitely possible there.

The only other option I can think of is actually creating a native Word file, e.g. using OpenOffice.

Community
  • 1
  • 1
Pekka
  • 442,112
  • 142
  • 972
  • 1,088
  • 1
    re the first dot point, you might be able to create a single .mhtml; see http://www.phpied.com/data-uris-mhtml-ie7-win7-vista-blues/ – JasonPlutext Mar 04 '10 at 04:35
  • @plutext great link! How *Word* behaves with HMTHML would have to be seen, looking at the tons of different approaches within one product (IE) :) But probably worth a try. – Pekka Mar 04 '10 at 09:11
  • 1
    this is useful when creating MHTML: [http://sebsauvage.net/wiki/doku.php?id=word_document_generation](http://sebsauvage.net/wiki/doku.php?id=word_document_generation) – MartinM Jul 04 '14 at 12:51
3

You can use this html-docx.js

You just have to call htmlDocx.asBlob("YOUR HTML")

Link to sample html to doc generation with image.

mrk
  • 8,059
  • 3
  • 56
  • 78
Cris Denver Labe
  • 41
  • 1
  • 1
  • 3
1

I just achieved this by printing the DOCX to PDF then using Acrobat to Save As to HTML. Images showed up small, but there.

Jeff
  • 11
  • 1
-1

I had the similar problem. I solved it by decoding the Base64 images to disk and creating a link to the images, deploying a servlet in my application to listen to the link pointed by images on disk. Here is the solution I implemented:

How to convert HTML to well formed DOCX with styling attributes intact

KnockingHeads
  • 1,569
  • 1
  • 22
  • 42