HILFE ZUM KNOTENPUNKT

dropzone npm (So funktioniert es für Entwickler)

Veröffentlicht 29. September 2024

Teilen Sie:

Das Hochladen von Dateien ist eine häufige Funktion in Webanwendungen, und es benutzerfreundlich zu gestalten, ist entscheidend für eine gute Benutzererfahrung. Eine beliebte Bibliothek, die diesen Prozess vereinfacht, ist Dropzone.js. Wenn kombiniert mit Reagieren Sie, Ablagefläche kann ein leistungsstarkes Werkzeug zur Implementierung von Drag-and-Drop-Datei-Uploads sein. Der react-dropzone integriert sich perfekt und nahtlos mit minimalem Entwicklungsaufwand. Dieser Artikel wird Sie durch die Integration führen Abladebereich mit einer React-Anwendung unter Verwendung des react-dropzone-Pakets, einem ausgezeichneten Wrapper um die Dropzone.js-Bibliothek.

In diesem Artikel werden wir uns auch mit IronPDF NPM-Paket zum Erstellen, Bearbeiten und Verwalten von PDF-Dokumenten.

Warum Dropzone in React verwenden?

Ablagefläche bietet verschiedene Funktionen, die das Hochladen von Dateien nahtlos gestalten:

1. Drag-and-Drop-Schnittstelle

Ermöglicht es Benutzern, Dateien per Drag & Drop auszuwählen. Fügt programmatisch einen Dateidialog hinzu.

2. Vorschauen

Zeigt standardmäßig Miniaturansichten von Bildern aus heruntergeladenen Dateien an. Die Vorschauen der Anzeigedateien tragen zur Verbesserung der Lesbarkeit der Benutzeroberfläche bei.

3. Mehrfache Dateiuploads

Unterstützt das Hochladen mehrerer Dateien gleichzeitig.

4. Anpassbar

Hochgradig anpassbar mit verschiedenen Optionen und Rückrufen. Dateidialog oder Dateiauswahldialog anpassen

5. Große Dateien segmentierte Uploads

Laden Sie große Dateien mit gestückeltem Upload hoch.

6. Ereignisse verwalten

Dateidialog-Abbruch-Callback und auch Browser-Bildgrößenänderungsereignisse können verarbeitet werden.

Einrichten der React-Anwendung

Bevor Sie Dropzone integrieren, stellen Sie sicher, dass Sie eine React-Anwendung eingerichtet haben. Wenn Sie keine haben, können Sie ein neues React-Projekt erstellen, indem Sie Create React App:

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#

Installieren von react-dropzone

Um Dropzone in Ihrem React-Projekt zu verwenden, müssen Sie das installieren react-dropzone-Paket:

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#

Grundlegende Verwendung von react-dropzone

Hier ist ein einfaches Beispiel für die Nutzung von react-dropzone in einer React-Komponente:

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#

Handhabung von Dateiuploads

Wenn Dateien abgelegt oder ausgewählt werden, erhält der onDrop-Callback ein Array akzeptierter Dateien. Sie können dann die Dateien verarbeiten, indem Sie sie beispielsweise auf einen Server hochladen. Hier erfahren Sie, wie Sie den onDrop-Callback erweitern können, um Dateien mit fetch hochzuladen:

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#

Vorschauen anzeigen

Sie können auch Vorschauen der hochgeladenen Dateien anzeigen. Hier ist ein Beispiel dafür, wie man dies macht:

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#

OUTPUT

dropzone npm (Wie es für Entwickler funktioniert): Abbildung 1 - So sieht Ihre react-dropzone-Anwendung aus. Sie können eine oder mehrere Dateien ziehen und ablegen/auswählen.

Aufräumen

Es ist wichtig, die Objekt-URLs zu widerrufen, um Speicherlecks zu vermeiden. Sie können dies erreichen, indem Sie den useEffect-Hook verwenden:

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#

Einführung in IronPDF

IronPDF ist ein leistungsstarkes npm-Paket, das zur Unterstützung der PDF-Erstellung innerhalb von Node.js-Anwendungen entwickelt wurde. Es ermöglicht Ihnen, PDF-Dokumente aus HTML-Inhalt, URLsoder sogar vorhandene PDF-Dateien. Egal, ob Sie Rechnungen, Berichte oder andere Arten von Dokumenten erstellen, IronPDF vereinfacht den Prozess mit seiner intuitiven API und robustes Funktionsset.

dropzone npm (Wie es für Entwickler funktioniert): Abbildung 2 - IronPDF for Node.js: Die Node.js-PDF-Bibliothek

Die wichtigsten Merkmale von IronPDF sind

1. Konvertierung von HTML in PDF

Konvertieren Sie mühelos HTML-Inhalte in PDF-Dokumente. Diese Funktion ist besonders nützlich für die Erstellung dynamischer PDFs aus Webinhalten.

2. URL-zu-PDF-Konvertierung

Erstellen Sie PDFs direkt aus URLs. Dies ermöglicht es Ihnen, den Inhalt von Webseiten zu erfassen und sie programmatisch als PDF-Dateien zu speichern.

3. PDF-Bearbeitung

Bestehende PDF-Dokumente lassen sich mühelos zusammenführen, aufteilen und manipulieren. IronPDF bietet Funktionen zur Bearbeitung von PDF-Dateien wie das Anfügen von Seiten, das Aufteilen von Dokumenten und mehr.

4. PDF-Sicherheit

Sichern Sie Ihre PDF-Dokumente, indem Sie sie mit Passwörtern verschlüsseln oder mit digitalen Signaturen versehen. IronPDF bietet Optionen zum Schutz Ihrer vertraulichen Dokumente vor unbefugtem Zugriff.

5. Hochwertige Ausgabe

Erstellen Sie hochwertige PDF-Dokumente mit präzisem Rendering von Text, Bildern und Formatierungen. IronPDF stellt sicher, dass die von Ihnen generierten PDF-Dateien dem ursprünglichen Inhalt treu bleiben.

6. Plattformübergreifende Kompatibilität

IronPDF ist mit verschiedenen Plattformen kompatibel, darunter Windows, Linux und macOS, und eignet sich daher für eine breite Palette von Entwicklungsumgebungen.

7. Einfache Integration

Integrieren Sie IronPDF einfach in Ihre Node.js-Anwendungen mit Hilfe des npm-Pakets. Die API ist gut dokumentiert, so dass es einfach ist, PDF-Generierungsfunktionen in Ihre Projekte einzubinden.

Egal, ob Sie eine Webanwendung, ein serverseitiges Skript oder ein Befehlszeilen-Tool entwickeln, IronPDF ermöglicht Ihnen das Erstellen von professionellen PDF-Dokumenten effizient und zuverlässig.

Erstellen Sie ein PDF-Dokument mit IronPDF und verwenden Sie das Dropzone NPM-Paket.

Abhängigkeiten installieren: Erstellen Sie zunächst ein neues Next.js-Projekt (falls Sie es noch nicht getan haben) mit dem folgenden Befehl: Siehe die Einrichtung seite.

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#

Navigieren Sie dann zu Ihrem Projektverzeichnis:

cd demo-dropzone-ironpdf

cd demo-dropzone-ironpdf

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

VB C#

Installieren Sie die erforderlichen Pakete:

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#

PDF erstellen: Lassen Sie uns nun ein einfaches Beispiel zur Erstellung eines PDFs mit IronPDF erstellen. In Ihrer Next.js-Komponente (z.B. Seiten/index.tsx)fügen Sie den folgenden Code hinzu:

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#

Da IronPDF nur auf Node läuft, füge als nächstes eine API für die App hinzu, bei der PDFs auf Node erstellt werden.

Erstellen Sie eine Datei namens pdf.js im Ordner pages/api und fügen Sie den unten stehenden Quellcode hinzu.

// 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#

Hinweis: Fügen Sie im obigen Code Ihren eigenen Lizenzschlüssel hinzu.

Führen Sie Ihre App aus: Starten Sie Ihre Next.js-App:

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#

AUSGABE

dropzone npm (Wie es für Entwickler funktioniert): Abbildung 3 - So sieht Ihre Next.js-Anwendung aus, die Dropzone und IronPDF integriert. Sie können die URL eingeben und auf die Schaltfläche Generieren klicken, um den HTML-Inhalt der URL mit IronPDF in PDF umzuwandeln.

Geben Sie jetzt die Website-URL ein, um das PDF zu erstellen, und klicken Sie auf PDF erstellen. Eine Datei mit dem Namen awesomeIron.pdf wird wie unten heruntergeladen.

dropzone npm (Wie es für Entwickler funktioniert): Abbildung 4 - Ausgabepdf erstellt mit IronPDF

Klicken Sie nun auf die Dropzone und wählen Sie die heruntergeladene Datei aus. Dies zeigt eine Vorschau der Datei mit dem Namen unten angezeigt: awesomeIron.pdf

dropzone npm (Funktionsweise für Entwickler): Abbildung 5 - Sie können die generierte awesomeIron.pdf-Datei herunterladen, indem Sie sie über den im Dropzone bereitgestellten Link auswählen.

IronPDF-Lizenz

IronPDF seite.

Platzieren Sie den Lizenzschlüssel in der App wie unten gezeigt:

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#

Schlussfolgerung

Integration von Ablagefläche mit React unter Verwendung von react-dropzone ist ein unkomplizierter Prozess, der das Hochladen von Dateien erheblich verbessert. Mit Funktionen wie Drag-and-Drop, Dateivorschauen und umfangreichen Anpassungsoptionen kann react-dropzone eine wertvolle Ergänzung für Ihre React-Projekte sein. Beginnen Sie mit der Erkundung seiner Funktionen und passen Sie es an die Anforderungen Ihrer Anwendung an.!

IronPDFhingegen, ist eine vielseitige PDF-Generierungs- und -Manipulationsbibliothek, die sich leicht in Anwendungen integrieren lässt. IronPDF bietet umfassende dokumentation und code-Beispiele um Entwicklern den Einstieg zu erleichtern.

Indem Sie die in diesem Artikel beschriebenen Schritte befolgen, können Sie eine robuste Datei-Upload-Komponente in Ihrer React-Anwendung erstellen und zudem PDF-Dateigenerierungsmöglichkeiten in moderne Anwendungen integrieren.

< PREVIOUS
WebSockets Node.js js (Wie es für Entwickler funktioniert)

NÄCHSTES >
tailwind npm (Wie es für Entwickler funktioniert)