In this article I will explain with an example, how to display (render) Word (Docx) file in Browser 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 (Render) Word (Docx) file in Browser using JavaScript
 
 

Browser Compatibility

The above code has been tested in the following browsers.
Microsoft Edge   FireFox  Chrome  Safari  Opera
* All browser logos displayed above are property of their respective owners.
 
 

Downloads

Download Code