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 Core (.Net Core 8) Razor Pages.
Note: For beginners in ASP.Net Core (.Net Core 8) Razor Pages, please refer my article ASP.Net Core 8 Razor Pages: Hello World Tutorial with Sample Program example.
 
 

Razor PageModel (Code-Behind)

The PageModel consists of following Handler methods.

Handler method for handling GET operation

This Handler method left empty as it is not required.
public class IndexModel : PageModel
{
    public void OnGet()
    {
           
    }
}
 
 

Razor Page (HTML)

HTML Markup

Inside the Razor Page, 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.
@page
@model Display_Word_JS_Core_Razor.Pages.IndexModel
@{
    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 Core Razor Pages: Display Word document in Web Page (View)
 
 

Downloads

Download Code