PC browsers do not have much problem with PDF file display. Given a PDF link, you can display and render the content of the PDF file with the browser’s default display style. For example, an “www.baidu.com/test/pdf”. How to display this file on mobile. In order to display and render PDF files on mobile devices, this article implements a simple React component based on PDFJS to display and render PDF files.

• Distribute the React component as an NPM package.

• The project address for this component is: github.com/fortheallli… (To see examples in action, download the code or clone directly, then NPM install and NPM start.)

React-read-pdf

Components written with Act 16.5 for displaying and rendering PDF files on mobile devices and PCS

The characteristics of

• Simple: The React component is Simple to use
• Mobile-friendly: adaptive to a variety of Mobile devices, including Mobile phones, tablets, and other Mobile office devices

Browser support

• IE 10+
• Firefox 3.6 +
• Chrome 6+
• Safari 6+
• Opera 11.5 +
• IOS Safari 6.1 +
• Android Browser 3+

Quick start

1. Incorporate react-read-pdf into your React project

(In your project, for example, introduce React first, and make sure react version is above 15.0.)

Install the react – read – PDF package

npm install --save react-read-pdf
Copy the code

Recommended use of PDFReader on PC:

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

It is recommended to use MobilePDFReader on mobile terminals, which can adapt to various mobile devices:

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

Copy the code

2. After introduction, let’s look at simple 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>}}Copy the code

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

React-read-pdf ADAPTS to a variety of mobile devices, including phones, tablets, and other mobile office devices. Here is an example of react-read-pdf on the iphoneX.

The document

The react-read-pdf NPM package contains two different types of components: PDFReader and MobilePDFReader.

🌱 PDFReader

import { PDFReader } from 'react-read-pdf'. <PDFReader url={"http://localhost:3000/test.pdf"} ...>
Copy the code

Properties in the PDFReader component

Url **PDFReader** The URL property of the component

Type:

• String: indicates the absolute or relative address of the PDF file
• Object: an object that has the following properties

Properties:

OnDocumentComplete **PDFReader** onDocumentComplete property

Type:

• function(totalPage)

The type of onDocumentComplete is a function whose first argument represents the total number of pages in the PDF file.

Matters needing attention

The URL property of the PDFReader component can be a string or an object.

Both of the following ways are allowed.

The first is:

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

Copy the code

Another way is:

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

🌱 MobilePDFReader

import { MobilePDFReader } from 'react-read-pdf'. <MobilePDFReader url={"http://localhost:3000/test.pdf"} ...>
Copy the code

Properties in the MobilePDFReader component

OnDocumentComplete **MobilePDFReader** onDocumentComplete property

Type: function

• function(totalPage,title,otherObj)

Function arguments:

Matters needing attention

The default value of scale is “auto”, and it is highly recommended to set the value of scale to “auto” so that it can be adjusted to the size of the mobile device.

Developer options

• 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.

The installation

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

use

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

Instruction list

Note: replace yarn with npm if you use npm.