In this article I will explain with an example, how to display (embed) Word (Docx) file in HTML using JavaScript.
docx-preview.js plugin
The Word (Docx) file will be displayed (rendered) in Browser using docx-preview.js JavaScript plugin.
Note: This library only works for Word 2007 and higher formats (docx) and not the Word 97 – 2003 formats (doc).
The following files JavaScript plugin will be used.
1. docx-preview.js
2. jszip.min.js
HTML Markup
The following HTML Markup consists of an HTML FileUpload element, a Button and an HTML DIV. The Button has been assigned with a JavaScript OnClick event handler.
When the Preview Button is clicked, the Word file data is displayed in the HTML DIV.
<input id="files" type="file" accept=".docx" />
<input type="button" id="btnPreview" value="Preview Word Document" onclick="PreviewWordDoc()" />
<div id="word-container" class=""></div>
JavaScript Implementation
First, the JavaScript files are inherited for the docx-preview.js JavaScript plugin.
When the Preview Button is clicked, the PreviewWordDoc function is called.
Inside the PreviewWordDoc function, the Word file data is read from the FileUpload element.
Finally, the docx-preview.js library options are initialized and the Word document is rendered in the Container DIV using the renderAsync function.
<script type="text/javascript" src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
<script src="Scripts/docx-preview.js"></script>
<script type="text/javascript">
function PreviewWordDoc() {
//Read the Word Document data from the File Upload.
var doc = document.getElementById("files").files[0];
//If Document not NULL, render it.
if (doc != null) {
//Set the Document options.
var docxOptions = Object.assign(docx.defaultOptions, {
useMathMLPolyfill: true
});
//Reference the Container DIV.
var container = document.querySelector("#word-container");
//Render the Word Document.
docx.renderAsync(doc, container, null, docxOptions);
}
}
</script>
Screenshot
![Display (Embed) Word (Docx) file in HTML using JavaScript]()
Browser Compatibility
The above code has been tested in the following browsers only in versions that support HTML5.
![Internet Explorer]()
![FireFox]()
![Chrome]()
![Safari]()
![Opera]()
* All browser logos displayed above are property of their respective owners.
Downloads
