In this article I will explain with an example, how to display Word document (DOC and DOCX) files in Web Page (View) in ASP.Net MVC.
 
 

Controller

The Controller consists of following Action methods.

Action method for handling GET operation

Inside this Action method, simply the View is returned.
public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }
}
 
 

View

HTML Markup

Inside the View, 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.
Inside the HTML Markup, the following JavaScript plugin will be used.
1. jszip.min.js
2. docx-preview.js

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.
@{
     Layout = null;
}
 
<!DOCTYPE html>
 
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <input type="button" id="btnPreview" value="Preview Word Document" onclick="PreviewWordDoc()" />
    <div id="word-container" class=""></div>
    <script type="text/javascript" src="https://unpkg.com/jszip/dist/jszip.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docx-preview@0.1.15/dist/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>
</body>
</html>
 
 

Screenshot

ASP.Net MVC: Display Word document in Web Page (View)
 
 

Downloads

Download Code