La bibliothèque PDF Node.js

Explore IronPDF for Node.js Essai gratuit

HTML en PDF

Online Demo Voir tous les exemples de code %s

import {PdfDocument} from "@ironsoftware/ironpdf";

(async () => {
    // Create a PDF from an HTML string
    const pdf = await PdfDocument.fromHtml("<h1>Hello World</h1>");

    // Export the PDF to a file
    await pdf.saveAs("output.pdf");

    // Advanced Example with HTML Assets
    // Load external HTML assets: Images, CSS, and JavaScript.
    const htmlContentWithAssets = "<img src='icons/iron.png'>";
    const advancedPdf = await PdfDocument.fromHtml(htmlContentWithAssets);

    // Save the PDF with loaded assets
    await advancedPdf.saveAs("html-with-assets.pdf");
})();

import {PdfDocument} from "@ironsoftware/ironpdf";

(async () => {
    // Create a PDF from an HTML string
    const pdf = await PdfDocument.fromHtml("<h1>Hello World</h1>");

    // Export the PDF to a file
    await pdf.saveAs("output.pdf");

    // Advanced Example with HTML Assets
    // Load external HTML assets: Images, CSS, and JavaScript.
    const htmlContentWithAssets = "<img src='icons/iron.png'>";
    const advancedPdf = await PdfDocument.fromHtml(htmlContentWithAssets);

    // Save the PDF with loaded assets
    await advancedPdf.saveAs("html-with-assets.pdf");
})();

AIDE NODE

dropzone npm (Comment ça marche pour les développeurs)

Curtis Chau

Updated: 20 juin 2026

Le téléchargement de fichiers est une fonctionnalité courante dans les applications web, et le rendre convivial est crucial pour une bonne expérience utilisateur. Une bibliothèque populaire qui simplifie ce processus est Dropzone.js. Lorsqu'il est combiné avec React, Dropzone peut être un outil puissant pour implémenter le téléchargement de fichiers par glisser-déposer. Le react-dropzone s'intègre parfaitement et de manière fluide avec un minimum d'efforts de développement. Cet article vous guidera pour intégrer Dropzone dans une application React en utilisant le package react-dropzone, un excellent wrapper autour de la bibliothèque Dropzone.js.

Dans cet article, nous examinerons également le package NPM IronPDF pour générer, éditer et gérer des documents PDF.

Pourquoi utiliser Dropzone dans React ?

Dropzone offre diverses fonctionnalités qui rendent le téléchargement de fichiers fluide :

1. Interface de glisser-déposer

Permet aux utilisateurs de glisser et déposer des fichiers pour permettre la sélection de fichiers et ajoute une boîte de dialogue de fichiers programmatiquement.

2. Aperçus

Affiche les aperçus de vignettes d'image par défaut des fichiers déposés, améliorant la lisibilité de l'interface utilisateur.

3. Téléchargement de fichiers multiples

Prend en charge le téléchargement de plusieurs fichiers à la fois.

4. Personnalisable

Hautement personnalisable avec diverses options et callbacks. Vous pouvez personnaliser l'ouverture de la boîte de dialogue de fichiers ou les boîtes de dialogue de sélection de fichiers.

5. Téléchargements segmentés de gros fichiers

Télécharger de gros fichiers en utilisant le téléchargement segmenté.

6. Gérer les événements

Le callback d'annulation de la boîte de dialogue de fichiers et les événements de redimensionnement d'image du navigateur peuvent être gérés.

Configuration de l'application React

Avant d'intégrer Dropzone, assurez-vous d'avoir une application React configurée. Si vous n'en avez pas, vous pouvez créer un nouveau projet React en utilisant Create React App :

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

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

SHELL

Installation de react-dropzone

Pour utiliser Dropzone dans votre projet React, vous devez installer le package react-dropzone :

npm install react-dropzone
# or
yarn add react-dropzone

npm install react-dropzone
# or
yarn add react-dropzone

SHELL

Utilisation de base de react-dropzone

Voici un exemple simple d'utilisation de react-dropzone dans un composant React :

import React, { useCallback } from 'react';
import { useDropzone } from 'react-dropzone';

// DropzoneComponent is a React component demonstrating basic usage of react-dropzone
const DropzoneComponent = () => {
  // Callback to handle file drops
  const onDrop = useCallback((acceptedFiles) => {
    console.log(acceptedFiles); // Log the accepted files
  }, []);
  
  // Extracted properties from useDropzone hook
  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
  
  return (
    <div {...getRootProps()} style={dropzoneStyle}>
      <input {...getInputProps()} />
      {
        isDragActive ? 
          <p>Drop the files here ...</p> : 
          <p>Drag 'n' drop some files here, or click to select files</p>
      }
    </div>
  );
};

// Styles for the dropzone area
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';

// DropzoneComponent is a React component demonstrating basic usage of react-dropzone
const DropzoneComponent = () => {
  // Callback to handle file drops
  const onDrop = useCallback((acceptedFiles) => {
    console.log(acceptedFiles); // Log the accepted files
  }, []);
  
  // Extracted properties from useDropzone hook
  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
  
  return (
    <div {...getRootProps()} style={dropzoneStyle}>
      <input {...getInputProps()} />
      {
        isDragActive ? 
          <p>Drop the files here ...</p> : 
          <p>Drag 'n' drop some files here, or click to select files</p>
      }
    </div>
  );
};

// Styles for the dropzone area
const dropzoneStyle = {
  border: '2px dashed #0087F7',
  borderRadius: '5px',
  padding: '20px',
  textAlign: 'center',
  cursor: 'pointer'
};

export default DropzoneComponent;

Text

Gestion des Téléchargements de Fichiers

Lorsque des fichiers sont déposés ou sélectionnés, le callback onDrop reçoit un tableau de fichiers acceptés. Vous pouvez ensuite gérer les fichiers, comme les télécharger sur un serveur. Voici comment vous pouvez étendre le callback onDrop pour télécharger des fichiers en utilisant fetch :

// onDrop callback to handle file uploads
const onDrop = useCallback((acceptedFiles) => {
  const formData = new FormData();
  // Append each file to the formData
  acceptedFiles.forEach((file) => {
    formData.append('files', file);
  });

  // Send a POST request to upload the files
  fetch('https://your-upload-endpoint', {
    method: 'POST',
    body: formData,
  })
  .then(response => response.json()) // Parse the JSON from the response
  .then(data => console.log(data)) // Log the response data
  .catch(error => console.error('Error:', error)); // Handle errors
}, []);

// onDrop callback to handle file uploads
const onDrop = useCallback((acceptedFiles) => {
  const formData = new FormData();
  // Append each file to the formData
  acceptedFiles.forEach((file) => {
    formData.append('files', file);
  });

  // Send a POST request to upload the files
  fetch('https://your-upload-endpoint', {
    method: 'POST',
    body: formData,
  })
  .then(response => response.json()) // Parse the JSON from the response
  .then(data => console.log(data)) // Log the response data
  .catch(error => console.error('Error:', error)); // Handle errors
}, []);

Text

Affichage des aperçus

Vous pouvez également afficher des aperçus des fichiers téléchargés. Voici un exemple de la manière de procéder :

import React, { useCallback, useState } from 'react';
import { useDropzone } from 'react-dropzone';

const DropzoneComponent = () => {
  const [files, setFiles] = useState([]);
  
  // onDrop callback to handle file drops and generate previews
  const onDrop = useCallback((acceptedFiles) => {
    setFiles(acceptedFiles.map(file => Object.assign(file, {
      preview: URL.createObjectURL(file)
    })));
  }, []);

  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
  
  // Generate thumbnails for each file
  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}>
        <input {...getInputProps()} />
        {
          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>
  );
};

// Styles for the dropzone area
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([]);
  
  // onDrop callback to handle file drops and generate previews
  const onDrop = useCallback((acceptedFiles) => {
    setFiles(acceptedFiles.map(file => Object.assign(file, {
      preview: URL.createObjectURL(file)
    })));
  }, []);

  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop });
  
  // Generate thumbnails for each file
  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}>
        <input {...getInputProps()} />
        {
          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>
  );
};

// Styles for the dropzone area
const dropzoneStyle = {
  border: '2px dashed #0087F7',
  borderRadius: '5px',
  padding: '20px',
  textAlign: 'center',
  cursor: 'pointer'
};

export default DropzoneComponent;

Text

Nettoyage

Il est essentiel de révoquer les URL d'objet pour éviter les fuites de mémoire. Vous pouvez y parvenir en utilisant le hook useEffect :

import { useEffect } from 'react';

// useEffect to clean up object URLs to prevent memory leaks
useEffect(() => {
  // Revoke the data URIs
  return () => files.forEach(file => URL.revokeObjectURL(file.preview));
}, [files]);

import { useEffect } from 'react';

// useEffect to clean up object URLs to prevent memory leaks
useEffect(() => {
  // Revoke the data URIs
  return () => files.forEach(file => URL.revokeObjectURL(file.preview));
}, [files]);

Text

Présentation d'IronPDF

IronPDF est un package NPM puissant conçu pour faciliter la génération de PDF dans les applications Node.js. Il vous permet de créer des documents PDF à partir de contenu HTML, d'URLs, ou même de fichiers PDF existants. Que vous génériez des factures, des rapports ou tout autre type de document, IronPDF simplifie le processus avec son API intuitif et son ensemble de fonctionnalités robustes.

Les principales fonctionnalités d'IronPDF incluent

1. Conversion de HTML en PDF

Convertissez le contenu HTML en documents PDF en toute simplicité. Cette fonctionnalité est particulièrement utile pour générer des PDF dynamiques à partir de contenu web.

2. Conversion d'URL en PDF

Générez des PDFs directement à partir d'URLs. Cela vous permet de capturer le contenu des pages web et de les enregistrer sous forme de fichiers PDF programmatiquement.

3. Manipulation de PDF

Fusionnez, divisez et manipulez facilement des documents PDF existants. IronPDF fournit des fonctionnalités pour manipuler les fichiers PDF, comme ajouter des pages, diviser des documents, et plus encore.

4. Sécurité des PDF

Sécurisez vos documents PDF en les chiffrant avec des mots de passe ou en appliquant des signatures numériques. IronPDF propose des options pour protéger vos documents sensibles contre l'accès non autorisé.

5. Sortie de haute qualité

Produisez des documents PDF de haute qualité avec un rendu précis du texte, des images et du formatage. IronPDF garantit que vos PDF générés maintiennent la fidélité au contenu original.

6. Compatibilité multiplateforme

IronPDF est compatible avec diverses plateformes, y compris Windows, Linux et macOS, ce qui le rend adapté à une large gamme d'environnements de développement.

7. Intégration simple

Intégrez facilement IronPDF dans vos applications Node.js en utilisant son paquet npm. L'API est bien documentée, ce qui facilite l'incorporation des capacités de génération de PDF dans vos projets.

Que vous développiez une application web, un script côté serveur ou un outil en ligne de commande, IronPDF vous permet de créer des documents PDF professionnels de manière efficace et fiable.

Générer un document PDF avec IronPDF et utiliser le package NPM Dropzone

Installation des dépendances : Commencez par créer un nouveau projet Next.js (si vous ne l'avez pas déjà fait) à l'aide de la commande suivante : Consultez la page d'installation.

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"

SHELL

Ensuite, naviguez vers votre répertoire de projet :

cd demo-dropzone-ironpdf

cd demo-dropzone-ironpdf

SHELL

Installez les paquets requis :

> npm install @ironsoftware/ironpdf, react-dropzone

npm install @ironsoftware/ironpdf, react-dropzone

Créer un PDF : Créons maintenant un exemple simple de génération d'un PDF à l'aide IronPDF. Dans votre composant Next.js (par exemple, pages/index.tsx), ajoutez le code suivant :

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('');

    // Function to display different types of toast messages
    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' }
        });
    };

    // Function to generate and download a PDF
    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(); // Trigger the download
            link.parentNode.removeChild(link); // Remove the link
        } catch (error) {
            console.error('Error generating PDF:', error);
        }
    };

    // Handle changes in the text input field
    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('');

    // Function to display different types of toast messages
    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' }
        });
    };

    // Function to generate and download a PDF
    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(); // Trigger the download
            link.parentNode.removeChild(link); // Remove the link
        } catch (error) {
            console.error('Error generating PDF:', error);
        }
    };

    // Handle changes in the text input field
    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>
    );
}

Text

Puisqu'IronPDF s'exécute uniquement sur Node, ajoutez ensuite une API à l'application où le PDF est généré sur node.

Créez un fichier pdf.js dans le dossier pages/api et ajoutez le code source ci-dessous :

// 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.log('PDF data:', 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.log('PDF data:', 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();
    }
}

JavaScript

Remarque : Dans le code ci-dessus, assurez-vous d'ajouter votre propre clé de licence.

Exécutez votre application : Démarrez votre application Next.js :

npm run dev
# or
yarn dev

npm run dev
# or
yarn dev

SHELL

Maintenant, entrez l'URL du site web pour générer un PDF et cliquez sur " Générer un PDF ". Un fichier nommé awesomeIron.pdf tel qu'indiqué ci-dessous sera téléchargé.

Maintenant, cliquez sur la zone de dépôt et sélectionnez le fichier téléchargé. Cela affichera un aperçu du fichier avec le nom affiché en bas : awesomeIron.pdf.

Licence IronPDF

Consultez la page IronPDF pour les détails de la licence.

Placez la clé de licence dans l'application comme illustré ci-dessous :

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";

JavaScript

Conclusion

L'intégration de Dropzone avec React en utilisant react-dropzone est un processus simple qui améliore considérablement l'expérience de téléchargement de fichiers. Avec des fonctionnalités telles que le glisser-déposer, les aperçus de fichiers et de vastes options de personnalisation, react-dropzone peut être un ajout précieux à vos projets React. Commencez à explorer ses capacités et adaptez-le pour répondre aux besoins de votre application !

IronPDF, quant à lui, est une bibliothèque polyvalente de génération et de manipulation de PDF qui facilite son intégration dans les applications. IronPDF propose une documentation détaillée et des exemples de code pour aider les développeurs à démarrer.

En suivant les étapes décrites dans cet article, vous pouvez créer un composant de transfert de fichiers robuste dans votre application React et également intégrer des capacités de génération de fichiers PDF dans des applications modernes.

Curtis Chau

Discutez maintenant avec l'équipe d'ingénierie

Rédacteur technique

Curtis Chau détient un baccalauréat en informatique (Université de Carleton) et se spécialise dans le développement front-end avec expertise en Node.js, TypeScript, JavaScript et React. Passionné par la création d'interfaces utilisateur intuitives et esthétiquement plaisantes, Curtis aime travailler avec des frameworks modernes et créer des manuels bien structurés et visuellement attrayants.

...