React-read-pdf

Chinese Document

a mobile-friendly 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:

npm install --save react-read-pdf

Using PDFReader in PC:

import React from 'react';
import { PDFReader } from 'react-read-pdf';

Using MobilePDFReader in mobile terminal devices:

import React from 'react';
import { MobilePDFReader } from 'react-read-pdf';

2. Now you have it. The simplest usage:

import { MobilePDFReader } from 'react-read-pdf';
export default class Test extends Component{
  render(){
    return <div style={{overflow:'scroll',height:600}}>
            <MobilePDFReader url="http://localhost:3000/test.pdf"/>
           </div>
  }
}

import ReactDOM from 'react-dom';
import Test from './test'
ReactDOM.render(<Test />, document.getElementById('root'));

It supports all mobile terminal devices including mobile,pad and others,the next image is a lively example in iphoneX

Documentation

react-read-pdf mainly consists of two different components. PDFReader and MobilePDFReader.

🌱 PDFReader

import { PDFReader } from 'react-read-pdf'

...
<PDFReader url={"http://localhost:3000/test.pdf"} ...>

Props in PDFReader Component

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 :

 <MobilePDFReader url="http://localhost:3000/test.pdf"/>

the other is :

 <MobilePDFReader url={url:"http://localhost:3000/test.pdf"}/>

🌱 MobilePDFReader

import { MobilePDFReader } from 'react-read-pdf'

...
<MobilePDFReader url={"http://localhost:3000/test.pdf"} ...>

Props in MobilePDFReader Component

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

Development

• React (16.x)
• Webpack (4.x)
• Typescript (3.x)
• Hot Module Replacement (HMR) using React Hot Loader (4.x)
• Babel (7.x)
• Less
• React-css-modulesusing css-modules
• Jest - Testing framework for React applications
• Production build script
• Image loading/minification using Image Webpack Loader
• Typescript compiling using Typescript Loader (5.x)
• Code quality (linting) for Typescript and LESS/CSS.

Installation

1. Clone/download repo
2. yarn install (or npm install for npm)

Usage

Development

yarn run start-dev

• Build app continuously (HMR enabled)
• App served @ http://localhost:8080

Production

yarn run start-prod

• Build app once (HMR disabled)
• App served @ http://localhost:3000

All commands

Command | Description --- | --- yarn run start-dev | Build app continuously (HMR enabled) and serve @ http://localhost:8080 yarn run start-prod | Build app once (HMR disabled) and serve @ http://localhost:3000 yarn run build | Build app to /dist/ yarn run test | Run tests yarn run lint | Run Typescript and SASS linter yarn run lint:ts | Run Typescript linter yarn run lint:sass | Run SASS linter yarn run start | (alias of yarn run start-dev)

Note: replace yarn with npm if you use npm.