Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Show a Word Document in an HTML Page Using JavaScript?
To show a Word document in an HTML page using JavaScript is important where you are required to read Word documents within your browser. This article will discuss three approaches to accomplishing this in JavaScript, allowing you to load .docx files and display them on your webpage to the user.
In this article, our task is to show a word document in an HTML page using JavaScript. We will be either using a .docx file from our system or using URL.
Approaches to Show Documents in HTML
Method 1: Using Mammoth.js Library
Mammoth.js is a JavaScript library for converting .docx files to clean HTML and thereby rendering Word documents on your web page. This approach requires the Word document to be read and then converted to HTML so that its content can be shown on the page itself.
Installation: Include the Mammoth.js library via CDN:
https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.4.2/mammoth.browser.min.js
Example
The following example shows how to upload and display a Word document using Mammoth.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display DOCX File in HTML</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.4.2/mammoth.browser.min.js"></script>
<style>
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
font-family: Arial, sans-serif;
}
#displayArea {
border: 1px solid #ccc;
padding: 15px;
margin-top: 20px;
min-height: 200px;
}
</style>
</head>
<body>
<div class="container">
<h1>Word Document Viewer</h1>
<input type="file" id="fileInput" accept=".docx" />
<div id="displayArea">Select a .docx file to display its content here.</div>
</div>
<script>
document.getElementById('fileInput').addEventListener('change', function (event) {
const fileReader = new FileReader();
fileReader.onload = function (loadEvent) {
const arrayBuffer = loadEvent.target.result;
// Convert the DOCX file to HTML using Mammoth
mammoth.convertToHtml({ arrayBuffer: arrayBuffer })
.then(function (resultObject) {
// Display the converted content
document.getElementById('displayArea').innerHTML = resultObject.value;
})
.catch(function (error) {
console.error("Conversion error: ", error);
document.getElementById('displayArea').innerHTML = "Error converting document.";
});
};
// Read the file as ArrayBuffer
fileReader.readAsArrayBuffer(event.target.files[0]);
});
</script>
</body>
</html>
A file input field appears with a bordered display area below. When a .docx file is selected, its content is converted to HTML and displayed in the bordered area with proper formatting.
Method 2: Using iFrame with Microsoft Office Viewer
A way to show .docx files directly in a browser is by using an embedded Microsoft Office Viewer. This method does not entail reading documents or converting them; rather, you can simply embed the document within your page using an iframe.
Example
The following example enables users to view Word documents using Microsoft Office Online viewer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Microsoft Office Viewer</title>
<style>
.container {
max-width: 1000px;
margin: 20px auto;
padding: 20px;
font-family: Arial, sans-serif;
}
#docFrame {
width: 100%;
height: 600px;
border: 1px solid #ccc;
margin-top: 15px;
}
.input-group {
margin-bottom: 15px;
}
input[type="text"] {
width: 70%;
padding: 8px;
margin-right: 10px;
}
button {
padding: 8px 15px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<h1>View Word Document</h1>
<div class="input-group">
<input type="text" id="fileUrl" placeholder="Enter the URL of the .docx file" />
<button id="loadFile">Display Document</button>
</div>
<iframe id="docFrame"></iframe>
</div>
<script>
document.getElementById('loadFile').addEventListener('click', function () {
let docUrl = document.getElementById('fileUrl').value;
if (docUrl) {
let officeViewerUrl = `https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(docUrl)}`;
document.getElementById('docFrame').src = officeViewerUrl;
}
});
</script>
</body>
</html>
A text input field and button appear above an iframe. When a valid .docx file URL is entered and the button is clicked, the Word document displays in the iframe using Microsoft Office Online viewer.
Method 3: Using PDF.js for PDF Files
JavaScript provides several ways to embed PDFs in HTML webpages, and one of the best approaches is using PDF.js which renders PDFs on the HTML canvas element.
Installation: Include PDF.js via CDN:
https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js
Example
The following example shows how to display a PDF file using PDF.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display PDF in HTML</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"></script>
<style>
.container {
max-width: 900px;
margin: 20px auto;
padding: 20px;
font-family: Arial, sans-serif;
}
#pdfCanvas {
border: 1px solid #ccc;
margin-top: 15px;
max-width: 100%;
}
</style>
</head>
<body>
<div class="container">
<h1>PDF Viewer</h1>
<input type="file" id="uploadFile" accept=".pdf" />
<canvas id="pdfCanvas"></canvas>
</div>
<script>
document.getElementById('uploadFile').addEventListener('change', function (event) {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = function () {
const pdfData = new Uint8Array(reader.result);
// Load PDF document using PDF.js
pdfjsLib.getDocument(pdfData).promise.then(function (pdf) {
// Fetch the first page of the PDF
pdf.getPage(1).then(function (page) {
const scale = 1.5;
const viewport = page.getViewport({ scale: scale });
const canvas = document.getElementById('pdfCanvas');
const context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
const renderContext = {
canvasContext: context,
viewport: viewport
};
// Render the PDF page
page.render(renderContext);
});
}).catch(function (error) {
console.error('Error rendering PDF:', error);
});
};
// Read the uploaded PDF file
reader.readAsArrayBuffer(file);
});
</script>
</body>
</html>
A file input field appears with an empty canvas below. When a PDF file is selected, the first page of the PDF is rendered on the canvas element, displaying the PDF content directly in the browser.
Conclusion
In this article, we learned three approaches to embedding Word and PDF documents into HTML using JavaScript. We discussed how to convert DOCX files to HTML with Mammoth.js, how to display DOCX files using Microsoft Office Viewer, and how PDF files can be rendered directly with PDF.js. These approaches provide convenient ways to incorporate document viewing into web applications without relying on external plugins.
2K+ Views
