In this article I will explain with an example, how to open Word (Docx) file in Browser instead of downloading 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 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 is downloaded and displayed in the HTML DIV.
<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 is downloaded from the URL using Javascript XmlHttpRequest (XHR).
Inside the onload event handler, the response (which is a BLOB object) is converted into HTML5 File object.
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() {
        //URL of the Word Document.
        var url = "DOCs/Sample.docx";
 
        //Send a XmlHttpRequest to the URL.
        var request = new XMLHttpRequest();
        request.open('GET', url, true);
        request.responseType = 'blob';
        request.onload = function () {
            //Set the ContentType to docx.
            var contentType = "application/vnd.openxmlformats-officedocument.wordprocessingml.document";
 
            //Convert BLOB to File object.
            var doc = new File([request.response], contentType);
 
            //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);
            }
        };
        request.send();
    };
</script>
 
 
Screenshot
Open Word (Docx) file in Browser instead of Downloading 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.

 
 
Demo
View Demo
 
 
Downloads
Download Code