react-pdf-js
react-pdf-js
provides a component for rendering PDF documents using PDF.js. Written for React 15/16 and ES2015 using the Airbnb style guide.
Usage
Install with npm install react-pdf-js
Use in your app (showing some basic pagination as well):
;; Component state = {}; { this; } { this; } { this; } { this; } { let previousButton = <li className="previous" onClick=thishandlePrevious><a href="#"><i className="fa fa-arrow-left"></i> Previous</a></li>; if page === 1 previousButton = <li className="previous disabled"><a href="#"><i className="fa fa-arrow-left"></i> Previous</a></li>; let nextButton = <li className="next" onClick=thishandleNext><a href="#">Next <i className="fa fa-arrow-right"></i></a></li>; if page === pages nextButton = <li className="next disabled"><a href="#">Next <i className="fa fa-arrow-right"></i></a></li>; return <nav> <ul className="pager"> previousButton nextButton </ul> </nav> ; } { let pagination = null; if thisstatepages pagination = this; return <div> <PDF file="somefile.pdf" onDocumentComplete=thisonDocumentComplete onPageComplete=thisonPageComplete page=thisstatepage /> pagination </div> } moduleexports = MyPdfViewer;
Scaling
The PDF can be scaled in a couple of different ways.
Stretch to fill width/height
Use the prop fillWidth
to make the PDF stretch to the width of the parent element (generally speaking, this will be the enclosing <div>
), or use fillHeight
to do the same for the height of the PDF. The PDF will be scaled proportionately.
Both fillWidth
and fillHeight
default to false
.
Note: fillWidth
has precedence over fillHeight
. So if you use both, the PDF will stretch to fill the width.
Example:
<div className="parentDivWhoseWidthAndHeightAreUsedToStretchThePdf"> <PDF file="somefile.pdf" fillWidth fillHeight // this will be ignored because fillWidth is also passed /></div>
Set scale directly
You can also set the scale manually by passing the scale
prop. A scale
between 0
and 1
shrinks the PDF, and a scale
greater than 1
enlarges it.
scale
defaults to 1
.
Note: the value of scale
will be ignored if you also use fillWidth
or fillHeight
.
Example:
<div> <PDF file="somefile.pdf" scale=15 /></div>
Credit
This project is a fork of react-pdfjs which itself was a port of react-pdf, so thank you to the original authours.