Display PDFs in your React app as easily as if they were images.

This package is used to display existing PDFs. If you wish to create PDFs using React, you may be looking for @react-pdf/renderer.

• Install by executing npm install react-pdf or yarn add react-pdf.
• Import by adding import { Document } from 'react-pdf'.
• Use by adding <Document file="..." />. file can be a URL, base64 content, Uint8Array, and more.
• Put <Page /> components inside <Document /> to render pages.

A minimal demo page can be found in sample directory.

Online demo is also available!

React-PDF is under constant development. This documentation is written for React-PDF 5.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:

• v4.x
• v3.x
• v2.x
• v1.x

To use the latest version of React-PDF, your project needs to use React 16.3 or later.

If you use an older version of React, please refer to the table below to a find suitable React-PDF version. Don't worry - as long as you're running React 15.5 or later, you won't be missing out a lot!

Internet Explorer is not supported in React-PDF 5.x or later. If you need Internet Explorer support, you will need to use React-PDF 4.x instead. Don't worry - it still receives bug fixes and even occasional small features!

Add React-PDF to your project by executing npm install react-pdf or yarn add react-pdf.

Here's an example of basic usage:

import React, { useState } from 'react';
import { Document, Page } from 'react-pdf';

function MyApp() {
  const [numPages, setNumPages] = useState(null);
  const [pageNumber, setPageNumber] = useState(1);

  function onDocumentLoadSuccess({ numPages }) {
    setNumPages(numPages);
  }

  return (
    <div>
      <Document
        file="somefile.pdf"
        onLoadSuccess={onDocumentLoadSuccess}
      >
        <Page pageNumber={pageNumber} />
      </Document>
      <p>Page {pageNumber} of {numPages}</p>
    </div>
  );
}

Check the sample directory in this repository for a full working example. For more examples and more advanced use cases, check Recipes in React-PDF Wiki.

It is crucial for performance to use PDF.js worker whenever possible. This ensures that PDF files will be rendered in a separate thread without affecting page performance. To make things a little easier, we've prepared several entry points you can use.

Instead of directly importing modules you need from 'react-pdf', import them like so:

// using ES6 modules
import { Document, Page } from 'react-pdf/dist/esm/entry.webpack';

// using CommonJS modules
import { Document, Page } from 'react-pdf/dist/umd/entry.webpack';

Instead of directly importing modules you need from 'react-pdf', import them like so:

// using ES6 modules
import { Document, Page } from 'react-pdf/dist/esm/entry.parcel';

// using CommonJS modules
import { Document, Page } from 'react-pdf/dist/umd/entry.parcel';

Create React App uses Webpack under the hood, so you can follow Webpack instructions.

Standard instructions will also work. In Create React App, you can copy pdf.worker.js file from pdfjs-dist/build to public directory in order for it to be copied to your project's output folder at build time.

If you use Browserify or other bundling tools, you will have to make sure on your own that pdf.worker.js file from pdfjs-dist/build is copied to your project's output folder.

If you don't need to debug pdf.worker.js, you can use pdf.worker.min.js file instead, which is roughly half the size. For this to work, however, you will need to specify workerSrc manually like so:

import { pdfjs } from 'react-pdf';
pdfjs.GlobalWorkerOptions.workerSrc = 'pdf.worker.min.js';

Alternatively, you could use the minified pdf.worker.min.js from an external CDN:

import { pdfjs } from 'react-pdf';
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`;

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:

// using ES6 modules
import 'react-pdf/dist/esm/Page/AnnotationLayer.css';

// using CommonJS modules
import 'react-pdf/dist/umd/Page/AnnotationLayer.css';

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.

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.

Add copy-webpack-plugin to your project if you haven't already:

npm install copy-webpack-plugin --save-dev

Now, in your Webpack config, import the plugin:

import CopyWebpackPlugin from 'copy-webpack-plugin';

and in plugins section of your config, add the following:

new CopyWebpackPlugin([
  {
    from: 'node_modules/pdfjs-dist/cmaps/',
    to: 'cmaps/'
  },
]),

If you use Parcel, Browserify or other bundling tools, you will have to make sure on your own that cMaps are copied to your project's output folder.

Now that you have cMaps in your build, pass required options to Document component by using options prop, like so:

<Document
  options={{
    cMapUrl: 'cmaps/',
    cMapPacked: true,
  }}
/>

Alternatively, you could use cMaps from external CDN:

import { pdfjs } from 'react-pdf';

<Document
  options={{
    cMapUrl: `//cdn.jsdelivr.net/npm/pdfjs-dist@${pdfjs.version}/cmaps/`,
    cMapPacked: true,
  }}
/>

Loads a document passed using file prop.

Displays a page. Should be placed inside <Document />. Alternatively, it can have pdf prop passed, which can be obtained from <Document />'s onLoadSuccess callback function, however some advanced functions like linking between pages inside a document may not be working correctly.

Displays an outline (table of contents). Should be placed inside <Document />. Alternatively, it can have pdf prop passed, which can be obtained from <Document />'s onLoadSuccess callback function.

• React-PDF Wiki

The MIT License.

Wojciech Maj [email protected] https://wojtekmaj.pl

This project wouldn't be possible without awesome work of Niklas Närhinen [email protected] who created its initial version and without Mozilla, author of pdf.js. Thank you!

Thank you to all our sponsors! Become a sponsor and get your image on our README on GitHub.

Thank you to all our backers! Become a backer and get your image on our README on GitHub.

Thank you to all our contributors that helped on this project!