pdfjs react example - Brave Search

How to reference pdf.js library in React?

stackoverflow.com › questions › 55371402 › how-to-reference-pdf-js-library-in-react

I spent too much time today, piecing together fragments of other answers to this question. So here is a complete answer.

First you install pdfjs-dist:

npm install pdfjs-dist

And here is how to use it in an actual viewer component:

import React, { useEffect, useState, useRef, useCallback } from 'react';
import pdfjsLib from "pdfjs-dist/build/pdf";
import pdfjsWorker from "pdfjs-dist/build/pdf.worker.entry";

export default function PdfViewer({url}){
  const canvasRef = useRef();
  pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;

  const [pdfRef, setPdfRef] = useState();
  const [currentPage, setCurrentPage] = useState(1);

  const renderPage = useCallback((pageNum, pdf=pdfRef) => {
    pdf && pdf.getPage(pageNum).then(function(page) {
      const viewport = page.getViewport({scale: 1.5});
      const canvas = canvasRef.current;
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      const renderContext = {
        canvasContext: canvas.getContext('2d'),
        viewport: viewport
      };
      page.render(renderContext);
    });   
  }, [pdfRef]);

  useEffect(() => {
    renderPage(currentPage, pdfRef);
  }, [pdfRef, currentPage, renderPage]);

  useEffect(() => {
    const loadingTask = pdfjsLib.getDocument(url);
    loadingTask.promise.then(loadedPdf => {
      setPdfRef(loadedPdf);
    }, function (reason) {
      console.error(reason);
    });
  }, [url]);

  const nextPage = () => pdfRef && currentPage < pdfRef.numPages && setCurrentPage(currentPage + 1);

  const prevPage = () => currentPage > 1 && setCurrentPage(currentPage - 1);

  return <canvas ref={canvasRef}></canvas>;
}

Answer from Arntor on Stack Overflow

nutrient.io › blog › sdk › how to build a reactjs viewer with pdfjs

Build a React PDF viewer with PDF.js and Next.js: Step-by-step tutorial

July 16, 2025 - Learn how to build a fast, customizable PDF viewer in React using PDF.js and Next.js. Includes full code examples, setup instructions, and a comparison with Nutrient’s feature-rich PDF SDK.

codesandbox.io › examples › package › react-pdf-js

react-pdf-js examples - CodeSandbox

Use this online react-pdf-js playground to view and fork react-pdf-js example apps and templates on CodeSandbox.

Videos

Build a React.js PDF Document Custom Viewer With Validation & ...

ReactPDF Basic Setup - YouTube

December 6, 2021

How to View Pdf in React using React PDF || React PDF Viewer || ...

October 10, 2023

How to view Pdf in React JS using react-pdf || Create customized ...

September 10, 2025

Build a React.js PDF Viewer & Editor With Controls Using ...

Build a React.js PDF Renderer & Editor in Browser Using PDF-LIB ...

October 1, 2023

github.com › wojtekmaj › react-pdf

GitHub - wojtekmaj/react-pdf: Display PDFs in your React app as easily as if they were images.

For most cases, the following example will work: import { pdfjs } from 'react-pdf'; pdfjs.GlobalWorkerOptions.workerSrc = new URL( 'pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url, ).toString(); Warning ·

Starred by 10.7K users

Forked by 981 users

Languages TypeScript 94.3% | CSS 5.6% | HTML 0.1%

npmjs.com › package › react-pdf

react-pdf - npm

For most cases, the following example will work: import { pdfjs } from 'react-pdf'; pdfjs.GlobalWorkerOptions.workerSrc = new URL( 'pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url, ).toString(); [!WARNING] The workerSrc must be set in ...

      » npm install react-pdf

Published Oct 09, 2025

Version 10.2.0

Author Wojciech Maj

Repository https://github.com/wojtekmaj/react-pdf

Homepage https://github.com/wojtekmaj/react-pdf#readme

github.com › mikecousins › react-pdf-js

GitHub - mikecousins/react-pdf-js: A React component to wrap PDF.js

pdfjs's PDFPageProxy object This can be undefined if page has not been loaded yet.

Starred by 799 users

Forked by 151 users

Languages TypeScript 90.7% | JavaScript 6.9% | CSS 2.0% | HTML 0.4%

stackoverflow.com › questions › 55371402 › how-to-reference-pdf-js-library-in-react

How to reference pdf.js library in React?

I spent too much time today, piecing together fragments of other answers to this question. So here is a complete answer.

First you install pdfjs-dist:

npm install pdfjs-dist

And here is how to use it in an actual viewer component:

import React, { useEffect, useState, useRef, useCallback } from 'react';
import pdfjsLib from "pdfjs-dist/build/pdf";
import pdfjsWorker from "pdfjs-dist/build/pdf.worker.entry";

export default function PdfViewer({url}){
  const canvasRef = useRef();
  pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker;

  const [pdfRef, setPdfRef] = useState();
  const [currentPage, setCurrentPage] = useState(1);

  const renderPage = useCallback((pageNum, pdf=pdfRef) => {
    pdf && pdf.getPage(pageNum).then(function(page) {
      const viewport = page.getViewport({scale: 1.5});
      const canvas = canvasRef.current;
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      const renderContext = {
        canvasContext: canvas.getContext('2d'),
        viewport: viewport
      };
      page.render(renderContext);
    });   
  }, [pdfRef]);

  useEffect(() => {
    renderPage(currentPage, pdfRef);
  }, [pdfRef, currentPage, renderPage]);

  useEffect(() => {
    const loadingTask = pdfjsLib.getDocument(url);
    loadingTask.promise.then(loadedPdf => {
      setPdfRef(loadedPdf);
    }, function (reason) {
      console.error(reason);
    });
  }, [url]);

  const nextPage = () => pdfRef && currentPage < pdfRef.numPages && setCurrentPage(currentPage + 1);

  const prevPage = () => currentPage > 1 && setCurrentPage(currentPage - 1);

  return <canvas ref={canvasRef}></canvas>;
}

This import will clear the undefined issue:

import * as pdfjsLib from "pdfjs-dist/build/pdf";

React renderer for creating PDF files on the browser and server

pdfjs.express › documentation › get-started › react

Integrate React & JavaScript PDF Viewer | PDF.js Express SDK

const MyComponent = () => { const viewer = useRef(null); return ( <div className="MyComponent"> <div className="header">React sample</div> <div className="webviewer" ref={viewer}></div> </div> ); }; Inside of useEffect hook or componentDidMount lifecycle method initialize WebViewer. Ensure that the path property in the constructor points to where you copied static assets node_modules/@pdftron/pdfjs-express/public in React public folder.

Find elsewhere

Google Bing Mojeek

github.com › yurydelendik › pdfjs-react

GitHub - yurydelendik/pdfjs-react: Simple example of using PDF.js components with React.

Simple example of using PDF.js components with React. - yurydelendik/pdfjs-react

Starred by 86 users

Forked by 36 users

Languages JavaScript 67.3% | HTML 18.6% | CSS 14.1%

dhiwise.com › post › ultimate-guide-to-using-pdfjs-react-in-your-react-application

Steps To Seamlessly Integrate Pdfjs-react Into Your React App

July 31, 2024 - In this example, we use a useEffect hook to load and render the first page of a PDF onto a canvas element when the component mounts. Performance optimization is crucial, especially when dealing with large PDF files or complex documents. pdfjs-react ...

React PDF Viewer

react-pdf-viewer.dev › docs › basic-usage

Basic usage - React PDF Viewer

However, if you use the Webpack bundler, setting the same version for both worker and the `pdfjs-dist` package can be automated. There are two ways to archive that: ... If you use the viewer component in different pages, it's recommended to place the `Worker` at the layout level. For example, in a typical React application, we often render the `App` component at a `root` element as following:

apryse.com › blog › building-react-pdf-viewer-with-pdfjs

How to Build a React PDF Viewer with PDF.js

October 17, 2018 - src/backends/pdfjs.js should now look like this. Make sure to update the version number if yours is different. That's it! If you check out http://localhost:3000, you should see your PDF displayed inside the PDF viewer in React.

codesandbox.io › examples › package › pdfjs-dist

pdfjs-dist examples - CodeSandbox

pdfjs-dist-vue · react-doc-viewerDocument viewer for react. Renders online/local documents. @react-pdf-viewer/examples · flexcomAplicacion para la comunicacion interna. pdf-viewer (forked) lex961Find more examples or templates · AboutGeneric build of Mozilla's PDF.js library.6,183,977Weekly Downloads ·

stackoverflow.com › questions › 73919619 › how-to-use-pdf-js-with-react

reactjs - How to use PDF.JS with React? - Stack Overflow

import * as PDFJS from "pdfjs-dist/build/pdf"; import * as pdfjsWorker from "pdfjs-dist/build/pdf.worker.entry"; window.PDFJS = PDFJS; export default function PDFViewer({ pdfFile }) { PDFJS.GlobalWorkerOptions.workerSrc = pdfjsWorker; const getPDFDoc = useCallback(async () => { const doc = await PDFJS.getDocument(pdfFile); doc.promise.then( (loadedPdf) => { setPdfRef(loadedPdf); }, function (reason) { console.error(reason); } ); }, []); useEffect(() => { getPDFDoc(); }, [getPDFDoc]); I doesn't seem to work at all. I have a custom config with webpack, typescript and SWC-loader. I have read all the related stackoverflow threads. How to properly parse a PDF with PDF.js in React?

reddit.com › r/reactjs › a deep dive into pdf.js layers and how to render truly interactive pdfs in react.

r/reactjs on Reddit: A deep dive into PDF.js layers and how to render truly interactive PDFs in React.

July 9, 2025 -

Hey r/reactjs,

I wanted to share an article I just wrote about a topic that can be surprisingly tricky: rendering PDFs in React.

It's easy enough to get a static image of a PDF page onto a <canvas>, but if you've ever tried to make the text selectable or have links that actually work, you know the real challenge begins there.

I ran into this and did a deep dive into how PDF.js actually works. It turns out the magic is in its layer system. My article breaks down the three key layers:

The Canvas Layer: The base visual representation of the PDF.
The Text Layer: A transparent layer of HTML elements positioned perfectly over the canvas, making the text selectable and searchable.
The Annotation Layer: Another transparent layer that handles things like clickable links within the PDF.

The post walks through what each layer does and then provides a step-by-step guide on how to build a React component that stacks these layers correctly to create a fully interactive and accessible PDF viewer.

Hope this is useful for anyone who's had to wrestle with PDFs in their projects! I'll be hanging around in the comments to answer any questions.

Article Link: Understanding PDF.js Layers and How to Use Them in ReactJS

Looks like a great learning resource when I start on the next project I want to do. Bookmarking for later.

Thanks for sharing.

reddit.com › r/react › how to use mozilla pdf.js with react.js for client-side rendering & basic tools?

r/react on Reddit: How to Use Mozilla PDF.js with React.js for Client-Side Rendering & Basic Tools?

July 27, 2023 -

Hey everyone,

I hope you're all doing well! 🖐️

I'm currently working on a React.js project that involves rendering PDFs on the client side, and I stumbled upon Mozilla's PDF.js library. While it seems promising, I'm facing some challenges when it comes to integrating it into my project and adding some basic tools like annotations and highlighting.However, I've been struggling to find comprehensive documentation on how to integrate PDF.js with React.js effectively.

Has anyone here successfully used PDF.js with React.js before? I'd really appreciate some guidance on the best practices for integration and any tips or resources to add basic tools for annotations and highlighting.

Feel free to share your experiences, code snippets, or any helpful tutorials that you've come across. Your insights will be of great help to a fellow developer.

Thank you all in advance! 😊🙏

Alternative: use an iframe inside your reactjs project, call pdfjs viewer and customise this page to your needs

I used PDF.js during a long time If it's only to display a PDF you can use the native embed HTML tag which allow you to embed any content such as PDF or media. The native pdf viewer of your browser will be used and that's the best way to have a fast & powerfull pdfviewer in your app. If you need some overrides, then PDF.js is good. But not so. You will facing to struggling issues and the documentation is not so clear... If your use case is simple, it's ok but if you need more customization, I suggest you to render a PDF as images server-side and display one image per page in your app.

pdfjs.express › documentation › get-started-viewer › react

Integrate React & JavaScript PDF Viewer | PDF.js Express Viewer SDK

import WebViewer from '@pdftron/pdfjs-express-viewer'; Create a reference where WebViewer will be placed or mounted. const MyComponent = () => { const viewer = useRef(null); return ( <div className="MyComponent"> <div className="header">React ...

npmjs.com › package › react-pdf-js

react-pdf-js - npm

Latest version: 5.1.0, last published: 6 years ago. Start using react-pdf-js in your project by running `npm i react-pdf-js`. There are 31 other projects in the npm registry using react-pdf-js.

      » npm install react-pdf-js

Published Jun 19, 2019

Version 5.1.0

Author mikecousins

Repository https://github.com/mikecousins/react-pdf-js

Homepage https://github.com/mikecousins/react-pdf-js#readme

nutrient.io › blog › sdk › how to build a reactjs pdf viewer with react pdf

React PDF viewer: Complete guide to building with react-pdf in 2025

August 12, 2025 - "pdfjs-dist/build/pdf.worker.min.mjs", import.meta.url, ).toString(); You can read more about how to configure a PDF.js worker in your project here(opens in a new tab). Now, start the application by running the following: Terminal window · npm run dev · One of the disadvantages of using react-pdf is that it doesn’t come with a UI. In this example, you’ve rendered two buttons to navigate between pages and showed the total number of pages.