How to Export HTML to Word Document with JavaScript
Last modified on July 26th, 2018 by Vincy.
Exporting a HTML page as a Microsoft word document can be done in different ways. There are plugins available in jQuery, JavaScript for implementing this in client side. When, the HTML file is simple without any complex markup, then it is a simple thing to export the HTML content to a word document. I doesn’t even need any third-party libraries. If you want to covert HTML to Word document, without plugins or libraries, but with just simple JavaScript, continue reading this article.
Simple and few lines of JavaScript code is enough to export the HTML. In this JavaScript code, the source HTML is constructed with the header and footer. The XML namespaces will be specified in the header section. This source HTML will be encoded and appended with the data URI that is linked with a download element created dynamically.
Source HTML with Export Control
The landing page will show the simply formatted HTML content with an export button control. By clicking this button, the exportHTML() JavaScript function will be called. 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
Below code shows the JavaScript function used to construct the HTML source data with header, body and the footer. The header portion is to specify the required namespace and the charset. With these specifications, the source HTML will be encoded to form the URI. Then, a download link element will be created dynamically and the URI is hyperlinked with this element. Then, the click event is triggered programmatically 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>
HTML Data Source Screenshot
This screenshot shows the landing page with the HTML source data and the export button.
Hi, I’m Vincy, PHP developer. If you have a project that you want to get started, launch quickly, contact me.
I'm currently available for freelance work.