¿Cómo acercar/alejar usando React-PDF en ReactJS?

Podemos acercar/alejar el zoom fácilmente usando React-PDF en ReactJS pasando un accesorio llamado scale dentro del componente <page /> . Scale prop toma valor solo en forma decimal, lo que significa que incluso si desea pasar un valor entero, debe poner decimal después. Un valor superior a 1 acercará la página y un valor inferior a 1 la alejará.

Sintaxis:

<page scale = {value} />

Ejemplo 1: Cuando se quiere pasar un valor entero a escala.

<Page width={900} scale={30.0} className="page" pageNumber={1} />

Ejemplo 2 : cuando desea pasar un valor decimal a escala.

<Page width={300} scale={0.5} className="page" pageNumber={1} />

Creación de la aplicación React e instalación del módulo:

• Paso 1: Cree una aplicación React usando el siguiente comando:

  npx create-react-app pdfapp

• Paso 2: después de crear la carpeta de su proyecto, es decir, pdfapp, acceda a ella con el siguiente comando:

  cd pdfapp

• Paso 3: Después de crear la aplicación ReactJS, instale el módulo requerido usando el siguiente comando:

  npm install react-pdf

• Paso 4: agregue un archivo PDF de muestra en su carpeta src , como aquí hemos agregado sample.pdf como se muestra en la estructura del proyecto.

Estructura del proyecto: Tendrá el siguiente aspecto.

Ejemplo: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código.

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

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:

Ejemplo.pdf como salida

Referencia: https://www.npmjs.com/package/react-pdf