HTML to Word With Images

Question

I have an HTML document with image. How can I convert those HTML to word document (no matter doc or docx) but image is able to running offline?

I've been trying HTML to DOCX from codeplex, my CSS messed up (couldn't align center). And I have no idea how to change image with OpenTBS.

Any other recommended freeware PHP or JS classes to convert them?

This post may help - [How to display images in Word generated from HTML](http://stackoverflow.com/questions/2329897/how-to-display-images-in-word-generated-from-html?rq=1) — Spire.XLS API, Jan 29 '15 at 02:42

score 0 · Answer 1 · answered Jan 16 '15 at 07:55

0

Simply run your html in your browser and copy the content from your browser and paste it to your word file.

answered Jan 16 '15 at 07:55

prabin badyakar

1,636
2
16
24

I'm creating a web-based application which user can submit data by form with their photos and then word document generated. I'm not using PDF because document need to be editable. – Nikko Jan 16 '15 at 07:59

score 0 · Answer 2 · answered Apr 24 '18 at 11:50

To generate a Word document simply add this code at the top of the page you want to convert.

<?php 
   header("Content-Type: application/vnd.ms-word");
   header("Expires: 0");
   header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
   header("content-disposition: attachment;filename=MyReport.doc"); 
?>

If it is not enough you can try something with the phpWord

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

Here is a JS function to convert HTML to Word:

function Export2Doc(element, filename = '', landscape= false, margem="0.5in") {
    var preHtml
    if (landscape) {
        preHtml = `<html lang=\"pt-br\" accept-charset="UTF-8" xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'> <head><meta charset="UTF-8"><meta http-equiv="Content-type" content="text/html; charset=UTF-8"><title></title> <!--[if gte mso 9]><xml> <w:WordDocument> <w:View>Print</w:View> <w:Zoom>90</w:Zoom> </w:WordDocument> </xml><![endif]--> <style> 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; }</style> <style> <!-- /* Style Definitions */ @page Section1 { size:landscape; margin:${margem} ${margem} ${margem} ${margem}; mso-page-orientation:landscape; mso-header-margin:.5in; mso-footer-margin:.5in; mso-title-page:yes; mso-header: h1; mso-footer: f1; mso-first-header: f1; mso-first-footer: ff1; mso-paper-source:0; } div.Section1 { page:Section1; } #exportContent { margin:0in 0in 0in 900in; width:1px; height:1px; overflow:hidden; } -->table { border-collapse: collapse; } tr td { border: 2px solid black; } tr th { border: 2px solid black; } td { border: 2px solid black; } .header-color { background-color: lightgray } p {font-family: Arial} strong {font-family: Arial} h1 {font-family: Arial} .info { padding-left: 5px; font-weight: bold; font-size: 12.5pt; } .danone-alert { font-weight: bold; font-size: 12.5pt; color: blue; } .word { font-family:Arial } * {font-family: Arial} .stronger { padding-left: 5px; background-color: lightgrey; font-weight: bold; font-size: 15px; }</style></head><body style='tab-interval:.5in'>`;    }
    else {
        preHtml = `<html lang=\"pt-br\" accept-charset="UTF-8" xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:w='urn:schemas-microsoft-com:office:word' xmlns='http://www.w3.org/TR/REC-html40'> <head><meta charset="UTF-8"><meta http-equiv="Content-type" content="text/html; charset=UTF-8"><title></title> <!--[if gte mso 9]><xml> <w:WordDocument> <w:View>Print</w:View> <w:Zoom>90</w:Zoom> </w:WordDocument> </xml><![endif]--> <style> 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; }</style> <style> <!-- /* Style Definitions */ @page Section1 { size:8.5in 11.0in; margin:${margem} ${margem} ${margem} ${margem}; mso-header-margin:.5in; mso-footer-margin:.5in; mso-title-page:yes; mso-header: h1; mso-footer: f1; mso-first-header: f1; mso-first-footer: ff1; mso-paper-source:0; } div.Section1 { page:Section1; } #exportContent { margin:0in 0in 0in 900in; width:1px; height:1px; overflow:hidden; } -->table { border-collapse: collapse; } tr td { border: 2px solid black; } tr th { border: 2px solid black; } td { border: 2px solid black; } .header-color { background-color: lightgray } p {font-family: Arial} strong {font-family: Arial} h1 {font-family: Arial} .info { padding-left: 5px; font-weight: bold; font-size: 12.5pt; } .danone-alert { font-weight: bold; font-size: 12.5pt; color: blue; } .word { font-family:Arial } * {font-family: Arial} .stronger { padding-left: 5px; background-color: lightgrey; font-weight: bold; font-size: 15px; }</style></head><body style='tab-interval:.5in'>`;
    }
  

    var postHtml = "</body></html>";
    var html = preHtml + document.getElementById(element).innerHTML +postHtml

    var blob = new Blob(['\ufeff', html], {
        type: 'application/msword'
    });

    // Specify link url
    var url = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(html);

    // Specify file name
    filename = filename ? filename + '.doc' : 'document.doc';

    // Create download link element
    var downloadLink = document.createElement("a");

    document.body.appendChild(downloadLink);

    if (navigator.msSaveOrOpenBlob) {
        navigator.msSaveOrOpenBlob(blob, filename);
    } else {
        // Create a link to the file
        downloadLink.href = url;

        // Setting the file name
        downloadLink.download = filename;

        //triggering the function
        downloadLink.click();
    }

    document.body.removeChild(downloadLink);
}

You can customize the preHtml variable to your needs.

HTML to Word With Images

3 Answers3