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.
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
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:
Referencia: https://www.npmjs.com/package/react-pdf
Publicación traducida automáticamente
Artículo escrito por astitvajain2051 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA