PDF Reader in browser for React js
npm install reactjs-pdf-reader[![NPM Version][npm-image]][npm-url]
[![Node Version][node-image]][node-url]
[![NPM Downloads][downloads-image]][downloads-url]
[![NPM License][npm-license]][npm-url]
> PDF Reader in browser for React 16.x
* Simple: It is very easy to use
* Mobile-friendly: Support all mobile terminal devices including mobile,pad and others
* IE 10+
* Firefox 3.6+
* Chrome 6+
* Safari 6+
* Opera 11.5+
* iOS Safari 6.1+
* Android Browser 3+
(You should import react firt,The version of react must be more than 16.x)
Using build tools:
``bash`
npm install --save reactjs-pdf-reader
Using PDFReader in PC:js`
import React from 'react';
import { PDFReader } from 'reactjs-pdf-reader';
Using MobilePDFReader in mobile terminal devices:js
import React from 'react';
import { MobilePDFReader } from 'reactjs-pdf-reader';
`$3
`js`
import { MobilePDFReader } from 'react-pdf-viewer';
export default class Test extends Component{
render(){
return
}
}
`js`
import ReactDOM from 'react-dom';
import Test from './test'
ReactDOM.render(
react-read-pdf mainly consists of two different components. PDFReader and MobilePDFReader.
`js
import { PDFReader } from 'reactjs-pdf-reader'
...
`
#### Props in PDFReader Component
| Props name | Type | Description |
|---|---|---|
| url | string | object | if url is a string, it represents absolute address or relative address of PDF files. if url is a object, you can see this url object type for details |
| data | string | binary-like data of PDF.For example,in javascript, you can use the method "atob" to convert base64 encoded PDF to binary-like data. |
| page | number | default value is 1 ,decides that which page to show in PDF file. |
| scale | number | decides the viewport in render |
| width | number | decides the width of viewport |
| showAllPage | boolean | default value is false , if it is true , it will render all pages of the pdf file. if it is false ,it will only show the "currentPage" according to the page props's value. |
| onDocumentComplete | function | after load the PDF file, in this function ,you can get some informations of the PDF file you can see this function type for details |
| getPageNumber | function | after load the PDF file, in this function onclick event you can get current page number of the PDF file |
Type:
- string : it represents absolute address or relative address of PDF files
- object :
Properties:
Property Name| type |Description
--- | --- | ---
url | string | it represents absolute address or relative address of PDF files
withCredentials | boolean | is allow requests to carry cookie or not
onDocumentComplete
the onDocumentComplete property of PDFReader
Type:
- function(totalPage)
onDocumentComplete's type is a function, the fisrt default parameter is totalPage of the PDF file
#### Notes
The url of props can be string or object.
The following two ways are the same.
One is :
`js
`
the other is :js
`$3
`js
import { MobilePDFReader } from 'reactjs-pdf-reader'
...
``
#### Props in MobilePDFReader Component
| Props name | Type | Description |
|---|---|---|
| url | string | object | it represents absolute address or relative address of PDF files. |
| page | number | default value is 1 ,decides that which page to show in PDF file. |
| scale | 'auto' | number | defaut value is 'auto', react-react-pdf use pdfjs-viewer,so if the scale is 'auto' , it can Adaptive mobile device .This property decides the viewport in render |
| minScale | number | defaut value is 0.25, decides the minimum value of scale |
| maxScale | number | defaut value is 10, decides the max value of scale |
| isShowHeader | boolean | defaut value is true, in order to show lively example.'react-react-pdf' added default style to special header, you can remove this style ,if you change this value to false |
| isShowFooter | boolean | defaut value is true, in order to show lively example.'react-react-pdf' added default style to special footer, you can remove this style ,if you change this value to false |
| onDocumentComplete | function | after load the PDF file, in this function ,you can get some informations of the PDF file you can see this function type for details |
onDocumentComplete
the onDocumentComplete property of MobilePDFReader
Type:
- function(totalPage,title,otherObj)
Properties:
Property Name| type |Description
--- | --- | ---
totalPage | number | the totalPage of the PDF file
title | title | the title of the PDF file
otherObj | object | other coding information of the PDF file
#### Notes
I strongly recommend you to set initial value of scale is 'auto',the default is 'auto' too
[npm-image]: https://img.shields.io/npm/v/reactjs-pdf-reader
[npm-url]: https://www.npmjs.com/package/reactjs-pdf-reader
[node-image]: https://img.shields.io/node/v/reactjs-pdf-reader
[node-url]: https://www.npmjs.com/package/reactjs-pdf-reader
[downloads-image]: https://img.shields.io/npm/dm/reactjs-pdf-reader.svg
[downloads-url]: https://www.npmjs.com/package/reactjs-pdf-reader
[npm-license]:https://img.shields.io/npm/l/reactjs-pdf-reader