In this article, you will learn how we can create a simple PDF viewer using HTML, CSS, and JavaScript.
Let’s see how we can implement the following features:-
- Select a PDF file from File Explorer
- View in the PDF viewer
For building a PDF viewer using HTML, CSS, and JavaScript we are going to use pdf.js a library. pdf.js is an open source library maintained by Mozilla. pdf.js allows us to render PDFs directly in the browser.
Steps to Create a PDF Viewer
Step 1:-
- Include
pdf.jslibrary in our project, In this tutorial we are using the CDN link to our project so that we can easy access the library.
Step 2:-
- Create an HTML structure to display and select PDF files from File Explorer and apply styles to design the viewer using CSS.
Step 3:-
- Render the PDF using JavaScript
Code
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple PDF Viewer</title>
<!-- Basic css styling -->
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
#pdf-viewer {
width: 80%;
height: 80%;
border: 1px solid #ccc;
overflow-y: auto;
background-color: #fff;
padding: 10px;
margin-top: 20px;
}
canvas {
width: 100%;
margin-bottom: 10px;
}
#file-input {
margin-bottom: 20px;
}
</style>
</head>
<body>
<h1>Simple PDF Viewer</h1>
<!-- input tag to accept pdf file -->
<input type="file" id="file-input" accept="application/pdf" />
<!-- normal div to display selected pdf -->
<div id="pdf-viewer"></div>
<!-- Include PDF.js CDN of pdf.js library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.5.141/pdf.min.js"></script>
<script src="script.js"></script>
</body>
</html>
// script.js
// Selecting the html elements
const displayPdf = document.getElementById('pdf-viewer');
const fileInput = document.getElementById('file-input');
// Setting up pdf.js library
const pdf_js_library = window['pdfjs-dist/build/pdf'];
pdf_js_library.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.5.141/pdf.worker.min.js';
// when user select pdf this function will run .
fileInput.addEventListener('change', event => {
// storing select pdf in file variable.
const file = event.target.files[0];
// if file type is equal to pdf if block will run
// else it will show alert box.
if (file.type === 'application/pdf') {
// create a helper that can read the content of the file.
const fileReader = new FileReader();
// once file is fully loaded this function will run.
fileReader.onload = function() {
// turning file into a special type of array called a Uint8Array.
// without this pdf.js library will not understand the file.
const typedArray = new Uint8Array(this.result);
// getDocument is pdf.js library function which takes
// Uint8Array file and start processing.
pdf_js_library.getDocument(typedArray).promise.then(pdf => {
displayPdf.innerHTML = ''; // Clear previous content
// pdf can have multiple pages so we are running
// for loop to render one by one
for (let pageNumber = 1; pageNumber <= pdf.numPages; pageNumber++) {
pdf.getPage(pageNumber).then(page => {
// We create a canvas, which is like a blank piece of paper where we can draw.
// Then we set its height and width to match the size of the PDF page.
const viewport = page.getViewport({ scale: 1.5 });
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.height = viewport.height;
canvas.width = viewport.width;
// finally we are rendering the pdf page
page.render({
canvasContext: context,
viewport: viewport
});
displayPdf.appendChild(canvas);
});
}
});
};
fileReader.readAsArrayBuffer(file);
} else {
alert('Please select a valid PDF file.');
}
});
Output:-
