close
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.
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 = "<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); }
Export HTML Table Data to Excel using JavaScript
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 Export2Word() function to export HTML content as .doc file using JavaScript.
<button onclick="Export2Word('exportContent');">Export as .doc</button>
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 .doc</button>
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 .docx</button>
Export TinyMCE Content to MS Word Document
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
It’s default portrait how can i do it landscape.
Nice tutorial, however when i open file using word, it keeps default option as webpage. Is there any way to change that??
Hello I’d like to ask is there any way to mantain the formatting in the exported file? Asking about span content that has been italicized.
How to remove header and footer ??
How to remove some content in .doc file when exporting from html file?
How to add header and footer?
Is there a way to password protect the file so it can only be viewed and not edited?
Is there a way to create custom document properties for the generated word document? Trying to create an information dump for retrieving the parameters that originally created the word document.
Dear CodexWorld,
Thanks for this great article.
I need to change font size and font family in the word document.
Kindly help me out pls.
Thanks,
V. Sangeetha
is there any chance to change font ?
Thanks for the assistance. I have one question. I am using a style sheet to modify my table when displaying. But these styles aren’t inherited to the word doc created from your code. How can I achieve this?
This is excellent, thank you.
Using your tutorial I have built an app on my website that populates user data (like name, address and other fields) into a user agreement which they can then download as a word doc.
But I have a question. I would like to have that word doc emailed to me as well, so I need to build a php handler. Would you be able to tell me if it’s possible to include this word doc in the handler?
Need to print the content of each div in different page in word document. Any help is appreciated. Thank You.
Hello,
I need to print content of each ‘div’ element in HTML in separate page in .docx. Any idea, how to achieve that?
Hello!
Nice article!
How could I use Image base64 data in the document word?
Regards
THANK YOU!!!!!!!!!!!!!!!!
How can I use this for exporting Chart.js charts and set the portrait to landscape.
Great tutorial! However, I cannot open .doc file in Pages on Mac. Tried .docx with no success. Are there any formatting issues regarding Apple? Thanx.
Hi,
Thanks for sharing this article.
What are those minor changes i have to make if i want to export the file as .docx format?
You don’t need to do any modification in the code. Just use
.docxextension in the filename.