The ability to display Word documents within an app running in a browser improves the user experience by allowing content to be viewed without the need for the user to download anything.
There are many efficient ways to display Word documents in HTML using JavaScript, like converting Microsoft Word files with libraries, embedding them with services like Google Docs Viewer, etc. This guide covers everything for you, including coding samples for your use.
Why Display Word Documents in HTML?
Displaying a Word document as a web page makes it possible to display content directly in the browser without requiring MS Office or downloads. So it is useful for applications such as:
- Educational Platforms: To share notes and material for study.
- Document Management Systems: For quick previewing of files.
- Collaboration Tools: To simplify workflows without the need of additional software.
Now let’s take a look at 3 popular ways to do this.
Method 1: Convert Word Document to HTML with Mammoth.js
Mammoth.js libraries can convert a Word document in HTML by extracting only the text and basic structure, generating clean HTML code that’s simple to display in a web app. So Mammoth.js is all about the extraction of useful content from Word documents, eliminating stupid styles.
How to Display a Word Document in the Browser:
- A .docx file is uploaded by the user.
- The FileReader API reads the file so the browser can read this file.
- The file is processed by Mammoth.js and is then converted to HTML.
- A <div> is used to display the HTML content.
HTML and JavaScript Code Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display Word Document</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mammoth/1.4.2/mammoth.browser.min.js"></script>
</head>
<body>
<h1>Upload and View Word Document</h1>
<input type="file" id="upload" accept=".docx" />
<div id="output" style="border: 1px solid #ccc; padding: 10px; margin-top: 10px;"></div>
<script>
document.getElementById('upload').addEventListener('change', function (event) {
let reader = new FileReader();
reader.onload = function (event) {
mammoth.convertToHtml({ arrayBuffer: event.target.result })
.then(function (result) {
document.getElementById('output').innerHTML = result.value;
})
.catch(function (err) {
console.error("Error: ", err);
});
};
reader.readAsArrayBuffer(event.target.files[0]);
});
</script>
</body>
</html>
Browser Output: Display Word Document
Want to learn how to create a Word document using JavaScript? Then click here!
Method 2: Display Word Documents in HTML with Google Docs Viewer
With Google Docs Viewer, you can embed a viewer in your website, letting users display Word files directly in the browser. This approach is easy and only works for the URL of the document.
How to do it with Google Docs Viewer:
- When the user provides the URL of a Word doc or DOCX file, the script loads it into an iframe through Google Docs Viewer for easy embedding.
Code Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Docs Viewer</title>
</head>
<body>
<h1>View Word Document</h1>
<input type="text" id="urlInput" placeholder="Enter URL of .docx file" style="width: 300px;" />
<button id="loadDoc">Load Document</button>
<iframe id="docViewer" style="width:100%; height:600px; margin-top: 10px;" src=""></iframe>
<script>
document.getElementById('loadDoc').addEventListener('click', function () {
let url = document.getElementById('urlInput').value;
let viewerUrl = `https://docs.google.com/gview?url=${encodeURIComponent(url)}&embedded=true`;
document.getElementById('docViewer').src = viewerUrl;
});
</script>
</body>
</html>
Browser Output:
Method 3: Convert Word Document to PDF and Display with JavaScript
Another method is to convert Word documents into a PDF file, preserving the format, and then render it with PDF.js for reliable browser support.
How It Works:
- Offline or server side convert Word document to PDF.
- Upload the PDF.
- To display the PDF, simply use PDF.js and put the PDF in a <canvas> element.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PDF Viewer</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.min.js"></script>
</head>
<body>
<h1>Upload and View PDF</h1>
<input type="file" id="upload" accept=".pdf" />
<canvas id="pdfViewer" style="border: 1px solid #ccc; margin-top: 10px;"></canvas>
<script>
document.getElementById('upload').addEventListener('change', function (event) {
let file = event.target.files[0];
let fileReader = new FileReader();
fileReader.onload = function () {
let typedArray = new Uint8Array(this.result);
pdfjsLib.getDocument(typedArray).promise.then(function (pdf) {
pdf.getPage(1).then(function (page) {
let viewport = page.getViewport({ scale: 1 });
let canvas = document.getElementById('pdfViewer');
let context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
let renderContext = {
canvasContext: context,
viewport: viewport
};
page.render(renderContext);
});
});
};
fileReader.readAsArrayBuffer(file);
});
</script>
</body>
</html>
Output:
Wrapping Up
In summary, there are multiple ways to display Word documents in a browser.:
- Mammoth.js is excellent for converting Word docs into clean HTML code, making a Word document as a web page lightweight and readable.
- Google Docs Viewer or Word Online lets you embed the document with an iframe when the file is hosted online.
- And if consistent formatting is critical, you can convert the Word document to a PDF file and use PDF.js to display it in the browser.
All of these methods make it possible to display Word documents in HTML without forcing users to download or open MS Office. Whether you want to embed Word documents in collaboration tools, publish them on a web page, or preview DOCX files in a web application, these JavaScript-based methods ensure flexibility, accessibility, and broad browser support.
If you are new to JavaScript: