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 export to doc functionality can be easily implemented on the web application without server-side interaction. There is a client-side solution to export HTML to word document using JavaScript.

The client-side export to doc functionality makes the web application user-friendly. The user can export a specific part of the web page content without page refresh. In this tutorial, we will show you how to export HTML to doc using JavaScript. The JavaScript export functionality can be used to download web page content or specific div content in a doc/docx file.

Export HTML to MS Word Document

The example code converts the HTML content to a Microsoft Word document and it can be saved as a .doc file.

JavaScript Code:
The Export2Word() function converts HTML content to word or export specific part of a web page with images, and download as Doc file (.doc).

element – Required. Specify the element ID to export content from.
filename – Optional. Specify the file name of the word document.

function Export2Word(element, filename = '')< var preHtml = "<a href="/318149.html">Export HTML To</a> Doc"; var postHtml = ""; 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"> div>

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

button onclick="Export2Word('exportContent');">Export as .docbutton>

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

button onclick="Export2Word('exportContent', 'word-content');">Export as .docbutton>

By default, the word file will be saved as a .doc file. If you want to export word file as a .docx file, specify the extension in the file name.

button onclick="Export2Word('exportContent', 'word-content.docx');">Export as .docxbutton>

Conclusion

Our example code helps you to integrate export to doc functionality using JavaScript without any third-party jQuery plugin. Not only .doc but also you can export HTML content as a .docx file by specifying the extension. Also, you can easily extend the functionality of export to word script as per your needs.

Do you want to get implementation help, or enhance the functionality of this script? Click here to Submit Service Request