Createa simple PDF viewer using HTML, CSS and JavaScript

By Raj Pakhurde / August 17, 2024

Views: 67

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.js library 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:-

Leave a Comment Cancel Reply