1.6.3 • Published 6 years ago
react-with-pdf v1.6.3
React-PDF 
Easily display PDF files in your React application.
tl;dr
- Install by executing
npm install --save react-pdf. - Import by addding
import ReactPDF from 'react-pdf'. - Use by adding
<ReactPDF file="..." />.filecan be an URL, base64 content, Uint8Array, and more.
Demo
Demo page is included in sample directory.
Online demo is also available!
Getting started
Prerequisites
You'll need to have Node >= 4 on your machine.
We strongly recommend to use Node >= 6 and npm >= 3 for faster installation speed and better disk usage.
Your project needs to use React 15.0.0 or later.
Installation
Add React-PDF to your project by executing npm install --save react-pdf.
Usage
Here's an example of basic usage:
import ReactPDF from 'react-pdf';
class MyApp extends React.Component {
onDocumentLoad({ total }) {
this.setState({ total });
},
onPageLoad({ pageIndex, pageNumber }) {
this.setState({{ pageIndex, pageNumber });
}
render() {
return (
<div>
<ReactPDF
file="somefile.pdf"
pageIndex={2}
onDocumentLoad={this.onDocumentLoad}
onPageLoad={this.onPageLoad}
/>
<p>Page {this.state.pageNumber} of {this.state.total}</p>
</div>
);
},
}Check the sample directory of this repository for a full working example.
User guide
Props
| Prop name | Description | Example of usage |
|---|---|---|
| file | Defines 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; httpHeaders - custom request headers, e.g. for authorization). | URL:file="http://example.com/sample.pdf"File:import sample from '../static/sample.pdf' and thenfile={sample}Parameter object:file={{ url: 'http://example.com/sample.pdf', httpHeaders: { 'X-CustomHeader': '40359820958024350238508234' }}} |
| loading | Defines what the component should display while loading. Defaults to "Loading PDF…". | String:loading="Please wait!"React element:loading={<div>Please wait!</div>}Function:loading={this.renderLoader()} |
| error | Defines what the component should display in case of an error. Defaults to "Failed to load PDF file.". | String:error="An error occurred!"React element:error={<div>An error occurred!</div>}Function:error={this.renderError()} |
| noData | Defines what the component should display in case of no data. Defaults to "No PDF file specified.". | String:error="Please select a file."React element:error={<div>Please select a file.</div>}Function:error={this.renderNoData()} |
| pageIndex | Defines which page from PDF file should be displayed. Defaults to 0. | pageIndex={2} |
| scale | Defines the scale in which PDF file should be rendered. Defaults to 1.0. | scale={0.5} |
| width | Defines the width of the page. If not defined, canvas will be rendered at the width defined in PDF. If you define width and scale at the same time, the width will be multiplied by a given factor. | width={300} |
| onDocumentLoad | Function called when the document is successfully loaded to the memory. | onDocumentLoad={({ total }) => alert('Loaded a file with ' + total + ' pages!')} |
| onDocumentError | Function called in case of an error while loading a document. | onDocumentError={({ message }) => alert('Error while loading document! ' + message)} |
| onPageLoad | Function called when the page is successfully loaded to the memory. | onPageLoad={({ pageIndex, pageNumber, width, height, originalWidth, originalHeight, scale }) => alert('Now displaying a page number ' + pageNumber + '!')} |
| onPageRender | Function called when the page is successfully rendered on the screen. | onPageLoad={() => alert('Rendered the page!')} |
| onPageError | Function called in case of an error while rendering a page. | onPageError={({ message }) => alert('Error while loading page! ' + message)} |
License
The MIT License
Author
Wojciech Maj kontakt@wojtekmaj.pl wojtekmaj.pl
This project wouldn't be possible without awesome work of Niklas Närhinen niklas@narhinen.net who created its initial version and without Mozilla, author of pdf.js. Thank you!