PROGRAMMING HUB: July 2025

Tuesday, 29 July 2025

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 we will click on the Preview Button, the data of Word file will be displayed in the HTML DIV with the id named word_container.

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.

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

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">

<head>

</head>

<body>

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

Monday, 28 July 2025

PAN Card Number validation using JavaScript

Introduction: Hello Guys, “Welcome back” Today i am here with another one new great article. In this article I will explain about how to implement Indian PAN Card Number validation using JavaScript.

PAN Card Number will be entered in the TextBox by the user and it will be validate on the click of Button by using Regular Expression (Regex) in JavaScript.

Code for HTML Page

On the HTML page there i will place Textbox control for entering the PAN Number by the user. Here I will also place the control named span to show the message or error message. Here I will also place the control named button, on the click of button Validation_PAN function will be called to check the valid PAN Card entered by the user.

<span id="lbl_PanCard" class="error">Invalid PAN Number</span>

Validate PAN Card Number using JavaScript

After button click a function named Validation_PAN() will be called. First, the PAN Card Number entered by the user will be send to the function and then its value will be validating using a Regular Expression. If the entered PAN Number format is incorrect then the Error Message will be displayed in SPAN.

function Validation_PAN() {

var txtPANCard = document.getElementById("txt_PanCard");

var lblPANCard = document.getElementById("lbl_PanCard ")

var regex = /([A-Z]){5}([0-9]){4}([A-Z]){1}$/;

if (regex.test(txtPANCard.value.toUpperCase())) {

lblPANCard.style.visibility = "hidden";

return true;

} else {

lblPANCard.style.visibility = "visible";

return false;

}

</script>

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

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

<head>

</head>

<body>

body

{

font-family: Arial;

font-size: 10pt;

}

.PAN

{

text-transform: uppercase;

}

.error

{

color: Red;

visibility: hidden;

}

</style>

PAN Card:

<span id="lbl_PanCard" class="error">Invalid PAN Number</span>

function Validation_PAN() {

var txtPANCard = document.getElementById("txt_PanCard");

var lblPANCard = document.getElementById("lbl_PanCard")

var regex = /([A-Z]){5}([0-9]){4}([A-Z]){1}$/;

if (regex.test(txtPANCard.value.toUpperCase())) {

lbl_PanCard.style.visibility = "hidden";

return true;

} else {

lbl_PanCard.style.visibility = "visible";

return false;

}

</script>

</body>

</html>

Conclusion: In above code, I explained that how to implement Indian PAN Card Number (PAN) validation using JavaScript. This code is very helpful for every developer. Bye Bye and take care of you Developers. We will come back shortly with the new article.

Regards

Using Asp.net