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 - This can be done in your React component or globally in your application setup. Example code: import * as pdfjsLib from "pdfjs-dist"; pdfjsLib.GlobalWorkerOptions.workerSrc = "/path-to/pdf.worker.min.mjs"; Problem: Different browsers may have varying levels of support for HTML5 features used by PDF.js, leading to inconsistencies in rendering or functionality.
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
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
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
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);