Nachrichten-Symbol
  1. IronPDF for Node.js
  2. IronPDF for Node.js Blog
  3. Hilfe zum Knotenpunkt
  4. toastify npm
HILFE ZUM KNOTENPUNKT

toastify npm (Wie es für Entwickler funktioniert)

Veröffentlicht 29. September 2024
Teilen Sie:

Einführung

In der modernen Webentwicklung ist die Bereitstellung von zeitnahem Feedback an Benutzer entscheidend für ein nahtloses Benutzererlebnis. Toast-Benachrichtigungen sind eine effektive Möglichkeit, Nachrichten zu übermitteln, ohne den Arbeitsablauf des Benutzers zu unterbrechen. Die React-toastify Paket ist eine beliebte Wahl für die Implementierung von Toast-Benachrichtigungen in React-Anwendungen aufgrund seiner Einfachheit und Flexibilität. Wir werden uns auch damit befassen IronPDF NPM-Paket zum Erstellen, Bearbeiten und Verwalten von PDF-Dokumenten. Dieser Artikel wird Sie durch den Prozess der Integration führen React-toastify und IronPDF in Ihr React-Projekt.

Was ist Toastify?

React-toastify ist ein NPM-Paket, das es ermöglicht, anpassbare Toast-Benachrichtigungen zu Ihren React-Anwendungen hinzuzufügen, mit minimalem Einrichtungsaufwand. Es bietet eine Vielzahl von Funktionen, darunter verschiedene Benachrichtigungstypen, automatische Schließfunktion, benutzerdefinierte Gestaltung, verbleibende Zeitmöglichkeit und mehr.

toastify npm (Wie es für Entwickler funktioniert): Abbildung 1 - Toast-Benachrichtigungen mit verschiedenen Stilen und Anpassungen mithilfe des React-Toastify-Pakets.

Einrichtung

Für den Einstieg in die react-toastify, müssen Sie das Paket über NPM oder Yarn installieren. Führen Sie den folgenden Befehl im Stammverzeichnis Ihres Projekts aus:

npm install react-toastify
npm install react-toastify
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'npm install react-toastify
VB   C#

oder

yarn add react-toastify
yarn add react-toastify
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'yarn add react-toastify
VB   C#

Grundlegende Verwendung

Nach der Installation des Pakets können Sie react-toastify in Ihrer React-Anwendung verwenden. Nachfolgend ein einfaches Codebeispiel, das zeigt, wie man react-toastify integrieren und verwenden kann.

1. Toastify-Komponenten importieren

Zuerst müssen Sie die erforderlichen Komponenten aus react-toastify importieren:

import React from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import React from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'import React from 'react'; import { ToastContainer, toast } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css';
VB   C#

2. Toastify konfigurieren

Fügen Sie als Nächstes die ToastContainer-Komponente zu Ihrer Anwendung hinzu.

function App() {
  return (
    <div>  // react component rendered inside
      <ToastContainer />
    </div>
  );
}
function App() {
  return (
    <div>  // react component rendered inside
      <ToastContainer />
    </div>
  );
}
Private Function App() As [function]
'INSTANT VB WARNING: Instant VB cannot determine whether both operands of this division are integer types - if they are then you should use the VB integer division operator:
  Return ((Of div) <ToastContainer /> </div>)
End Function
VB   C#

3. Toast-Benachrichtigungen auslösen

Sie können eine Toast-Benachrichtigung mit der Toast-Funktion auslösen. Hier ist ein Codebeispiel, wie eine Erfolgsmeldung angezeigt wird:

function notify() {
  toast.success("Success! This is a success message.", {
    position: toast.POSITION.TOP_RIGHT
  });
}
function App() {
  return (
    <div>
      <button onClick={notify}>Show Toast</button>
      <ToastContainer /> // react component inside
    </div>
  );
}
function notify() {
  toast.success("Success! This is a success message.", {
    position: toast.POSITION.TOP_RIGHT
  });
}
function App() {
  return (
    <div>
      <button onClick={notify}>Show Toast</button>
      <ToastContainer /> // react component inside
    </div>
  );
}
Private Function notify() As [function]
  toast.success("Success! This is a success message.", { position:= toast.POSITION.TOP_RIGHT })
End Function
Private Function App() As [function]
'INSTANT VB TODO TASK: The following line contains an assignment within expression that was not extracted by Instant VB:
'ORIGINAL LINE: return (<div> <button onClick={notify}> Show Toast</button> <ToastContainer /> </div>);
'INSTANT VB WARNING: Instant VB cannot determine whether both operands of this division are integer types - if they are then you should use the VB integer division operator:
  Return ((Of div) <button onClick={AddressOf notify}> Show Toast</button> <ToastContainer /> </div>)
End Function
VB   C#

Erweiterte Funktionen

OnOpen- und OnClose-Hooks

React-toastify bietet verschiedene fortschrittliche Funktionen, mit denen Sie das Verhalten und das Erscheinungsbild Ihrer Toasts mithilfe von onOpen- und onClose-Hooks anpassen können.

import React from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
function App() {
  const notify = () => {
    toast("Hello there", {
      onOpen: () => window.alert('Called when I open'),
      onClose: () => window.alert('Called when I close')
    });
  };
  return (
    <div>
      <button onClick={notify}>Notify</button>
      <ToastContainer />
    </div>
  );
}
export default App;
import React from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
function App() {
  const notify = () => {
    toast("Hello there", {
      onOpen: () => window.alert('Called when I open'),
      onClose: () => window.alert('Called when I close')
    });
  };
  return (
    <div>
      <button onClick={notify}>Notify</button>
      <ToastContainer />
    </div>
  );
}
export default App;
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'import React from 'react'; import { ToastContainer, toast } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; @function App() { const notify = () => { toast("Hello there", { onOpen: () => window.alert('Called @when I open'), onClose: () => window.alert('Called @when I close') }); }; Return(<div> <button onClick={notify}> Notify</button> <ToastContainer /> </div>); } export default App;
VB   C#

In diesem Beispiel:

  • Wenn das Toast geöffnet wird, löst der onOpen-Hook aus, und wir zeigen einen Alarm an.
  • Wenn das Toast geschlossen wird, wird der onClose-Hook ausgelöst und ein weiterer Alarm angezeigt.

Benutzerdefinierte Positionen

Sie können Toasts in verschiedenen Positionen auf dem Bildschirm anzeigen, indem Sie die Positionsoption verwenden:

toast.info("Information message", {
  position:"top-right"
});
toast.info("Information message", {
  position:"top-right"
});
toast.info("Information message", { position:="top-right" })
VB   C#

Automatische Schließdauer

Sie können die Dauer, für die ein Toast angezeigt wird, mit der autoClose-Option festlegen:

toast.warn("Warning message", {
  autoClose: 5000 // Auto close after 5 seconds
});
toast.warn("Warning message", {
  autoClose: 5000 // Auto close after 5 seconds
});
toast.warn("Warning message", { autoClose:= 5000 })
VB   C#

Benutzerdefinierte Gestaltung

Benutzerdefiniertes Styling kann auf Toasts angewendet werden, indem die className- und Stiloptionen verwendet werden:

toast.error("Error message", {
  className: 'custom-toast',
  style: { background: 'red', color: 'white' }
});
toast.error("Error message", {
  className: 'custom-toast',
  style: { background: 'red', color: 'white' }
});
toast.error("Error message", { className: 'custom-toast', style: { background: 'red', color: 'white' } });
VB   C#

Toasts schließen

Toasts können programmgesteuert mit der Methode toast.dismiss geschlossen werden:

const toastId = toast("This toast can be dismissed");
function dismissToast() {
  toast.dismiss(toastId);
}
const toastId = toast("This toast can be dismissed");
function dismissToast() {
  toast.dismiss(toastId);
}
Private const toastId = toast("This toast can be dismissed")
Private Function dismissToast() As [function]
  toast.dismiss(toastId)
End Function
VB   C#

Hier ist ein vollständiges Beispiel, das die Verwendung verschiedener Funktionen von react-toastify demonstriert:

import React from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
function App() {
  const notify = () => {
    toast.success("Success! This is a success message.", {
      position:"top-right"  // success notification
    });
    toast.info("Information message", {
      position:"bottom-left"  // info will be displayed with progress bar
    });
    toast.warn("Warning message", {
      autoClose: 5000 // close or pause toast messages
    });
    toast.error("Error message", {
      className: 'custom-toast',
      style: { background: 'red', color: 'white' }
    });
  };
  return (
    <div>
      <button onClick={notify}>Show Toasts</button>
      <ToastContainer />
    </div>
  );
}
export default App;
import React from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
function App() {
  const notify = () => {
    toast.success("Success! This is a success message.", {
      position:"top-right"  // success notification
    });
    toast.info("Information message", {
      position:"bottom-left"  // info will be displayed with progress bar
    });
    toast.warn("Warning message", {
      autoClose: 5000 // close or pause toast messages
    });
    toast.error("Error message", {
      className: 'custom-toast',
      style: { background: 'red', color: 'white' }
    });
  };
  return (
    <div>
      <button onClick={notify}>Show Toasts</button>
      <ToastContainer />
    </div>
  );
}
export default App;
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'import React from 'react'; import { ToastContainer, toast } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; @function App() { 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' } }); }; Return(<div> <button onClick={notify}> Show Toasts</button> <ToastContainer /> </div>); } export default App;
VB   C#

AUSGABE

toastify npm (Wie es für Entwickler funktioniert): Abbildung 2 - React-Toastify-Anwendung, die auf localhost port:3000 läuft und Toast-Benachrichtigungen für Erfolgs-, Warn- und Fehlermeldungen anzeigt.

Einführung in IronPDF

IronPDF ist eine leistungsstarke C#-PDF-Bibliothek, die es Entwicklern ermöglicht, PDFs in ihren .NET-Projekten zu erstellen und zu bearbeiten. Egal, ob Sie PDFs aus HTML erstellen, bestehende PDFs bearbeiten oder Webseiten in das PDF-Format konvertieren müssen, IronPDF ist für Sie da.

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

Hier sind einige wichtige Funktionen und Anwendungsfälle:

1. Konvertierung von HTML in PDF

IronPDF kann HTML-Seiten, sei es von einer URL, einer HTML-Datei oder einem HTML-String, in PDF umwandeln. Sie können auch lokale HTML-Dateien oder HTML-Strings in PDFs konvertieren.

2. Plattformübergreifende Unterstützung

IronPDF funktioniert nahtlos auf verschiedenen Plattformen, einschließlich:

  • .NET Core (8, 7, 6, 5 und 3.1+)
  • .NET-Standard (2.0+)
  • .NET-Framework (4.6.2+)
  • Web (Blazor und WebForms)
  • Schreibtisch (WPF UND MAUI)
  • Konsole (App & Bibliothek)
  • Windows-, Linux- und macOS-Umgebungen.

3. Bearbeiten und Manipulieren von PDFs

IronPDF ermöglicht Ihnen:

4. Anpassung und Formatierung

Sie können Seitenvorlagen, Kopfzeilen, Fußzeilen, Seitenzahlen und benutzerdefinierte Ränder anwenden. IronPDF unterstützt UTF-8-Zeichenkodierung, Basis-URLs, Asset-Kodierung und mehr.

5. Einhaltung von Standards

IronPDF hält sich an verschiedene PDF-Standards, einschließlich PDF-Versionen. (1.2 - 1.7), PDF/UA (PDF/UA-1), und PDF/A (PDF/A-3b).

PDF-Dokument mit IronPDF und Toastify NPM-Paket erzeugen

Abhängigkeiten installieren: Erstellen Sie zunächst ein neues Next.js-Projekt (falls Sie es noch nicht getan haben) unter Verwendung des folgenden Befehls: Bitte beziehen Sie sich auf die Einrichtung seite.

npx create-next-app@latest my-pdf-app --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"
npx create-next-app@latest my-pdf-app --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 my-pdf-app --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"
VB   C#

Navigieren Sie dann zu Ihrem Projektverzeichnis:

cd my-pdf-app
cd my-pdf-app
'INSTANT VB TODO TASK: The following line uses invalid syntax:
'cd my-pdf-app
VB   C#

Installieren Sie die erforderlichen Pakete:

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

Erstellen Sie ein PDF: Lassen Sie uns nun ein einfaches Beispiel für die Erstellung eines PDFs mit IronPDF. 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";
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', 'example.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>Demo Toaster and Generate PDF From IronPDF</title>
                <link rel="icon" href="/favicon.ico"/>
            </Head>
            <main>
                <h1>Demo Toaster and Generate PDF From IronPDF</h1>
                <button style={{margin:20, padding:5}} onClick={notify}>Show Toasts</button>
                <p>
                    <span>Enter Url To Convert to PDF:</span>{" "}
                </p>
                <button style={{margin:20, padding:5}} onClick={generatePdf}>Generate PDF</button>
                <ToastContainer/>
            </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";
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', 'example.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>Demo Toaster and Generate PDF From IronPDF</title>
                <link rel="icon" href="/favicon.ico"/>
            </Head>
            <main>
                <h1>Demo Toaster and Generate PDF From IronPDF</h1>
                <button style={{margin:20, padding:5}} onClick={notify}>Show Toasts</button>
                <p>
                    <span>Enter Url To Convert to PDF:</span>{" "}
                </p>
                <button style={{margin:20, padding:5}} onClick={generatePdf}>Generate PDF</button>
                <ToastContainer/>
            </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"; 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', 'example.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> Demo Toaster @and Generate PDF From IronPDF</title> <link rel="icon" href="/favicon.ico"/> </Head> <main> <h1> Demo Toaster @and Generate PDF From IronPDF</h1> <button style={{margin:20, padding:5}} onClick={notify}> Show Toasts</button> <p> <span> Enter Url @To Convert @to PDF:</span>{" "} </p> <button style={{margin:20, padding:5}} onClick={generatePdf}> Generate PDF</button> <ToastContainer/> </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.js läuft, fügen Sie als Nächstes eine API für die App hinzu, bei der PDFs mit Node.js erstellt werden.

Erstellen Sie eine Datei namens pdf.js im Ordner pages/api und fügen Sie den untenstehenden Code 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

Öffnen Sie Ihren Browser und navigieren Sie zu http://localhost:3000, um die untenstehende Website zu sehen.

toastify npm (Wie es für Entwickler funktioniert): Abbildung 4 - React-Toastify-Anwendung läuft auf localhost Port:3000 und zeigt eine Schaltfläche Show Toasts zusammen mit einem Textfeld für Enter URL To Convert to PDF und einer Generate PDF Schaltfläche an.

Klicken Sie jetzt auf die Schaltfläche "Show Toasts", um Toast-Nachrichten anzuzeigen.

toastify npm (Wie es für Entwickler funktioniert)Abbildung 5 - Nach dem Klicken auf die Schaltfläche Toasts anzeigen zeigt die Anwendung Toast-Benachrichtigungen für Erfolg-, Warn- und Fehlermeldungen an. Außerdem können Sie das Textfeld verwenden, um die URL der Webseite einzugeben, die Sie in ein PDF-Dokument umwandeln möchten, und auf die Schaltfläche „PDF generieren“ klicken. Dies wird die angegebene Webseite mit IronPDF in eine PDF-Datei umwandeln.

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.

toastify npm (Wie es für Entwickler funktioniert): Abbildung 6 - Ausgabedokument als PDF, erzeugt durch die Umwandlung der angegebenen URL in PDF mit IronPDF

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

React-toastify ist eine leistungsstarke und benutzerfreundliche Bibliothek zum Hinzufügen von Toast-Benachrichtigungen zu Ihren React-Anwendungen. Mit seiner breiten Palette an Funktionen und Anpassungsoptionen können Sie das Benutzererlebnis verbessern, indem Sie in einer äußerst einfachen und unaufdringlichen Weise Echtzeit-Feedback bereitstellen. Andererseits IronPDF ist bei weitem die vielseitigste Enterprise-Bibliothek mit Unterstützung von IronSoftware zum Erstellen, Bearbeiten und Verwalten von PDF-Dokumenten. Indem Sie die in diesem Artikel beschriebenen Schritte befolgen, können Sie schnell integrieren React-toastify und IronPDF in Ihr Projekt einfügen und seine Fähigkeiten nutzen.

Für weitere Informationen zum Einstieg in IronPDF wenden Sie sich bitte an ihre Dokumentation seite und Codebeispiele.

< PREVIOUS
npm replizieren (Wie es für Entwickler funktioniert)
NÄCHSTES >
Socket io node.js (Wie es für Entwickler funktioniert)

Installation mit npm

Version:2024.9

> npm i @ironsoftware/ironpdf

Ein Problem melden

Sind Sie bereit, loszulegen? Version: 2024.9 gerade veröffentlicht

Kostenlose npm-Installation Lizenzen anzeigen >

Holen Sie sich Ihr FREE

30-Tage-Testschlüssel sofort.

15-Tage-Probe-Schlüssel sofort.

bullet_checkedKeine Kreditkarte oder Kontoerstellung erforderlich
Das Versuchsformular wurde eingereicht
erfolgreich.

Ihr Testschlüssel sollte in der E-Mail enthalten sein.
Sollte dies nicht der Fall sein, wenden Sie sich bitte an
support@ironsoftware.com

schuss_testTest in der Produktion
ohne Wasserzeichen
aufzählungszeichen_Kalender30 Tage vollständig
funktionsfähiges Produkt
aufzählungszeichen_Unterstützung24/5 technisch
unterstützung während des Prozesses

Ich danke Ihnen!

Ihr Lizenzschlüssel wurde an die angegebene E-Mail-Adresse gesendet.Kontakt

24-Stunden-Upgrade-Angebot:

Save 50% in einem
Professional Upgrade

Weiter Professional für 10 Entwickler
und unbegrenzte Projekte.

stunden

:

minuten

:

sekunden

Upgrade auf Professional

Upgrade

Professional

$600 USD

$299 USD

  • 10 Entwickler
  • 10 Standorte
  • 10 Projekte
HEUTE NUR

5 .NET-Produkte zum Preis von 2

IronPDF IronOCR IronXL IronBarcode IronWebscraper

Gesamtwert der Suite:

$7,192 USD

Upgrade-Preis

HEUTE
NUR

$499 USD

Nach 24 Std

$1,098 USD

Kostenlos testen

Voll funktionsfähiges Produkt, sofortiger Erhalt des Schlüssels