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.
How to integrate jsPDF Library in React to Edit PDF in Browser
Quick guide to using jsPDF in React applications for creating and editing PDF documents directly in the browser.
jsPDF Tutorial: Generate PDF in Browser Using HTML & JavaScript (Full Working Example)
Learn to create PDFs directly in the browser with jsPDF. Step-by-step guide with working examples for invoices, tickets, and styled documents.