📄 How to Implement a PDF Viewer with Page Navigation in React

Hardik Prajapati — Wed, 12 Feb 2025 06:19:52 +0000

Working with PDFs in a React app? Want to add a jump to the page feature? 📜 In this blog, I’ll show you how to use @react-pdf-viewer to display a PDF and navigate to a specific page using a page number! 🚀

📦 Packages Required

Before we start, install the required packages:

npm install @react-pdf-viewer/core @react-pdf-viewer/page-navigation pdfjs-dist

🛠️ Setting Up the Component

Here’s the complete PDFViewer component that:

✅ Loads a PDF file from a given URL 📂

✅ Allows jumping to a specific page using page number 📌

✅ Uses

@react-pdf-viewer/page-navigation plugin for navigation

import React, { useEffect, useRef } from "react";
import { Viewer, Worker } from "@react-pdf-viewer/core";
import { pageNavigationPlugin } from "@react-pdf-viewer/page-navigation";
import * as pdfjs from "pdfjs-dist";
import "pdfjs-dist/build/pdf.worker.entry";
import "@react-pdf-viewer/core/lib/styles/index.css";

// Fix: Set workerSrc manually
pdfjs.GlobalWorkerOptions.workerSrc = new URL(
  "pdfjs-dist/build/pdf.worker.min.js",
  import.meta.url
).toString();

const PDFViewer = ({ docUrl, pageNumber }) => {
  const pageNavPluginInstance = pageNavigationPlugin();
  const { jumpToPage } = pageNavPluginInstance;

  useEffect(() => {
    if (pageNumber > 0) {
      jumpToPage(pageNumber - 1);
    }
  }, [pageNumber, jumpToPage]);

  if (!docUrl) {
    return (
      <div
        className="mr-4"
        style={{
          width: "40%",
          border: "2px solid gray",
          borderRadius: "10px",
          overflow: "hidden",
        }}
      >
        <h5
          style={{
            display: "flex",
            justifyContent: "center",
            alignItems: "center",
            height: "100%",
            color: "gray",
          }}
        >
          No document URL provided.
        </h5>
      </div>
    );
  }

  return (
    <div
      className="ml-4"
      style={{
        width: "40%",
        border: "2px solid gray",
        borderRadius: "10px",
        overflow: "hidden",
      }}
    >
      <Worker workerUrl={pdfjs.GlobalWorkerOptions.workerSrc}>
        <Viewer fileUrl={docUrl} plugins={[pageNavPluginInstance]} />
      </Worker>
    </div>
  );
};

export default PDFViewer;

🔍 How It Works?

1️⃣ docUrl: Pass the PDF file URL to display the document.

2️⃣ pageNumber: Set this to the page you want to jump to.

3️⃣ pageNavigationPlugin: Helps us navigate to a page.

4️⃣ useEffect Hook: When pageNumber updates, the viewer jumps to that page automatically.

🎯 Usage Example

Here’s how you can use this component in your app:

<PDFViewer docUrl="https://example.com/sample.pdf" pageNumber={5} />

This will open the PDF and jump to page 5 automatically! 📖✨

🚀 Conclusion