How to display Word file in HTML using JavaScript

-

 

Introduction: Hello Guys, “Welcome back” Today i am here with another one new great article. In this article I will explain about that how to display (embed) Word (Docx) file in HTML using JavaScript.

Download this script file from below mentioned link and place in the folder named Scripts

https://drive.google.com/file/d/10tmZOPxOReGV2j1AazChbdup98MLz4w3/view?usp=sharing

 docx-preview.js plugin

The Word (Docx) file will be displayed (rendered) in Browser using docx-preview.js JavaScript plugin. This library only works for Word 2007 and higher formats (docx).

 Here i will use following files JavaScript plugin.

1. docx-preview.js

2. jszip.min.js

 Description for HTML Page

On the HTML page i will place HTML FileUpload element or control with the id named files. Also a Button with the id named btn_preview  and an HTML DIV with the id named word_container. Here i will assigned JavaScript OnClick event handler to the button.

When the will click on the  Preview Button, the data of  Word file will be displayed in the HTML DIV with the id named word_container.

<input id="files_upload" type="file" accept=".docx" />

<input type="button" id="btn_preview" value="Preview Word Document" onclick="Preview_Wordfile()" />

<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 Preview_wordfile() function, the Word file data is read from the FileUpload element or control.

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>

 //you can download the below mentioned js file from this link

<script src="Scripts/docx-preview.js"></script>

<script type="text/javascript">

    function Preview_wordfile() {

        //Read the data of  Word Document from the File Upload control.

        var doc = document.getElementById("files_upload").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>

Here i am giving the complete HTML code for HTML page. You can copy and paste this code to your HTML page to enjoy the execution of the Article.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

</head>

<body>

    <input id="files_upload" type="file" accept=".docx" />

    <input type="button_upload" id="btnPreview" value="Preview Word Document" onclick="Preview_Wordfile()" />

    <div id="word_container" class=""></div>

    <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 Preview_Wordfile() {

            //Read the Word Document data from the File Upload.

            var doc = document.getElementById("files_upload").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>

</body>

</html>

Conclusion: In above code, I have been explained that how to display (embed) Word (Docx) file in HTML using JavaScript. This code is very helpful for every developer. Bye BYE and take care of yourself Developers. We will come back shortly with the new article.

 

Regards

Using Asp.net

 

Comments

Post a Comment

Popular posts from this blog

Sending reset password link for one time use only in asp.net

-
Introduction: Hello developers, in this article i will explain that how we can create and send reset password link that will use onle one time in asp.net,after one time use this link will dispose and say that this link is wrong. This is very helpful article for every .net developer Implementation: Create two pages named forgetpassword.aspx and reset.aspx. Paste the code that below am giving, separately inside the both pages. This is a sample program you can change it accoring to your requirement. Inside your table there will be a colimn named code is necessary. Code for forgetpassword.aspx page: < head runat ="server">     < title > Forget Password </ title >     < style type ="text/css">         .style1         {             width : 100% ;  ...
Read more

add delete update inside gridview using store procedure in ASP.NET

-
Image
Introduction: Hello friends, in this article i will explain that how we can insert,delete,update the data in the gridview. Here i am using the store procedure to insert,delete and update the record. With the help of the store procedure the execution of the sql  query make fast. And less  the code of the aspx.cs page. So we can say  the use of the store procedure in the sql server is very important and also very helpful. Implementation: create a new website abb a page named gallery.aspx. Drag and drop the two textboxes, a fileuploader and a button from the toolbox named txt_album_name, txt_caption, fileuploader1 and btn_insert respectively. Here i am giving the complete code for the html page.  Code for .aspx page: < table class ="style1">         < tr >             < td class ="style2">      ...
Read more

Change password using asp.net

-
Image
Introduction : Hello friends, in this article i will explain that how we can change the password after login, in asp.net.This article is very useful for the all the .net developer. Implementation : create a new website add a page. Drag and drop three textboxes and two buttons   from the toolbox inside the   < body > body tag at the .aspx page.   Below   i am giving the complete code for the html page and .cs page.  Code for default.aspx page < div >     < table style =" width : 91% ; height : 97px ; " class ="tbl_reg_form">         < tr >             < td >                 Old Password </ td >             < td >        ...
Read more