How to Export HTML to Word Document with JavaScript
by Vincy. Last modified on July 4th, 2023.
Exporting an HTML page as a Microsoft Word document can be done differently. Plugins are available in jQuery and JavaScript for implementing this on the client side.
When the HTML file is simple without any complex markup, exporting the HTML content to a Word document is simple. I don’t even need any third-party libraries. If you want to convert HTML to a Word document, without plugins or libraries but with simple JavaScript, continue reading this article.
A simple few lines of JavaScript code is enough to export the HTML. The source HTML is constructed with the header and footer in this JavaScript code.
The XML namespaces will be specified in the header section. This source HTML will be encoded and appended with the data URI linked with a download element created dynamically.
Source HTML with Export Control
The landing page will show the formatted HTML content with an export button control. The exportHTML() JavaScript function will be called by clicking this button. The HTML portion to be exported into a Word document will be identified with the ID selector. The content of the DIV element specified with the id source-HTML is used to build the source of the HTML export in the JavaScript function.
<div id="source-html">
<h1>
<center>Artificial Intelligence</center>
</h1>
<h2>Overview</h2>
<p>
Artificial Intelligence(AI) is an emerging technology
demonstrating machine intelligence. The sub studies like <u><i>Neural
Networks</i>, <i>Robatics</i> or <i>Machine Learning</i></u> are
the parts of AI. This technology is expected to be a prime part
of the real world in all levels.
</p>
</div>
<div class="content-footer">
<button id="btn-export" onclick="exportHTML();">Export to
word doc</button>
</div>
JavaScript Function to Convert HTML Document
The below code shows the JavaScript function used to construct the HTML source data with header, body, and footer. The header portion is to specify the required namespace and the charset.
The source HTML will be encoded with these specifications to form the URI. Then, a download link element will be created dynamically, and the URI will be hyperlinked with this element. Then, the click event is programmed to download the Word document with the exported HTML data.
<script>
function exportHTML(){
var header = "<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 Word Document with JavaScript</title></head><body>";
var footer = "</body></html>";
var sourceHTML = header+document.getElementById("source-html").innerHTML+footer;
var source = 'data:application/vnd.ms-word;charset=utf-8,' + encodeURIComponent(sourceHTML);
var fileDownload = document.createElement("a");
document.body.appendChild(fileDownload);
fileDownload.href = source;
fileDownload.download = 'document.doc';
fileDownload.click();
document.body.removeChild(fileDownload);
}
</script>
Written by Vincy, a web developer with 15+ years of experience and a Masters degree in Computer Science. She specializes in building modern, lightweight websites using PHP, JavaScript, React, and related technologies. Phppot helps you in mastering web development through over a decade of publishing quality tutorials.
Comments to “How to Export HTML to Word Document with JavaScript”
Leave a Reply
Hi, I'm Vincy. I help build websites, grow businesses, big and small. If that is what you want, contact me.
I'm currently available for freelance work.
Thank You so much to share such a helpful code with us.
Welcome Amar.
Thanks for a wonderful tutorial. The generated file does not open on any mobile device. Ive tried with different softwares. Any suggestions?
Hi Edung,
Can you give me details on issue you are facing, any error messages? screenshots etc.
Great! Thank you very much.
Welcome Seniore.
this script doesn’t allow the images
Dada, will write another article for that.
Thanks :)
Welcome Amius.
Hi there!!
Thank you very mucho for a simple yet functional solution. I’ve tried with inline styles and the word document reflects those styles. However, if you add a style tag in the head, apparently the resulting word doc does not take the styles. I could find a way to parse the style tags into inline style attributes, but I thought it could be a great idea to have a style tag converted to a word stylesheet. Any suggestions??