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 Top answer 1 of 5
25
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>;
}
2 of 5
9
This import will clear the undefined issue:
import * as pdfjsLib from "pdfjs-dist/build/pdf";
npm
npmjs.com › package › pdfjs-dist
pdfjs-dist - npm
Generic build of Mozilla's PDF.js library.. Latest version: 5.4.449, last published: 12 days ago. Start using pdfjs-dist in your project by running `npm i pdfjs-dist`. There are 2279 other projects in the npm registry using pdfjs-dist.
» npm install pdfjs-dist
Published Nov 29, 2025
Version 5.4.449
Repository https://github.com/mozilla/pdf.js
Homepage https://mozilla.github.io/pdf.js/
Videos
13:08
Build a React.js PDF Viewer & Editor With Controls Using ...
03:20
Build a React.js PDF Renderer & Editor in Browser Using PDF-LIB ...
27:18
Build a React.js PDF Document Custom Viewer With Validation & ...
23:37
How to choose the right PDF SDK: PDF.js vs. react-pdf Explained ...
How to use PDF.js in React?
To use PDF.js in React, import the pdfjs-dist package and create a component that loads and displays PDF files using the library's API.
dhiwise.com
dhiwise.com › post › how-to-integrate-pdfjs-dist-for-pdf-rendering
A Beginner’s Guide To Pdfjs-dist Integration
What is PDF.js used for?
PDF.js is used for viewing, parsing, and rendering PDF files directly in the browser, providing a seamless user experience.
dhiwise.com
dhiwise.com › post › how-to-integrate-pdfjs-dist-for-pdf-rendering
A Beginner’s Guide To Pdfjs-dist Integration
Is PDF.js free to use?
Yes, PDF.js is free and open-source, distributed under the Apache 2.0 license, allowing for both personal and commercial use.
dhiwise.com
dhiwise.com › post › how-to-integrate-pdfjs-dist-for-pdf-rendering
A Beginner’s Guide To Pdfjs-dist Integration
Nutrient
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 - You’ll use Next.js, a popular React framework, to create the project structure. Run the following command to scaffold a new Next.js project inside a folder named pdfjs-demo: ... When prompted, press Enter to accept the default options. This will set up the project with the recommended settings, allowing you to focus on integrating PDF.js with Next.js. Next, navigate into your project directory and install the distribution build of PDF.js, available on npm as pdfjs-dist(opens in a new tab):
CodeSandbox
codesandbox.io › examples › package › pdfjs-dist
pdfjs-dist examples - CodeSandbox
react-pdf-viewer-vite · 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 ·
GitHub
github.com › wojtekmaj › react-pdf
GitHub - wojtekmaj/react-pdf: Display PDFs in your React app as easily as if they were images.
then you would also need to include wasm directory in your build and tell React-PDF where it is. First, you need to copy wasm from pdfjs-dist (React-PDF's dependency - it should be in your node_modules if you have React-PDF installed).
Starred by 10.7K users
Forked by 981 users
Languages TypeScript 94.3% | CSS 5.6% | HTML 0.1%
GitHub
github.com › mikecousins › react-pdf-js
GitHub - mikecousins/react-pdf-js: A React component to wrap PDF.js
Install with yarn add @mikecousins/react-pdf pdfjs-dist or npm install @mikecousins/react-pdf pdfjs-dist
Starred by 799 users
Forked by 151 users
Languages TypeScript 90.7% | JavaScript 6.9% | CSS 2.0% | HTML 0.4%
Snyk
snyk.io › advisor › pdfjs-dist › pdfjs-dist code examples
Top 5 pdfjs-dist Code Examples | Snyk
import * as React from 'react'; import {Logger} from 'polar-shared/src/logger/Logger'; import {URLStr} from "polar-shared/src/util/Strings"; import PDFJS from 'pdfjs-dist'; import {Numbers} from "polar-shared/src/util/Numbers"; console.log("Running with pdf.js version: " + PDFJS.version); // TODO: I'm not sure this is the safest way to find the worker path.
React PDF Viewer
react-pdf-viewer.dev › docs › basic-usage
Basic usage - React PDF Viewer
return <Worker workerUrl="https://unpkg.com/[email protected]/build/pdf.worker.min.js">...</Worker>;
GitHub
github.com › wojtekmaj › react-pdf › discussions › 1520
Mismatching worker version with pdfjs-dist as a direct dependency (answered ✅) · wojtekmaj/react-pdf · Discussion #1520
In this case I have this "pdfjs-dist": "3.7.107" in my package.json, but react-pdf depends on "pdfjs-dist": "3.6.172".
Author wojtekmaj
npm
npmjs.com › package › react-pdf
react-pdf - npm
then you would also need to include wasm directory in your build and tell React-PDF where it is. First, you need to copy wasm from pdfjs-dist (React-PDF's dependency - it should be in your node_modules if you have React-PDF installed).
» npm install react-pdf
Published Oct 09, 2025
Version 10.2.0
Author Wojciech Maj
Repository https://github.com/wojtekmaj/react-pdf
Stack Overflow
stackoverflow.com › questions › tagged › pdfjs-dist
Newest 'pdfjs-dist' Questions - Stack Overflow
Node version: v16.12.0. Below are the versions of react "react": "^19.1.1", Here there are three packages related to pdf: react-pdf-viewer (... ... I'm using pdfjs-dist (version 4.10.38) in a Next.js 15 App Router project ([email protected]) to render and interact with PDFs.
GitHub
github.com › wojtekmaj › react-pdf › issues › 1822
PDFjs-dist error · Issue #1822 · wojtekmaj/react-pdf
April 14, 2024 - When pdfjs-dist is imported from react-pdf (or components that use pdfjs-dist) or even the pdfjs-dist is imported, the error occures:
Published Jun 06, 2024
GitHub
github.com › wojtekmaj › react-pdf › issues › 1855
Can't resolve 'pdfjs-dist/build/pdf.worker.min.mjs in Nextjs 14 app router · Issue #1855 · wojtekmaj/react-pdf
August 13, 2024 - import { Box, CircularProgress, Pagination, Stack, Typography } from '@mui/material'; import React, { useState } from 'react'; import { DocumentText } from 'iconsax-react'; import 'react-pdf/dist/esm/Page/AnnotationLayer.css'; import 'react-pdf/dist/esm/Page/TextLayer.css'; import { Document, Page, pdfjs } from 'react-pdf'; pdfjs.GlobalWorkerOptions.workerSrc = new URL('pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url).toString();
Published Aug 13, 2024
CloudDefense.ai
clouddefense.ai › code › javascript › example › pdfjs-dist
Top 10 Examples of pdfjs-dist code in Javascript
PDFJS.GlobalWorkerOptions.workerSrc = '../../../node_modules/pdfjs-dist/build/pdf.worker.js'; const log = Logger.create(); console.log("FIXME: ", (PDFJS as any).renderTextLayer); export class PDFViewer extends React.Component { // https://mozilla.github.io/pdf.js/examples/ constructor(props: IProps, context: any) { super(props, context); this.doRender = this.doRender.bind(this);