AYUDA PARA NODOS

dropzone npm (Cómo Funciona Para Desarrolladores)

Publicado en 29 de septiembre, 2024

La carga de archivos es una característica común en las aplicaciones web, y hacerla fácil de usar es crucial para una buena experiencia del usuario. Una biblioteca popular que simplifica este proceso es Dropzone.js. Cuando se combina con Reaccione, Zona de cargapuede ser una herramienta poderosa para implementar cargas de archivos mediante arrastrar y soltar. El react-dropzone se integra perfectamente y sin esfuerzo con un desarrollo mínimo. Este artículo te guiará a través de la integración Zona de arrastrecon una aplicación React utilizando el paquete react-dropzone, un excelente contenedor alrededor de la biblioteca Dropzone.js.

En este artículo, también analizaremosIronPDFPaquete NPM para generar, editar y gestionar documentos PDF.

¿Por qué usar Dropzone en React?

Zona de cargaproporciona varias funciones que hacen que la carga de archivos sea sencilla:

1. Interfaz de arrastrar y soltar

Permite a los usuarios arrastrar y soltar archivos para habilitar la selección de archivos. Agrega un cuadro de diálogo de archivo programáticamente.

2. Previsualizaciones

Muestra vistas previas en miniatura de las imágenes predeterminadas de los archivos arrastrados. Las vistas previas de archivos en pantalla ayudan a mejorar la legibilidad de la interfaz de usuario.

3. Cargas de Archivos Múltiples

Admite cargar varios archivos a la vez.

4. Personalizable

Altamente personalizable con varias opciones y devoluciones de llamadas. Puede personalizar el cuadro de diálogo de apertura de archivo o el cuadro de diálogo de selección de archivo

5. Cargas de archivos grandes segmentados

Sube archivos grandes usando carga por partes.

6. Gestionar eventos

Se pueden manejar eventos de cancelación de diálogos de archivos y también de redimensionamiento de imágenes en el navegador.

Configuración de la Aplicación React

Antes de integrar Dropzone, asegúrese de tener configurada una aplicación React. Si no tiene una, puede crear un nuevo proyecto React usando Crear aplicación React:

npx create-react-app dropzone-demo
cd dropzone-demo

npx create-react-app dropzone-demo
cd dropzone-demo

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'npx create-react-app dropzone-demo cd dropzone-demo

VB C#

Instalación de react-dropzone

Para usar Dropzone en tu proyecto de React, necesitas instalar el paquete react-dropzone:

npm install react-dropzone
or
yarn add react-dropzone

npm install react-dropzone
or
yarn add react-dropzone

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'npm install react-dropzone @or yarn add react-dropzone

VB C#

Uso básico de react-dropzone

A continuación, un sencillo ejemplo de uso de react-dropzone en un componente de React:

import React, { useCallback } from 'react';
import { useDropzone } from 'react-dropzone'; // import dropzone
const DropzoneComponent = () => {
  const onDrop = useCallback((acceptedFiles) => {
    console.log(acceptedFiles);
  }, []);
  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
  return (
    <div {...getRootProps()} style={dropzoneStyle}>
      {
        isDragActive ?
          <p>Drop the files here ...</p> :
          <p>Drag 'n' drop some files here, or click to select files</p>
      }
    </div>
  );
};
const dropzoneStyle = {
  border: '2px dashed #0087F7',
  borderRadius: '5px',
  padding: '20px',
  textAlign: 'center',
  cursor: 'pointer'
};
export default DropzoneComponent;

import React, { useCallback } from 'react';
import { useDropzone } from 'react-dropzone'; // import dropzone
const DropzoneComponent = () => {
  const onDrop = useCallback((acceptedFiles) => {
    console.log(acceptedFiles);
  }, []);
  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
  return (
    <div {...getRootProps()} style={dropzoneStyle}>
      {
        isDragActive ?
          <p>Drop the files here ...</p> :
          <p>Drag 'n' drop some files here, or click to select files</p>
      }
    </div>
  );
};
const dropzoneStyle = {
  border: '2px dashed #0087F7',
  borderRadius: '5px',
  padding: '20px',
  textAlign: 'center',
  cursor: 'pointer'
};
export default DropzoneComponent;

'INSTANT VB TODO TASK: The following line could not be converted:
import React,
If True Then
	useCallback
End If
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'from 'react'; import { useDropzone } from 'react-dropzone'; const DropzoneComponent = () => { const onDrop = useCallback((acceptedFiles) => { console.log(acceptedFiles); }, []); const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop }); Return(<div {...getRootProps()} style={dropzoneStyle}> { isDragActive ? <p> Drop the files here...</p> : <p> Drag "n"c drop some files here, @or click @to select files</p> } </div>); }; const dropzoneStyle = { border: '2px dashed #0087F7', borderRadius: '5px', padding: '20px', textAlign: 'center', cursor: 'pointer' }; export default DropzoneComponent;

VB C#

Carga de archivos

Cuando se sueltan o seleccionan archivos, el callback onDrop recibe un arreglo de archivos aceptados. A continuación, puedes gestionar los archivos, como subirlos a un servidor. A continuación, se muestra cómo puede extender el callback onDrop para cargar archivos utilizando fetch:

const onDrop = useCallback((acceptedFiles) => {
  const formData = new FormData();
  acceptedFiles.forEach((file) => {
    formData.append('files', file);
  });
  fetch('https://your-upload-endpoint', {
    method: 'POST',
    body: formData,
  })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));
}, []);

const onDrop = useCallback((acceptedFiles) => {
  const formData = new FormData();
  acceptedFiles.forEach((file) => {
    formData.append('files', file);
  });
  fetch('https://your-upload-endpoint', {
    method: 'POST',
    body: formData,
  })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));
}, []);

'INSTANT VB TODO TASK: Lambda expressions and anonymous methods are not converted by Instant VB if local variables of the outer method are referenced within the anonymous method:
const onDrop = useCallback((acceptedFiles) =>
If True Then
	const formData = New FormData()
'INSTANT VB TODO TASK: Lambda expressions and anonymous methods are not converted by Instant VB if local variables of the outer method are referenced within the anonymous method:
	acceptedFiles.forEach((file) =>
	If True Then
		formData.append( 'files', file);
	End If
	)
	fetch( 'https: method: 'POST', body: formData}).@then(response => response.json()).@then(data => console.log(data)).catch(@error => console.@error('@Error:', @error));
End If
, ())

VB C#

Mostrando vistas previas

También puedes mostrar vistas previas de los archivos subidos. Aquí tienes un ejemplo de cómo hacerlo:

import React, { useCallback, useState } from 'react';
import { useDropzone } from 'react-dropzone';
const DropzoneComponent = () => {
  const [files, setFiles] = useState([]);
  const onDrop = useCallback((acceptedFiles) => {
    setFiles(acceptedFiles.map(file => Object.assign(file, {
      preview: URL.createObjectURL(file)
    })));
  }, []);
  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
  const thumbs = files.map(file => (
    <div key={file.name}>
      <img
        src={file.preview}
        style={{ width: '100px', height: '100px' }}
        alt={file.name}
      />
    </div>
  ));
  return (
    <div>
      <div {...getRootProps()} style={dropzoneStyle}>
        {
          isDragActive ?
            <p>Drop the files here ...</p> :
            <p>Drag 'n' drop some files here, or click to select files</p>
        }
      </div>
      <div>
        {thumbs}
      </div>
    </div>
  );
};
const dropzoneStyle = {
  border: '2px dashed #0087F7',
  borderRadius: '5px',
  padding: '20px',
  textAlign: 'center',
  cursor: 'pointer'
};
export default DropzoneComponent;

import React, { useCallback, useState } from 'react';
import { useDropzone } from 'react-dropzone';
const DropzoneComponent = () => {
  const [files, setFiles] = useState([]);
  const onDrop = useCallback((acceptedFiles) => {
    setFiles(acceptedFiles.map(file => Object.assign(file, {
      preview: URL.createObjectURL(file)
    })));
  }, []);
  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
  const thumbs = files.map(file => (
    <div key={file.name}>
      <img
        src={file.preview}
        style={{ width: '100px', height: '100px' }}
        alt={file.name}
      />
    </div>
  ));
  return (
    <div>
      <div {...getRootProps()} style={dropzoneStyle}>
        {
          isDragActive ?
            <p>Drop the files here ...</p> :
            <p>Drag 'n' drop some files here, or click to select files</p>
        }
      </div>
      <div>
        {thumbs}
      </div>
    </div>
  );
};
const dropzoneStyle = {
  border: '2px dashed #0087F7',
  borderRadius: '5px',
  padding: '20px',
  textAlign: 'center',
  cursor: 'pointer'
};
export default DropzoneComponent;

'INSTANT VB TODO TASK: The following line could not be converted:
import React,
If True Then
	useCallback, useState
End If
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'from 'react'; import { useDropzone } from 'react-dropzone'; const DropzoneComponent = () => { const [files, setFiles] = useState([]); const onDrop = useCallback((acceptedFiles) => { setFiles(acceptedFiles.map(file => Object.assign(file, { preview: URL.createObjectURL(file) }))); }, []); const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop }); const thumbs = files.map(file => (<div key={file.name}> <img src={file.preview} style={{ width: '100px', height: '100px' }} alt={file.name} /> </div>)); Return(<div> <div {...getRootProps()} style={dropzoneStyle}> { isDragActive ? <p> Drop the files here...</p> : <p> Drag "n"c drop some files here, @or click @to select files</p> } </div> <div> {thumbs} </div> </div>); }; const dropzoneStyle = { border: '2px dashed #0087F7', borderRadius: '5px', padding: '20px', textAlign: 'center', cursor: 'pointer' }; export default DropzoneComponent;

VB C#

SALIDA

zona de carga npm(Cómo funciona para desarrolladores): Figura 1 - Así es como se ve su aplicación react-dropzone. Puede arrastrar y soltar/seleccionar uno o varios archivos.

Limpieza

Es esencial revocar las URL de los objetos para evitar fugas de memoria. Puedes lograr esto utilizando el hook useEffect:

import { useEffect } from 'react';
useEffect(() => {
  // Make sure to revoke the data uris to avoid memory leaks
  return () => files.forEach(file => URL.revokeObjectURL(file.preview));
}, [files]);

import { useEffect } from 'react';
useEffect(() => {
  // Make sure to revoke the data uris to avoid memory leaks
  return () => files.forEach(file => URL.revokeObjectURL(file.preview));
}, [files]);

import
If True Then
	useEffect
End If
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'from 'react'; useEffect(() => { Return() => files.forEach(file => URL.revokeObjectURL(file.preview)); }, [files]);

VB C#

Presentación de IronPDF

IronPDFes un potente paquete npm diseñado para facilitar la generación de PDF en aplicaciones de Node.js. Permite crear documentos PDF desdecontenido HTML, URL, o incluso archivos PDF existentes. Ya sea que estés generando facturas, informes o cualquier otro tipo de documento, IronPDF simplifica el proceso con su intuitivaAPIy un conjunto de características robusto.

zona de carga npm(Cómo funciona para los desarrolladores): Figura 2 - IronPDF for Node.js: La biblioteca PDF de Node.js

Entre las principales características de IronPDF se incluyen

1. Conversión de HTML a PDF

Convierta contenidos HTML en documentos PDF sin esfuerzo. Esta función es especialmente útil para generar PDF dinámicos a partir de contenidos web.

2. Conversión de URL a PDF

Genera PDF directamente desde URLs. Esto te permite capturar el contenido de las páginas web y guardarlo como archivos PDF de manera programática.

3. Manipulación de PDF

Fusione, divida y manipule documentos PDF existentes con facilidad. IronPDF ofrece funcionalidades para manipular archivos PDF, como agregar páginas, dividir documentos y más.

4. Seguridad PDF

Proteja sus documentos PDF cifrándolos con contraseñas o aplicando firmas digitales. IronPDF ofrece opciones para proteger sus documentos confidenciales del acceso no autorizado.

5. Salida de alta calidad

Produzca documentos PDF de alta calidad con una representación precisa del texto, las imágenes y el formato. IronPDF garantiza que los PDF generados mantengan la fidelidad al contenido original.

6. Compatibilidad multiplataforma

IronPDF es compatible con varias plataformas, como Windows, Linux y macOS, lo que lo hace apto para una amplia gama de entornos de desarrollo.

7. Integración sencilla

Integre fácilmente IronPDF en sus aplicaciones Node.js utilizando su paquete npm. La API está bien documentada, lo que facilita la incorporación de funciones de generación de PDF a sus proyectos.

Ya sea que estés desarrollando una aplicación web, un script del lado del servidor o una herramienta de línea de comandos,IronPDFte permite crear documentos PDF de calidad profesional de manera eficiente y confiable.

Generar documento PDF usando IronPDF y utilizar el paquete NPM Dropzone.

Instalar dependencias: Primero, crea un nuevo proyecto Next.js(si aún no lo ha hecho)utilizando el siguiente comando: Consulte la configuraciónpágina.

npx create-next-app@latest demo-dropzone-ironpdf --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"

npx create-next-app@latest demo-dropzone-ironpdf --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'npx create-@next-app@latest demo-dropzone-ironpdf --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"

VB C#

A continuación, vaya al directorio de su proyecto:

cd demo-dropzone-ironpdf

cd demo-dropzone-ironpdf

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'cd demo-dropzone-ironpdf

VB C#

Instale los paquetes necesarios:

npm install @ironsoftware/ironpdf
npm install react-dropzone

npm install @ironsoftware/ironpdf
npm install react-dropzone

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'npm install @ironsoftware/ironpdf npm install react-dropzone

VB C#

Crear un PDF: Ahora, vamos a crear un ejemplo sencillo de cómo generar un PDF usando IronPDF. En tu componente de Next.js(por ejemplo, páginas/index.tsx)añade el siguiente código:

import Head from 'next/head';
import styles from '../styles/Home.module.css';
import {ToastContainer, toast} from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import {useState} from "react";
import DropzoneComponent from "../components/mydropzone";
export default function Home() {
    const [textInput, setTextInput] = useState('');
    const notify = () => {
        toast.success("Success! This is a success message.", {
            position: "top-right"
        });
        toast.info("Information message", {
            position: "bottom-left"
        });
        toast.warn("Warning message", {
            autoClose: 5000
        });
        toast.error("Error message", {
            className: 'custom-toast',
            style: {background: 'red', color: 'white'}
        });
    };
    const generatePdf = async () => {
        try {
            const response = await fetch('/api/pdf?url='+textInput);
            const blob = await response.blob();
            const url = window.URL.createObjectURL(new Blob([blob]));
            const link = document.createElement('a');
            link.href = url;
            link.setAttribute('download', 'awesomeIron.pdf');
            document.body.appendChild(link);
            link.click();
            link.parentNode.removeChild(link);
        } catch (error) {
            console.error('Error generating PDF:', error);
        }
    };
    const handleChange = (event) => {
        setTextInput(event.target.value);
    }
    return (
        <div className={styles.container}>
            <Head>
                <title>Generate PDF Using IronPDF</title>
                <link rel="icon" href="/favicon.ico"/>
            </Head>
            <main>
                <h1>Demo Drop Zone and Generate PDF Using IronPDF</h1>
                <DropzoneComponent/>
                <p>
                    <span>Enter Url To Convert to PDF:</span>{" "}
                </p>
                <button style={{margin:20, padding:5}} onClick={generatePdf}>Generate PDF</button>
            </main>          
            <style jsx>{`
                main {
                    padding: 5rem 0;
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                }
                footer {
                    width: 100%;
                    height: 100px;
                    border-top: 1px solid #eaeaea;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                footer img {
                    margin-left: 0.5rem;
                }
                footer a {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    text-decoration: none;
                    color: inherit;
                }
                code {
                    background: #fafafa;
                    border-radius: 5px;
                    padding: 0.75rem;
                    font-size: 1.1rem;
                    font-family: Menlo,
                    Monaco,
                    Lucida Console,
                    Liberation Mono,
                    DejaVu Sans Mono,
                    Bitstream Vera Sans Mono,
                    Courier New,
                    monospace;
                }
            `}</style>
            <style jsx global>{`
                html,
                body {
                    padding: 0;
                    margin: 0;
                    font-family: -apple-system,
                    BlinkMacSystemFont,
                    Segoe UI,
                    Roboto,
                    Oxygen,
                    Ubuntu,
                    Cantarell,
                    Fira Sans,
                    Droid Sans,
                    Helvetica Neue,
                    sans-serif;
                }
                * {
                    box-sizing: border-box;
                }
            `}</style>
        </div>
    );
}

import Head from 'next/head';
import styles from '../styles/Home.module.css';
import {ToastContainer, toast} from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import {useState} from "react";
import DropzoneComponent from "../components/mydropzone";
export default function Home() {
    const [textInput, setTextInput] = useState('');
    const notify = () => {
        toast.success("Success! This is a success message.", {
            position: "top-right"
        });
        toast.info("Information message", {
            position: "bottom-left"
        });
        toast.warn("Warning message", {
            autoClose: 5000
        });
        toast.error("Error message", {
            className: 'custom-toast',
            style: {background: 'red', color: 'white'}
        });
    };
    const generatePdf = async () => {
        try {
            const response = await fetch('/api/pdf?url='+textInput);
            const blob = await response.blob();
            const url = window.URL.createObjectURL(new Blob([blob]));
            const link = document.createElement('a');
            link.href = url;
            link.setAttribute('download', 'awesomeIron.pdf');
            document.body.appendChild(link);
            link.click();
            link.parentNode.removeChild(link);
        } catch (error) {
            console.error('Error generating PDF:', error);
        }
    };
    const handleChange = (event) => {
        setTextInput(event.target.value);
    }
    return (
        <div className={styles.container}>
            <Head>
                <title>Generate PDF Using IronPDF</title>
                <link rel="icon" href="/favicon.ico"/>
            </Head>
            <main>
                <h1>Demo Drop Zone and Generate PDF Using IronPDF</h1>
                <DropzoneComponent/>
                <p>
                    <span>Enter Url To Convert to PDF:</span>{" "}
                </p>
                <button style={{margin:20, padding:5}} onClick={generatePdf}>Generate PDF</button>
            </main>          
            <style jsx>{`
                main {
                    padding: 5rem 0;
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                }
                footer {
                    width: 100%;
                    height: 100px;
                    border-top: 1px solid #eaeaea;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }
                footer img {
                    margin-left: 0.5rem;
                }
                footer a {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    text-decoration: none;
                    color: inherit;
                }
                code {
                    background: #fafafa;
                    border-radius: 5px;
                    padding: 0.75rem;
                    font-size: 1.1rem;
                    font-family: Menlo,
                    Monaco,
                    Lucida Console,
                    Liberation Mono,
                    DejaVu Sans Mono,
                    Bitstream Vera Sans Mono,
                    Courier New,
                    monospace;
                }
            `}</style>
            <style jsx global>{`
                html,
                body {
                    padding: 0;
                    margin: 0;
                    font-family: -apple-system,
                    BlinkMacSystemFont,
                    Segoe UI,
                    Roboto,
                    Oxygen,
                    Ubuntu,
                    Cantarell,
                    Fira Sans,
                    Droid Sans,
                    Helvetica Neue,
                    sans-serif;
                }
                * {
                    box-sizing: border-box;
                }
            `}</style>
        </div>
    );
}

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'import Head from '@next/head'; import styles from '../styles/Home.@module.css'; import {ToastContainer, toast} from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; import {useState} from "react"; import DropzoneComponent from "../components/mydropzone"; export default @function Home() { const [textInput, setTextInput] = useState(''); const notify = () => { toast.success("Success! This is a success message.", { position: "top-right" }); toast.info("Information message", { position: "bottom-left" }); toast.warn("Warning message", { autoClose: 5000 }); toast.@error("Error message", { className: 'custom-toast', style: {background: 'red', color: 'white'} }); }; const generatePdf = async() => { try { const response = await fetch('/api/System.Nullable<pdf>url='+textInput); const blob = await response.blob(); const url = window.URL.createObjectURL(New Blob([blob])); const link = document.createElement("a"c); link.href = url; link.setAttribute('download', 'awesomeIron.pdf'); document.body.appendChild(link); link.click(); link.parentNode.removeChild(link); } catch(@error) { console.@error('@Error generating PDF:', @error); } }; const handleChange = (event) => { setTextInput(event.target.value); } Return(<div className={styles.container}> <Head> <title> Generate PDF @Using IronPDF</title> <link rel="icon" href="/favicon.ico"/> </Head> <main> <h1> Demo Drop Zone @and Generate PDF @Using IronPDF</h1> <DropzoneComponent/> <p> <span> Enter Url @To Convert @to PDF:</span>{" "} </p> <button style={{margin:20, padding:5}} onClick={generatePdf}> Generate PDF</button> </main> <style jsx>{` main { padding: 5rem 0; flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; } footer { width: 100%; height: 100px; border-top: 1px solid #eaeaea; display: flex; justify-content: center; align-items: center; } footer img { margin-left: 0.5rem; } footer a { display: flex; justify-content: center; align-items: center; text-decoration: none; color: inherit; } code { background: #fafafa; border-radius: 5px; padding: 0.75rem; font-size: 1.1rem; font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier @New, monospace; } `}</style> <style jsx global>{` html, body { padding: 0; margin: 0; font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; } * { box-sizing: border-box; } `}</style> </div>); }

VB C#

Dado que IronPDF se ejecuta solo en node, a continuación agregue una API para la aplicación donde el PDF se genera en node.

Crea un archivo pdf.js en la carpeta pages/api y añade el siguiente código fuente.

// pages/api/pdf.js
import {IronPdfGlobalConfig, PdfDocument} from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";
export default async function handler(req, res) {
    try {
        const url = req.query.url
        const pdf = await PdfDocument.fromUrl(url);
        const data = await pdf.saveAsBuffer();
        console.error('data PDF:', data);
        res.setHeader('Content-Type', 'application/pdf');
        res.setHeader('Content-Disposition', 'attachment; filename=awesomeIron.pdf');
        res.send(data);
    } catch (error) {
        console.error('Error generating PDF:', error);
        res.status(500).end();
    }
}

// pages/api/pdf.js
import {IronPdfGlobalConfig, PdfDocument} from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";
export default async function handler(req, res) {
    try {
        const url = req.query.url
        const pdf = await PdfDocument.fromUrl(url);
        const data = await pdf.saveAsBuffer();
        console.error('data PDF:', data);
        res.setHeader('Content-Type', 'application/pdf');
        res.setHeader('Content-Disposition', 'attachment; filename=awesomeIron.pdf');
        res.send(data);
    } catch (error) {
        console.error('Error generating PDF:', error);
        res.status(500).end();
    }
}

' pages/api/pdf.js
import
If True Then
	IronPdfGlobalConfig, PdfDocument
End If
from "@ironsoftware/ironpdf"
' Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here"
'INSTANT VB TODO TASK: Local functions are not converted by Instant VB:
'export default async @function handler(req, res)
'{
'	try
'	{
'		const url = req.query.url const pdf = await PdfDocument.fromUrl(url);
'		const data = await pdf.saveAsBuffer();
'		console.@error('data PDF:', data);
'		res.setHeader('Content-Type', 'application/pdf');
'		res.setHeader('Content-Disposition', 'attachment; filename=awesomeIron.pdf');
'		res.send(data);
'	}
'	catch (@error)
'	{
'		console.@error('@Error generating PDF:', @error);
'		res.status(500).@end();
'	}
'}

VB C#

Nota: En el código anterior, añade tu propia clave de licencia

Ejecuta tu aplicación: Inicia tu aplicación de Next.js:

npm run dev
or
yarn dev

npm run dev
or
yarn dev

'INSTANT VB TODO TASK: The following line uses invalid syntax:
'npm run dev @or yarn dev

VB C#

SALIDA

zona de carga npm(Cómo Funciona para Desarrolladores): Figura 3 - Así es como se ve tu aplicación Next.js integrando Dropzone e IronPDF. Puedes ingresar la URL y hacer clic en el botón Generar para convertir el contenido HTML de la URL a PDF usando IronPDF.

Ahora ingrese la URL del sitio web para generar PDF y haga clic en generar PDF. Se descargará un archivo llamado awesomeIron.pdf como se indica a continuación.

zona de carga npm(Cómo funciona para los desarrolladores): Figura 4 - PDF de salida generado usando IronPDF

Ahora haga clic en la zona de carga y seleccione el archivo descargado. Esto mostrará una vista previa con el nombre mostrado en la parte inferior: awesomeIron.pdf

zona de carga npm(Cómo funciona para desarrolladores): Figura 5 - Puede descargar el archivo awesomeIron.pdf generado seleccionándolo desde el enlace proporcionado en el Dropzone.

Licencia IronPDF

IronPDF página.

Coloque la clave de licencia en la aplicación como se muestra a continuación:

import {IronPdfGlobalConfig, PdfDocument} from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";

import {IronPdfGlobalConfig, PdfDocument} from "@ironsoftware/ironpdf";
// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "Add Your key here";

IRON VB CONVERTER ERROR developers@ironsoftware.com

VB C#

Conclusión

Integración deZona de cargacon React usandoreact-dropzonees un proceso sencillo que mejora significativamente la experiencia de carga de archivos. Con funciones como arrastrar y soltar, vistas previas de archivos y amplias opciones de personalización, react-dropzone puede ser una valiosa adición a tus proyectos de React. Comience a explorar sus capacidades y adáptelo para satisfacer las necesidades de su aplicación.!

IronPDF, por otro lado, es una biblioteca versátil de generación y manipulación de PDF que facilita su integración en aplicaciones. IronPDF ofrece un exhaustivodocumentación yejemplos de códigopara ayudar a los desarrolladores a comenzar.

Siguiendo los pasos descritos en este artículo, puede crear un componente de carga de archivos robusto en su aplicación React y también integrar capacidades de generación de archivos PDF en aplicaciones modernas.

< ANTERIOR
WebSockets Node.js js (Cómo funciona para desarrolladores)

SIGUIENTE >
npm de Tailwind (Cómo Funciona Para Desarrolladores)