Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rahul2104/reactjs-pdf-reader
PDF Reader in browser for React js
https://github.com/rahul2104/reactjs-pdf-reader
Last synced: 1 day ago
JSON representation
PDF Reader in browser for React js
- Host: GitHub
- URL: https://github.com/rahul2104/reactjs-pdf-reader
- Owner: rahul2104
- License: mit
- Created: 2019-05-03T10:03:39.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-05-27T07:11:06.000Z (6 months ago)
- Last Synced: 2024-10-31T21:17:02.863Z (15 days ago)
- Language: TypeScript
- Size: 1.59 MB
- Stars: 24
- Watchers: 5
- Forks: 11
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React-pdf-viewer
[![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
## Features
* **Simple**: It is very easy to use
* **Mobile-friendly**: Support all mobile terminal devices including mobile,pad and others
## Browser Support
* IE 10+
* Firefox 3.6+
* Chrome 6+
* Safari 6+
* Opera 11.5+
* iOS Safari 6.1+
* Android Browser 3+
## Quick Start
### 1. Import react-read-pdf into your react.js project.
(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';
```
### 2. Now you have it. The simplest usage:
```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(, document.getElementById('root'));
```
## Documentation
react-read-pdf mainly consists of two different components. ***PDFReader and MobilePDFReader***.
### 🌱 PDFReader
```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
url
the url property of ***PDFReader***
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
```
### 🌱 MobilePDFReader
```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