Trouble adding images to when converting word document from HTML using javascript

Question

I'm trying to dynamically generate a word document on the client for a report.

I create a HTML string in the format:

<html xmlns:office="urn:schemas-microsoft-com:office:office" xmlns:word="urn:schemas-microsoft-com:office:word" xmlns="http://www.w3.org/TR/REC-html40">
<head>
    <xml>
        <word:WordDocument>
        <word:View>Print</word:View>
        <word:Zoom>90</word:Zoom>
        <word:DoNotOptimizeForBrowser/>
        </word:WordDocument>
    </xml>
    <style>Some CSS</style>
</head>
<body>
    Some HTML
</body>

And then base64 convert the HTML string and set the download attribute on an a to be "data:text/html,base64EncodedText"

This all works fine except that the images do not work.

I've tried: img src="https://hostname/imagepath", img src="data:image/png;base64encodeduri" and started trying to use a VML but have had no luck (the encoded srcs open fine when using them as a URL in the browser).

Can anyone help? What is the best way to get images into a word document?

If possible I'd like to avoid using a library, I've looked at docx.js but can't use it because of the licensing (and that there are no examples for it...).

Thanks

VeXaL Santos VeXaL Santos · Accepted Answer · 2015-09-03T14:13:53

I've run into a similar problem while trying to convert html to a word document. Word cannot read images encoded in base64 and has a few limitations regarding css and image style properties.

I recommend following this tutorial. It is quite detailed when it comes to the way the data should be saved.

It should be noted that it will only work for files saved as .doc formats.

Trouble adding images to when converting word document from HTML using javascript

1 Answers