No articles found
Try different keywords or browse our categories
How to Integrate Mozilla PDF.js in HTML: Build a PDF Viewer in Browser
Quick guide to integrating Mozilla PDF.js into your HTML application to build a functional PDF viewer directly in the browser.
Mozilla PDF.js is a JavaScript library that renders PDF files directly in the browser without plugins. Here’s how to integrate it quickly.
Quick Setup
Add PDF.js via CDN to your HTML:
<!DOCTYPE html>
<html>
<head>
<title>PDF Viewer</title>
</head>
<body>
<canvas id="pdf-canvas"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.min.js"></script>
<script src="app.js"></script>
</body>
</html>Load and Render a PDF
Create app.js:
// Set worker source
pdfjsLib.GlobalWorkerOptions.workerSrc =
'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js';
// Load PDF
const url = 'sample.pdf';
pdfjsLib.getDocument(url).promise.then(pdf => {
// Get first page
pdf.getPage(1).then(page => {
const canvas = document.getElementById('pdf-canvas');
const context = canvas.getContext('2d');
const viewport = page.getViewport({ scale: 1.5 });
// Set canvas dimensions
canvas.height = viewport.height;
canvas.width = viewport.width;
// Render page
page.render({
canvasContext: context,
viewport: viewport
});
});
});Add Navigation
Add buttons to navigate pages:
<button id="prev">Previous</button>
<span>Page: <span id="page-num"></span> / <span id="page-count"></span></span>
<button id="next">Next</button>
<canvas id="pdf-canvas"></canvas>Update your JavaScript:
let pdfDoc = null;
let pageNum = 1;
function renderPage(num) {
pdfDoc.getPage(num).then(page => {
const canvas = document.getElementById('pdf-canvas');
const context = canvas.getContext('2d');
const viewport = page.getViewport({ scale: 1.5 });
canvas.height = viewport.height;
canvas.width = viewport.width;
page.render({
canvasContext: context,
viewport: viewport
});
document.getElementById('page-num').textContent = num;
});
}
pdfjsLib.getDocument(url).promise.then(pdf => {
pdfDoc = pdf;
document.getElementById('page-count').textContent = pdf.numPages;
renderPage(pageNum);
});
document.getElementById('prev').addEventListener('click', () => {
if (pageNum <= 1) return;
pageNum--;
renderPage(pageNum);
});
document.getElementById('next').addEventListener('click', () => {
if (pageNum >= pdfDoc.numPages) return;
pageNum++;
renderPage(pageNum);
});Key Features
- No plugins required - Pure JavaScript solution
- Cross-browser - Works in all modern browsers
- Customizable - Full control over rendering and UI
- Client-side - No server processing needed
That’s it! You now have a functional PDF viewer in your browser using Mozilla PDF.js.
Related Articles
Build PDFs Directly in the Browser: jsPDF vs pdf-lib vs PDF.js (Real Examples & Use Cases)
A practical comparison of jsPDF, pdf-lib, and PDF.js for browser-based PDF generation and manipulation. Learn which library fits your project with real code examples.
Fix: addEventListener is not a function error in JavaScript
Learn how to fix the 'addEventListener is not a function' error in JavaScript applications. This comprehensive guide covers DOM manipulation, Node.js, and browser compatibility.
FFMPEG WASM Project: Build a Video Converter in Browser with HTML, CSS & JavaScript
Learn how to integrate FFmpeg.wasm in your web application using vanilla JavaScript. Convert video formats, compress files, and process videos entirely in the browser.