We can easily do zoom in / zoom out using React-PDF in ReactJS by passing a prop named scale inside <page /> component. Scale prop takes value only in a decimal form which means even if you want to pass an integer value you should put decimal after it. A value greater than 1 will zoom in on the page and a value less than 1 will zoom out the page.
Syntax:
<page scale = {value} />
Example 1: When you want to pass an integer value to scale.
<Page width={900} scale={30.0} className="page" pageNumber={1} />
Example 2: When you want to pass decimal value to scale.
<Page width={300} scale={0.5} className="page" pageNumber={1} />
Creating React Application And Installing Module:
Step 1: Create a React application using the following command:
npx create-react-app pdfapp
Step 2: After creating your project folder i.e. pdfapp, move to it using the following command:
cd pdfapp
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install react-pdf
Step 4: Add a sample PDF file in your src folder, like here we have added sample.pdf as shown in Project Structure.
Project Structure: It will look like the following.
Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.
Javascript
import React from 'react';import { Document, Page } from 'react-pdf/dist/esm/entry.webpack';// Importing your sample PDFimport pdfFile from './sample.pdf'// Defining our App Componentconst App = () => { // Returning our JSX code return <> <div> <Document file={pdfFile}> <Page scale={2.0} pageNumber={1} /> </Document> </div> </>;}// Exporting your Default App Componentexport default App |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Sample.pdf as Output
Reference: https://www.npmjs.com/package/react-pdf
