[![npm](https://img.shields.io/npm/v/react-pdf.svg)](https://www.npmjs.com/package/react-pdf) ![downloads](https://img.shields.io/npm/dt/react-pdf.svg) [![CI](https://github.com/wojtekmaj/react-pdf/actions/workflows/ci.yml/badge.svg)](https://github.com/wojtekmaj/react-pdf/actions) # React-PDF Display PDFs in your React app as easily as if they were images. ## Lost? This package is used to _display_ existing PDFs. If you wish to _create_ PDFs using React, you may be looking for [@react-pdf/renderer](https://www.npmjs.com/package/@react-pdf/renderer). ## tl;dr - Install by executing `npm install react-pdf` or `yarn add react-pdf`. - Import by adding `import { Document } from 'react-pdf'`. - Use by adding ``. `file` can be a URL, base64 content, Uint8Array, and more. - Put `` components inside `` to render pages. ## Demo A minimal demo page can be found in `sample` directory. [Online demo](https://projects.wojtekmaj.pl/react-pdf/) is also available! ## Before you continue React-PDF is under constant development. This documentation is written for React-PDF 7.x branch. If you want to see documentation for other versions of React-PDF, use dropdown on top of GitHub page to switch to an appropriate tag. Here are quick links to the newest docs from each branch: - [v7.x](https://github.com/wojtekmaj/react-pdf/blob/v7.x/packages/react-pdf/README.md) - [v6.x](https://github.com/wojtekmaj/react-pdf/blob/v6.x/README.md) - [v5.x](https://github.com/wojtekmaj/react-pdf/blob/v5.x/README.md) - [v4.x](https://github.com/wojtekmaj/react-pdf/blob/v4.x/README.md) - [v3.x](https://github.com/wojtekmaj/react-pdf/blob/v3.x/README.md) - [v2.x](https://github.com/wojtekmaj/react-pdf/blob/v2.x/README.md) - [v1.x](https://github.com/wojtekmaj/react-pdf/blob/v1.x/README.md) ## Getting started ### Compatibility #### Browser support React-PDF supports all modern browsers. It is tested with the latest versions of Chrome, Edge, Safari, Firefox, and Opera. The following browsers are supported out of the box in React-PDF v9: - Chrome ≥119 - Edge ≥119 - Safari ≥17.4 - Firefox ≥121 You may extend the list of supported browsers by providing additional polyfills (e.g. for `Array.prototype.at`, `Promise.allSettled` or `Promise.withResolvers`) and either configuring your bundler to transpile `pdfjs-dist` and using [legacy PDF.js worker](#legacy-pdfjs-worker). If you need to support older browsers, you will need to use React-PDF v6 or earlier. #### React To use the latest version of React-PDF, your project needs to use React 16.8 or later. If you use an older version of React, please refer to the table below to a find suitable React-PDF version. | React version | Newest compatible React-PDF version | | ------------- | ----------------------------------- | | ≥16.8 | latest | | ≥16.3 | 5.x | | ≥15.5 | 4.x | #### Preact React-PDF may be used with Preact. ### Installation Add React-PDF to your project by executing `npm install react-pdf` or `yarn add react-pdf`. #### Next.js If you use Next.js without Turbopack enabled, add the following to your `next.config.js`: ```diff module.exports = { + webpack: (config) => { + config.resolve.alias.canvas = false; + return config; + }, } ``` If you use Next.js with Turbopack enabled, add `empty-module.ts` file: ```ts export default {}; ``` and add the following to your `next.config.js`: ```diff module.exports = { + experimental: { + turbo: { + resolveAlias: { + canvas: './empty-module.ts', + }, + }, + }, }; ``` ### Configure PDF.js worker For React-PDF to work, PDF.js worker needs to be provided. You have several options. #### Import worker (recommended) For most cases, the following example will work: ```ts import { pdfjs } from 'react-pdf'; pdfjs.GlobalWorkerOptions.workerSrc = new URL( 'pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url, ).toString(); ``` > [!NOTE] > In Next.js: > > - Using App Router, make sure to add `'use client';` to the top of the file. > - Using Pages Router, make sure to [disable SSR](https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#with-no-ssr) when importing the component you're using this code in. > [!NOTE] > pnpm requires an `.npmrc` file with `public-hoist-pattern[]=pdfjs-dist` for this to work.

See more examples

##### Parcel 2 For Parcel 2, you need to use a slightly different code: ```diff pdfjs.GlobalWorkerOptions.workerSrc = new URL( - 'pdfjs-dist/build/pdf.worker.min.mjs', + 'npm:pdfjs-dist/build/pdf.worker.min.mjs', import.meta.url, ).toString(); ```

#### Copy worker to public directory You will have to make sure on your own that `pdf.worker.mjs` file from `pdfjs-dist/build` is copied to your project's output folder. For example, you could use a custom script like: ```ts import path from 'node:path'; import fs from 'node:fs'; const pdfjsDistPath = path.dirname(require.resolve('pdfjs-dist/package.json')); const pdfWorkerPath = path.join(pdfjsDistPath, 'build', 'pdf.worker.mjs'); fs.copyFileSync(pdfWorkerPath, './dist/pdf.worker.mjs'); ``` #### Use external CDN ```ts import { pdfjs } from 'react-pdf'; pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`; ``` #### Legacy PDF.js worker If you need to support older browsers, you may use legacy PDF.js worker. To do so, follow the instructions above, but replace `/build/` with `legacy/build/` in PDF.js worker import path, for example: ```diff pdfjs.GlobalWorkerOptions.workerSrc = new URL( - 'pdfjs-dist/build/pdf.worker.min.mjs', + 'pdfjs-dist/legacy/build/pdf.worker.min.mjs', import.meta.url, ).toString(); ``` or: ```diff -pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/build/pdf.worker.min.mjs`; +pdfjs.GlobalWorkerOptions.workerSrc = `//unpkg.com/pdfjs-dist@${pdfjs.version}/legacy/build/pdf.worker.min.mjs`; ``` ### Usage Here's an example of basic usage: ```tsx import { useState } from 'react'; import { Document, Page } from 'react-pdf'; function MyApp() { const [numPages, setNumPages] = useState(); const [pageNumber, setPageNumber] = useState(1); function onDocumentLoadSuccess({ numPages }: { numPages: number }): void { setNumPages(numPages); } return (

Page {pageNumber} of {numPages}

); } ``` Check the [sample directory](https://github.com/wojtekmaj/react-pdf/tree/main/sample) in this repository for a full working example. For more examples and more advanced use cases, check [Recipes](https://github.com/wojtekmaj/react-pdf/wiki/Recipes) in [React-PDF Wiki](https://github.com/wojtekmaj/react-pdf/wiki/). ### Support for annotations If you want to use annotations (e.g. links) in PDFs rendered by React-PDF, then you would need to include stylesheet necessary for annotations to be correctly displayed like so: ```ts import 'react-pdf/dist/Page/AnnotationLayer.css'; ``` ### Support for text layer If you want to use text layer in PDFs rendered by React-PDF, then you would need to include stylesheet necessary for text layer to be correctly displayed like so: ```ts import 'react-pdf/dist/Page/TextLayer.css'; ``` ### Support for non-latin characters If you want to ensure that PDFs with non-latin characters will render perfectly, or you have encountered the following warning: ``` Warning: The CMap "baseUrl" parameter must be specified, ensure that the "cMapUrl" and "cMapPacked" API parameters are provided. ``` then you would also need to include cMaps in your build and tell React-PDF where they are. #### Copying cMaps First, you need to copy cMaps from `pdfjs-dist` (React-PDF's dependency - it should be in your `node_modules` if you have React-PDF installed). cMaps are located in `pdfjs-dist/cmaps`. ##### Vite Add [`vite-plugin-static-copy`](https://www.npmjs.com/package/vite-plugin-static-copy) by executing `npm install vite-plugin-static-copy --save-dev` or `yarn add vite-plugin-static-copy --dev` and add the following to your Vite config: ```diff +import path from 'node:path'; +import { createRequire } from 'node:module'; -import { defineConfig } from 'vite'; +import { defineConfig, normalizePath } from 'vite'; +import { viteStaticCopy } from 'vite-plugin-static-copy'; +const require = createRequire(import.meta.url); +const cMapsDir = normalizePath( + path.join(path.dirname(require.resolve('pdfjs-dist/package.json')), 'cmaps') +); export default defineConfig({ plugins: [ + viteStaticCopy({ + targets: [ + { + src: cMapsDir, + dest: '', + }, + ], + }), ] }); ``` ##### Webpack Add [`copy-webpack-plugin`](https://www.npmjs.com/package/copy-webpack-plugin) by executing `npm install copy-webpack-plugin --save-dev` or `yarn add copy-webpack-plugin --dev` and add the following to your Webpack config: ```diff +import path from 'node:path'; +import CopyWebpackPlugin from 'copy-webpack-plugin'; +const cMapsDir = path.join(path.dirname(require.resolve('pdfjs-dist/package.json')), 'cmaps'); module.exports = { plugins: [ + new CopyWebpackPlugin({ + patterns: [ + { + from: cMapsDir, + to: 'cmaps/' + }, + ], + }), ], }; ``` ##### Other tools If you use other bundlers, you will have to make sure on your own that cMaps are copied to your project's output folder. For example, you could use a custom script like: ```ts import path from 'node:path'; import fs from 'node:fs'; const cMapsDir = path.join(path.dirname(require.resolve('pdfjs-dist/package.json')), 'cmaps'); fs.cpSync(cMapsDir, 'dist/cmaps/', { recursive: true }); ``` #### Setting up React-PDF Now that you have cMaps in your build, pass required options to Document component by using `options` prop, like so: ```ts // Outside of React component const options = { cMapUrl: '/cmaps/', }; // Inside of React component ; ``` > [!NOTE] > Make sure to define `options` object outside of your React component, and use `useMemo` if you can't. Alternatively, you could use cMaps from external CDN: ```tsx // Outside of React component import { pdfjs } from 'react-pdf'; const options = { cMapUrl: `https://unpkg.com/pdfjs-dist@${pdfjs.version}/cmaps/`, }; // Inside of React component ; ``` ### Support for standard fonts If you want to support PDFs using standard fonts (deprecated in PDF 1.5, but still around), ot you have encountered the following warning: ``` The standard font "baseUrl" parameter must be specified, ensure that the "standardFontDataUrl" API parameter is provided. ``` then you would also need to include standard fonts in your build and tell React-PDF where they are. #### Copying fonts First, you need to copy standard fonts from `pdfjs-dist` (React-PDF's dependency - it should be in your `node_modules` if you have React-PDF installed). Standard fonts are located in `pdfjs-dist/standard_fonts`. ##### Vite Add [`vite-plugin-static-copy`](https://www.npmjs.com/package/vite-plugin-static-copy) by executing `npm install vite-plugin-static-copy --save-dev` or `yarn add vite-plugin-static-copy --dev` and add the following to your Vite config: ```diff +import path from 'node:path'; +import { createRequire } from 'node:module'; -import { defineConfig } from 'vite'; +import { defineConfig, normalizePath } from 'vite'; +import { viteStaticCopy } from 'vite-plugin-static-copy'; +const require = createRequire(import.meta.url); +const standardFontsDir = normalizePath( + path.join(path.dirname(require.resolve('pdfjs-dist/package.json')), 'standard_fonts') +); export default defineConfig({ plugins: [ + viteStaticCopy({ + targets: [ + { + src: standardFontsDir, + dest: '', + }, + ], + }), ] }); ``` ##### Webpack Add [`copy-webpack-plugin`](https://www.npmjs.com/package/copy-webpack-plugin) by executing `npm install copy-webpack-plugin --save-dev` or `yarn add copy-webpack-plugin --dev` and add the following to your Webpack config: ```diff +import path from 'node:path'; +import CopyWebpackPlugin from 'copy-webpack-plugin'; +const standardFontsDir = path.join(path.dirname(require.resolve('pdfjs-dist/package.json')), 'standard_fonts'); module.exports = { plugins: [ + new CopyWebpackPlugin({ + patterns: [ + { + from: standardFontsDir, + to: 'standard_fonts/' + }, + ], + }), ], }; ``` ##### Other tools If you use other bundlers, you will have to make sure on your own that standard fonts are copied to your project's output folder. For example, you could use a custom script like: ```ts import path from 'node:path'; import fs from 'node:fs'; const standardFontsDir = path.join( path.dirname(require.resolve('pdfjs-dist/package.json')), 'standard_fonts', ); fs.cpSync(standardFontsDir, 'dist/standard_fonts/', { recursive: true }); ``` #### Setting up React-PDF Now that you have standard fonts in your build, pass required options to Document component by using `options` prop, like so: ```tsx // Outside of React component const options = { standardFontDataUrl: '/standard_fonts/', }; // Inside of React component ; ``` > [!NOTE] > Make sure to define `options` object outside of your React component, and use `useMemo` if you can't. Alternatively, you could use standard fonts from external CDN: ```tsx // Outside of React component import { pdfjs } from 'react-pdf'; const options = { standardFontDataUrl: `https://unpkg.com/pdfjs-dist@${pdfjs.version}/standard_fonts`, }; // Inside of React component ; ``` ## User guide ### Document Loads a document passed using `file` prop. #### Props | Prop name | Description | Default value | Example values | | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | className | Class name(s) that will be added to rendered element along with the default `react-pdf__Document`. | n/a |

String:
`"custom-class-name-1 custom-class-name-2"`
Array of strings:
`["custom-class-name-1", "custom-class-name-2"]`

String:
`"An error occurred!"`
React element:
`
An error occurred!
`
Function:
`this.renderError`

| | externalLinkRel | Link rel for links rendered in annotations. | `"noopener noreferrer nofollow"` | One of valid [values for `rel` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-rel).

`"noopener"`
`"noreferrer"`
`"nofollow"`
`"noopener noreferrer"`

| | externalLinkTarget | Link target for external links rendered in annotations. | unset, which means that default behavior will be used | One of valid [values for `target` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target).

`"_self"`
`"_blank"`
`"_parent"`
`"_top"`

| | file | What PDF should be displayed.
Its value can be an URL, a file (imported using `import … from …` or from file input form element), or an object with parameters (`url` - URL; `data` - data, preferably Uint8Array; `range` - PDFDataRangeTransport.
**Warning**: Since equality check (`===`) is used to determine if `file` object has changed, it must be memoized by setting it in component's state, `useMemo` or other similar technique. | n/a |

URL:
`"https://example.com/sample.pdf"`
File:
`import importedPdf from '../static/sample.pdf'` and then
`sample`
Parameter object:
`{ url: 'https://example.com/sample.pdf' }`

| | imageResourcesPath | The path used to prefix the src attributes of annotation SVGs. | n/a (pdf.js will fallback to an empty string) | `"/public/images/"` | | inputRef | A prop that behaves like [ref](https://reactjs.org/docs/refs-and-the-dom.html), but it's passed to main `

` rendered by `` component. | n/a |

Function:
`(ref) => { this.myDocument = ref; }`
Ref created using `createRef`:
`this.ref = createRef();`
…
`inputRef={this.ref}`
Ref created using `useRef`:
`const ref = useRef();`
…
`inputRef={ref}`

String:
`"Please wait!"`
React element:
`
Please wait!
`
Function:
`this.renderLoader`

String:
`"Please select a file."`
React element:
`
Please select a file.
`
Function:
`this.renderNoData`

| | onItemClick | Function called when an outline item or a thumbnail has been clicked. Usually, you would like to use this callback to move the user wherever they requested to. | n/a | `({ dest, pageIndex, pageNumber }) => alert('Clicked an item from page ' + pageNumber + '!')` | | onLoadError | Function called in case of an error while loading a document. | n/a | `(error) => alert('Error while loading document! ' + error.message)` | | onLoadProgress | Function called, potentially multiple times, as the loading progresses. | n/a | `({ loaded, total }) => alert('Loading a document: ' + (loaded / total) * 100 + '%')` | | onLoadSuccess | Function called when the document is successfully loaded. | n/a | `(pdf) => alert('Loaded a file with ' + pdf.numPages + ' pages!')` | | onPassword | Function called when a password-protected PDF is loaded. | Function that prompts the user for password. | `(callback) => callback('s3cr3t_p4ssw0rd')` | | onSourceError | Function called in case of an error while retrieving document source from `file` prop. | n/a | `(error) => alert('Error while retrieving document source! ' + error.message)` | | onSourceSuccess | Function called when document source is successfully retrieved from `file` prop. | n/a | `() => alert('Document source retrieved!')` | | options | An object in which additional parameters to be passed to PDF.js can be defined. Most notably:

`cMapUrl`;
`httpHeaders` - custom request headers, e.g. for authorization);
`withCredentials` - a boolean to indicate whether or not to include cookies in the request (defaults to `false`)

For a full list of possible parameters, check [PDF.js documentation on DocumentInitParameters](https://mozilla.github.io/pdf.js/api/draft/module-pdfjsLib.html#~DocumentInitParameters).

**Note**: Make sure to define options object outside of your React component, and use `useMemo` if you can't. | n/a | `{ cMapUrl: '/cmaps/' }` | | renderMode | Rendering mode of the document. Can be `"canvas"`, `"custom"` or `"none"`. If set to `"custom"`, `customRenderer` must also be provided. | `"canvas"` | `"custom"` | | rotate | Rotation of the document in degrees. If provided, will change rotation globally, even for the pages which were given `rotate` prop of their own. `90` = rotated to the right, `180` = upside down, `270` = rotated to the left. | n/a | `90` | ### Page Displays a page. Should be placed inside ``. Alternatively, it can have `pdf` prop passed, which can be obtained from ``'s `onLoadSuccess` callback function, however some advanced functions like rendering annotations and linking between pages inside a document may not be working correctly. #### Props | Prop name | Description | Default value | Example values | | ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | canvasBackground | Canvas background color. Any valid `canvas.fillStyle` can be used. | n/a | `"transparent"` | | canvasRef | A prop that behaves like [ref](https://reactjs.org/docs/refs-and-the-dom.html), but it's passed to `

pdfviewer vs react-pdf vs react-pdf-component vs react-pdf-js

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past