Skip to content
Related Articles

Related Articles

Improve Article

How to Zoom in/Zoom out using React-PDF in ReactJS ?

  • Difficulty Level : Expert
  • Last Updated : 01 Jun, 2021

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

App.js




import React from 'react';
import { Document,Page } from 'react-pdf/dist/esm/entry.webpack';
  
// Importing your sample PDF
import pdfFile from './sample.pdf'
  
// Defining our App Component
const App = () => {
  
  // Returning our JSX code
  return <>
    <div>
      <Document file={pdfFile}>
        <Page scale={2.0} pageNumber={1} />
      </Document>
    </div>
  </>;
}
  
// Exporting your Default App Component
export 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

My Personal Notes arrow_drop_up
Recommended Articles
Page :