JSPM

  • Created
  • Published
  • Downloads 1906015
  • Score
    100M100P100Q190808F
  • License MIT

A react component using pdf.js to display pdf documents inline

Package Exports

  • react-pdf

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-pdf) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-pdf

What

A component for showing a pdf page using pdf.js.

Usage

Install with npm install react-pdf

Use in your app:

var PDF = require('react-pdf');

var MyApp = React.createClass({
  render: function() {
    
    return <PDF file="somefile.pdf" page="2" />
  },
  _onPdfCompleted: function(page, pages){
    this.setState({page: page, pages: pages});
  }
});

or

var PDF = require('react-pdf');

var MyApp = React.createClass({
  render: function() {
    
    return <PDF content="YSBzaW1wbGUgcGRm..." page="1" scale="1.0" onDocumentComplete={this._onDocumentComplete} onPageComplete={this._onPageComplete} loading={(<span>Your own loading message ...</span>)} />
  },
  _onDocumentCompleted: function(pages){
    this.setState({pages: pages});
  },
  _onPageCompleted: function(page){
    this.setState({currentPage: page});
  }
});

Check the example-directory of this repository for a full working example

Pitfalls

Unfortunately pdf.js isn't too friendly for commonjs environments so react-pdf assumes a global PDFJS variable, see the example directory of this repository for an example.

License

The MIT License

Author

Niklas Närhinen niklas@narhinen.net

Bart Van Houtte bart.van.houtte@ading.be Added Base64 Content , update PDFJS, document and page completion notification callbacks and custom loading message