Create Word doc from HTML with Image

Question

I'm having some slight issues with generating a word doc from some formatted HTML I've been using the code at the below this link. HTML generated Microsoft Word document with header, footer and watermark

The only problem I have is when I send the document somewhere that does not have the image stored locally I get the image not found link where the image should be. I was hoping someone might point me in the right direction. I would love to cook something up in python to handle this but sadly due to work I'm stuck with HTML and little else (my javascript isn't great yet so ya). Any help is appreciated.

Code is below.

Thanks in advance.

    <html xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office"
xmlns:w="urn:schemas-microsoft-com:office:word"
xmlns:m="http://schemas.microsoft.com/office/2004/12/omml"
xmlns="http://www.w3.org/TR/REC-html40">
<head><meta http-equiv=Content-Type content="text/html; charset=utf-8"><title></title>
<style>
v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
w\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
</style>
<style>
body
{
font-family: Arial;
}

th{

    text-align: left;
    text-decoration: underline;
}
.header
{
text-align: center;
}
#title{
font-size: 18px;
font-weight: bold;
}
#subtitle{
font-size: 16px;
font-weight: bold;
text-decoration: underline;
}
#footer{
text-align: right;
font-size: 10px;
}

#conditions{
    width: 100%;
    text-align: justify;
}

.first {
    vertical-align: top;
    width: 40%;
    font-weight: bold;
}

#signing{
    width: 100%;
}

.ownersignature{
    text-align: center;
}

#pageheader{
    position: relative;
    text-align: right;
}
/*#signing td{
    width: 40%;
}*/
#h1{
    text-align: right;
}

@page
{
    mso-page-orientation: Portrait;
    size:21cm 29.7cm;    
    margin:1.8cm 1cm 1cm 1cm;
}
@page Section1 {
    mso-header-margin:.2cm;
    mso-footer-margin:.2in;
    mso-title-page: yes;
    mso-first-header: fh1;
    mso-footer: f1;
    }
div.Section1 { 
    page:Section1;
 }
div#hrdftrtbl
{
    margin:0in 0in 0in 900in;

    width:1px;
    height:1px;
    overflow:hidden;
}
div.MsoHeader{
    text-align: right;
}

p.MsoFooter, li.MsoFooter, div.MsoFooter
{
    margin:0in;
    margin-bottom:.0001pt;
    mso-pagination:widow-orphan;
    tab-stops:center 3.0in right 6.0in;
    font-size:12.0pt;
    float: right;
}
</style>
<xml>
<w:WordDocument>
<w:View>Print</w:View>
<w:Zoom>100</w:Zoom>
<w:DoNotOptimizeForBrowser/>
</w:WordDocument>
</xml>
</head>
<body>

<div id="pageheader">


    <p class=header><span id='title'>Title!</span><br/><br/><span id='subtitle'>subtitle!</span></p>

</div>

<div class=Section1>

<!-- Header section -->


<div id='hrdftrtbl'>
    <div style='mso-element:footer' id=f1><span style='position:relative;#hz-index:-1'> 
        <!-- FOOTER-tags -->
        <div id='footer'><br/><br/>This is my footer</div>


   </span>


        </p>
    </div>

    <div id='hrdftrbl'>
        <div style='mso-element:header' id=fh1 >
            <span style='mso-no-proof:yes'>
                <!--[if gte vml 1]>
                <v:shapetype id="_x0000_t75"
                    coordsize="21600,21600" o:spt="75" o:preferrelative="t" path="m@4@5l@4@11@9@11@9@5xe"
                    filled="f" stroked="f">
                    <v:stroke joinstyle="miter"/>
                    <v:formulas>
                        <v:f eqn="if lineDrawn pixelLineWidth 0"/>
                        <v:f eqn="sum @0 1 0"/>
                        <v:f eqn="sum 0 0 @1"/>
                        <v:f eqn="prod @2 1 2"/>
                        <v:f eqn="prod @3 21600 pixelWidth"/>
                        <v:f eqn="prod @3 21600 pixelHeight"/>
                        <v:f eqn="sum @0 0 1"/>
                        <v:f eqn="prod @6 1 2"/>
                        <v:f eqn="prod @7 21600 pixelWidth"/>
                        <v:f eqn="sum @8 21600 0"/>
                        <v:f eqn="prod @7 21600 pixelHeight"/>
                        <v:f eqn="sum @10 21600 0"/>
                    </v:formulas>
                    <v:path o:extrusionok="f" gradientshapeok="t" o:connecttype="rect"/>
                    <o:lock v:ext="edit" aspectratio="t"/>
                </v:shapetype>
                <v:shape id="_x0000_s1025" type="#_x0000_t75" alt="" style='position:absolute;
                    margin-left:0;margin-top:2pt;width:537pt;height:57pt;z-index:251659264'>
                    <v:imagedata src="/home/user/Documents/image.jpg"/>
                    <w:wrap type="square"/>
                </v:shape>
                <![endif]-->
            </span>
        </div>
    </div>

    <div style='mso-element:header' id=fh1>
        <p class=MsoHeader><span lang=EN-US style='mso-ansi-language:EN-US'>&nbsp;<o:p></o:p></span></p>

        </div>
        <div style='mso-element:footer' id=ff1>
        <p class=MsoFooter><span lang=EN-US style='mso-ansi-language:EN-US'>&nbsp;<o:p></o:p></span></p>
    </div>



</div>

</body>
</html>

score 0 · Answer 1 · answered Oct 15 '21 at 18:18

To display a image in a Word document generated from a HTML, you need to convert it to Base64. Example in VB.NET:

    Public Function GetBase64Image(file As String) As String
        Dim prefix As String = Path.Combine("~Your Path", file)
        Dim _path As String = Server.MapPath(prefix)

        Try
            Dim img As Image = Image.FromFile(_path)
            Dim base64 = SysUtil.ImageToBase64(img)

            Return String.Format("<img width=100 height=100 style=""text-align:center; display: block;margin: auto;"" src=""data:image/jpeg;base64,{0}"" />", base64)
        Catch ex As Exception
            Return "<div></div>"
        End Try

    End Function

Create Word doc from HTML with Image

1 Answers1