Introduction to pdfjs-dist and React

In the world of web development, being able to integrate and display various types of content effectively is crucial. One such content type is PDF files, which remain a standard format for documents across many industries. To work with PDFs in the web environment, pdfjs-dist is a powerful library that enables developers to render PDF documents using HTML5 technologies.

This article focuses on the pdfjs-dist library version 4.3.136 and how you can seamlessly integrate it into a React application. We’ll explore its capabilities, how to set it up, and provide concrete examples to illustrate its use effectively.

By the end of this tutorial, you should be able to efficiently incorporate PDF viewing functionality into your React applications, providing your users with a rich and interactive document experience.

Setting Up Your React Application

Before diving into the integration, let’s ensure that your React environment is properly set up. If you’re starting from scratch, create a new React app using Create React App, a tool that sets up your project with sensible defaults and configurations.

npx create-react-app pdf-viewer-example

Once your application is created, navigate to the project directory:

cd pdf-viewer-example

Before moving forward, you need to install the pdfjs-dist package. This can be done using npm or yarn. Choose one of the following commands:

npm install pdfjs-dist

yarn add pdfjs-dist

With the library installed, you’re ready to start coding!

Implementing the PDF Viewer

Now, let’s implement a simple PDF viewer component using pdfjs-dist. Create a new file named PdfViewer.js in the src directory. This component will handle rendering the PDF document. Start by importing necessary libraries and styles:

import React, { useEffect, useRef } from 'react';
import { pdfjs } from 'pdfjs-dist';

const PdfViewer = ({ pdfUrl }) => {
    const canvasRef = useRef(null);
    useEffect(() => {
        const loadPdf = async () => {
            const loadingTask = pdfjs.getDocument(pdfUrl);
            const pdf = await loadingTask.promise;

            const page = await pdf.getPage(1);
            const scale = 1.5;
            const viewport = page.getViewport({ scale });

            const canvas = canvasRef.current;
            const context = canvas.getContext('2d');
            canvas.height = viewport.height;
            canvas.width = viewport.width;

            const renderContext = {
                canvasContext: context,
                viewport,
            };
            await page.render(renderContext).promise;
        };

        loadPdf();
    }, [pdfUrl]);

    return ;
};

export default PdfViewer;

In this component, we use the useEffect hook to load the PDF document when the component mounts. The pdfjs.getDocument function fetches the PDF from the provided URL. Next, we render the first page of the PDF onto a canvas element using the canvasRef hook.

Configuring the PDF URL

To display a PDF file, you need to pass a pdfUrl prop to the PdfViewer component. You can do this in your App.js file. Update the content as follows:

import React from 'react';
import PdfViewer from './PdfViewer';

function App() {
    return (
        

            
PDF Viewer Example
            
        
    );
}

export default App;

This configuration allows you to replace the pdfUrl with the link to any PDF document you want to display. Make sure that the URL points to a valid PDF file that is accessible.

Handling Multiple Pages and Navigation

To enhance your PDF viewer, you can implement functionality that allows users to navigate through multiple pages. The following example expands on our previous code by managing the current page state and adding buttons to navigate through the PDF document.

import React, { useEffect, useRef, useState } from 'react';
import { pdfjs } from 'pdfjs-dist';

const PdfViewer = ({ pdfUrl }) => {
    const canvasRef = useRef(null);
    const [pageNum, setPageNum] = useState(1);
    const [pdfDoc, setPdfDoc] = useState(null);

    const loadPdf = async (num) => {
        const loadingTask = pdfjs.getDocument(pdfUrl);
        const pdf = await loadingTask.promise;
        const page = await pdf.getPage(num);

        const scale = 1.5;
        const viewport = page.getViewport({ scale });

        const canvas = canvasRef.current;
        const context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;

        const renderContext = {
            canvasContext: context,
            viewport,
        };
        await page.render(renderContext).promise;
        setPdfDoc(pdf);
    };

    useEffect(() => {
        loadPdf(pageNum);
    }, [pageNum]);

    const goToPrevPage = () => {
        if (pageNum <= 1) return;
        setPageNum(prev => prev - 1);
    };

    const goToNextPage = () => {
        if (pdfDoc && pageNum >= pdfDoc.numPages) return;
        setPageNum(prev => prev + 1);
    };

    return (
        

            
            

                Previous
                = pdfDoc.numPages}>Next
            
        
    );
};

export default PdfViewer;

This new version maintains the current page number in a state variable called pageNum, which updates whenever users navigate. The loadPdf function is also updated to load and render the appropriate page based on the current page number.

Adding Styling and User Experience Improvements

While functionality is key, styling greatly enhances user experience. To improve the viewer’s visual appeal, you can add CSS styles. Create a new CSS file named PdfViewer.css and import it in your PdfViewer.js:

import './PdfViewer.css';

In PdfViewer.css, you can add styling for the buttons and the canvas:

canvas {
    border: 1px solid #ddd;
    display: block;
    margin: 20px auto;
}

button {
    margin: 5px;
    padding: 10px 15px;
    background: #007BFF;
    border: none;
    color: white;
    cursor: pointer;
}

button:disabled {
    background: #ccc;
    cursor: not-allowed;
}

This styling applies a border to the PDF canvas and enhances the buttons with some padding, colors, and hover effects. You can further customize the styles according to your application’s theme.

Conclusion: Boosting Your React Toolkit with pdfjs-dist

Incorporating pdfjs-dist allows you to provide users with robust PDF viewing capabilities within your React applications. We’ve covered installation, basic implementation, handling multiple pages, and styling to improve user experience. This makes your application not only functional but also enjoyable to interact with.

As a developer, mastering libraries like pdfjs-dist strengthens your skill set and enables you to create more dynamic and feature-rich web applications. Don’t hesitate to experiment with further enhancements, such as search functionality or bookmarks, as you become more comfortable with the library.

By leveraging the power of JavaScript frameworks along with libraries like pdfjs-dist, you can unlock new possibilities and enrich your users’ experiences. Happy coding!