Export HTML to MS Word Document using JavaScript

Generally, the export feature is used to download web page content as a file and save it for offline use. Microsoft Word or Doc (.doc) format is ideal for exporting HTML content in a file. The fare to doc usefulness can be effectively executed without server-side association. There is a client-side answer for fare HTML to word document utilizing JavaScript.

The client-side export to doc functionality makes the web application user-friendly. The user can export specific part of the web page content without page refresh.In this tutorial, we will tell you the best way to trade HTML to doc utilizing JavaScript. The JavaScript send out usefulness can be utilized to download web page substance or explicit div content in a doc/docx record.

Export HTML to MS Word Document

The precedent code converts the HTML substance to Microsoft Word document and it tends to be saved as a .doc record.

JavaScript Code:
The Export2Doc() work converts HTML substance to word or fare explicit piece of a web page with images, and download as Doc record (.doc).

  • element – Required. Specify the element ID to export content from.
  • filename – Optional. Specify the file name of the word document.
function Export2Doc(element, filename = ''){
    var preHtml = "<html 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'><title>Export HTML To Doc</title></head><body>";
    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);
}

HTML Content:
Wrap the HTML content in a container you want to export to MS Word document (.doc).

<div id="exportContent">
    <!-- Your content here -->
</div>

Trigger Export2Doc() function to export HTML content as .doc file using JavaScript.

<button onclick="Export2Doc('exportContent');">Export as .doc</button>

If you want to export HTML with a custom file name, pass your desired file name in the Export2Doc() function.

<button onclick="Export2Doc('exportContent', 'word-content');">Export as .doc</button>

Related Articles

Comments 1