NODE-HILFE

replicate npm (Wie es für Entwickler funktioniert)

Name: IronPDF
Brand: Iron Software
Availability: InStock
Rating: 4.87 (307 reviews)

Aktualisiert:22. Juni 2025

Das 'replicate' NPM-Paket ist ein leistungsstarkes Client-Tool zur Integration von maschinellen Lernmodellen in React-Anwendungen. Es ermöglicht Entwicklern, vortrainierte Modelle einfach zu verwenden und Inferenz direkt in ihren Anwendungen durchzuführen, ohne komplexe Backend-Infrastruktur verwalten zu müssen. Hier ist ein Überblick darüber, wie Sie das replicate NPM-Paket in Ihrem React-Projekt verwenden können. Zusätzlich werden wir IronPDF untersuchen, eine Bibliothek zur PDF-Generierung, und demonstrieren, wie man beide Bibliotheken kombiniert, um eine funktionierende Anwendung zu erstellen.

Einführung in Replicate

Replicate ist eine Online-Plattform, die über eine einfache API Zugang zu maschinellen Lernmodellen bietet. Es hostet Modelle aus verschiedenen Bereichen wie Bildgenerierung, Textanalyse und mehr. Durch die Verwendung des 'replicate' NPM-Pakets können Entwickler diese Modelle nahtlos in ihre Anwendungen integrieren.

Einstieg

Installation

Um replicate in Ihrer React-Anwendung zu verwenden, müssen Sie zuerst das Paket installieren. Sie können dies mit npm oder yarn tun:

npm install replicate

npm install replicate

SHELL

oder

yarn add replicate

yarn add replicate

SHELL

API-Schlüssel

Sie benötigen einen API-Schlüssel, um mit der Replicate-API zu interagieren. Diesen Schlüssel erhalten Sie, indem Sie sich auf der Replicate-Website anmelden und ein neues API-Token erstellen.

Grundlagen

Hier ist eine Schritt-für-Schritt-Anleitung zur Verwendung des replicate Pakets in einer React-Anwendung.

1. Importieren Sie das Paket und initialisieren Sie den Client

import Replicate from 'replicate';

// Initialize the Replicate client with your API token
const replicate = new Replicate({
  auth: 'YOUR_API_TOKEN'    
});

import Replicate from 'replicate';

// Initialize the Replicate client with your API token
const replicate = new Replicate({
  auth: 'YOUR_API_TOKEN'    
});

JAVASCRIPT

2. Führen Sie eine Inferenz durch

Angenommen, Sie möchten ein Modell verwenden, um ein Bild aus Text zu generieren, können Sie mit nur wenigen Zeilen Code das Ergebnis wie unten gezeigt erhalten:

// Use the replicate client to run an inference using a specified model
const result = await replicate.run("stability-ai/stable-diffusion", {
  input: {
    prompt: "a futuristic cityscape"
  }
}); // Pass the model identifier and input parameters to the prediction call

// Log the result
console.log(result);

// Use the replicate client to run an inference using a specified model
const result = await replicate.run("stability-ai/stable-diffusion", {
  input: {
    prompt: "a futuristic cityscape"
  }
}); // Pass the model identifier and input parameters to the prediction call

// Log the result
console.log(result);

JAVASCRIPT

Beispielanwendung

Lassen Sie uns eine einfache React-Anwendung erstellen, die es Benutzern ermöglicht, basierend auf Texteingaben Bilder zu generieren, um die Nutzung des replicate-Pakets zu demonstrieren.

1. Ein neues React-Projekt einrichten:

npx create-react-app replicate-example
cd replicate-example
npm install replicate

npx create-react-app replicate-example
cd replicate-example
npm install replicate

SHELL

2. Eine Komponente zur Bildgenerierung erstellen:

import React, { useState } from 'react';
import Replicate from 'replicate';

// Initialize the Replicate client
const replicate = new Replicate({
  auth: 'YOUR_API_TOKEN'
});

const ImageGenerator = () => {
  const [prompt, setPrompt] = useState('');
  const [image, setImage] = useState(null);

  // Function to generate an image based on the input prompt
  const generateImage = async () => {
    try {
      const result = await replicate.run("stability-ai/stable-diffusion", {
        input: { prompt }
      });
      setImage(result.output[0]);
    } catch (error) {
      console.error("Error generating image:", error);
      alert("Failed to generate image. Please try again.");
    }
  };

  return (
    <div>
      <h1>Image Generator</h1>
      <input
        type="text"
        value={prompt}
        onChange={(e) => setPrompt(e.target.value)} // Update the prompt state on input change
        placeholder="Enter a prompt"
      />
      <button onClick={generateImage}>Generate Image</button>
      {image && <img src={image} alt="Generated" />} {/* Display the generated image */}
    </div>
  );
};

export default ImageGenerator;

import React, { useState } from 'react';
import Replicate from 'replicate';

// Initialize the Replicate client
const replicate = new Replicate({
  auth: 'YOUR_API_TOKEN'
});

const ImageGenerator = () => {
  const [prompt, setPrompt] = useState('');
  const [image, setImage] = useState(null);

  // Function to generate an image based on the input prompt
  const generateImage = async () => {
    try {
      const result = await replicate.run("stability-ai/stable-diffusion", {
        input: { prompt }
      });
      setImage(result.output[0]);
    } catch (error) {
      console.error("Error generating image:", error);
      alert("Failed to generate image. Please try again.");
    }
  };

  return (
    <div>
      <h1>Image Generator</h1>
      <input
        type="text"
        value={prompt}
        onChange={(e) => setPrompt(e.target.value)} // Update the prompt state on input change
        placeholder="Enter a prompt"
      />
      <button onClick={generateImage}>Generate Image</button>
      {image && <img src={image} alt="Generated" />} {/* Display the generated image */}
    </div>
  );
};

export default ImageGenerator;

JAVASCRIPT

3. Verwenden Sie die Komponente in Ihrer Anwendung:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import ImageGenerator from './ImageGenerator';

ReactDOM.render(
  <React.StrictMode>
    <App />
    <ImageGenerator />
  </React.StrictMode>,
  document.getElementById('root')
);

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import ImageGenerator from './ImageGenerator';

ReactDOM.render(
  <React.StrictMode>
    <App />
    <ImageGenerator />
  </React.StrictMode>,
  document.getElementById('root')
);

JAVASCRIPT

Fehler behandeln

Beim Arbeiten mit APIs ist es wichtig, Fehler angemessen zu behandeln. Sie können die Funktion generateImage so modifizieren, dass sie Fehler abfängt und anzeigt, wie im obigen Beispiel der Komponente ImageGenerator gezeigt.

Einführung in IronPDF

IronPDF ist ein vielseitiges NPM-Paket, das die PDF-Generierung in Node.js-Anwendungen vereinfacht. Es ermöglicht Ihnen, PDF-Dokumente aus HTML-Inhalten, URLs oder bestehenden PDF-Dateien zu erstellen. Ob Sie Rechnungen, Berichte oder andere Dokumententypen generieren müssen, IronPDF macht den Prozess mit seiner intuitiven API und umfassenden Funktionen einfach.

Hauptfunktionen von IronPDF

1. HTML-zu-PDF-Umwandlung

Konvertieren Sie HTML-Inhalte einfach in PDF-Dokumente, perfekt zur Generierung dynamischer PDFs aus Webinhalten.

2. URL-zu-PDF-Umwandlung

Erstellen Sie PDFs direkt aus URLs, sodass Sie Inhalte von Webseiten erfassen und diese programmgesteuert als PDF-Dateien speichern können.

3. PDF-Manipulation

Fügen Sie PDFs zusammen, teilen und manipulieren Sie bestehende PDF-Dokumente mühelos. IronPDF bietet Funktionen zum Anhängen von Seiten, Aufteilen von Dokumenten, Erstellen von PDF-Formularen und mehr.

4. PDF-Sicherheit

Schützen Sie Ihre PDF-Dokumente, indem Sie sie mit verschlüsseln und mit Passwörtern versehen oder digitale Signaturen anwenden, um Ihre sensiblen Dokumente vor unbefugtem Zugriff zu schützen.

5. Hochwertige Ausgabe

Erstellen Sie hochwertige PDF-Dokumente mit präziser Wiedergabe von Text, Bildern und Formatierungen und stellen Sie sicher, dass die generierten PDFs dem Originalinhalt treu bleiben.

6. Plattformübergreifende Kompatibilität

Die Kompatibilität von IronPDF mit Windows, Linux und macOS macht es für verschiedene Entwicklungsumgebungen geeignet.

7. Einfache Integration

Integrieren Sie IronPDF problemlos in Ihre Node.js-Anwendungen mit seinem NPM-Paket. Die gut dokumentierte API vereinfacht die Integration von PDF-Generierungsfunktionen in Ihre Projekte.

Ob Sie eine Webanwendung, ein serverseitiges Skript oder ein Befehlszeilen-Tool entwickeln, IronPDF ermöglicht Ihnen die Erstellung von PDF-Dokumenten in professioneller Qualität effizient und zuverlässig.

PDF-Dokument mit IronPDF generieren und Recharts NPM-Paket verwenden

Abhängigkeiten installieren

Erstellen Sie zunächst ein neues Next.js-Projekt (falls noch nicht geschehen) mit dem folgenden Befehl. Siehe hier:

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

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

SHELL

Navigieren Sie als Nächstes in Ihr Projektverzeichnis:

cd replicate-pdf

cd replicate-pdf

SHELL

Installieren Sie die erforderlichen Pakete:

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add replicate

yarn add @ironsoftware/ironpdf @ironsoftware/ironpdf-engine-windows-x64
yarn add replicate

SHELL

PDF-Generierungs-API

Der erste Schritt besteht darin, eine Backend-API zur Generierung des PDF-Dokuments zu erstellen. Da IronPDF nur serverseitig ausgeführt wird, müssen wir eine API erstellen, die aufgerufen wird, wenn Benutzer ein PDF generieren möchten. Erstellen Sie eine Datei unter dem Pfad pages/api/pdf/route.js und fügen Sie den folgenden Inhalt hinzu:

// pages/api/pdf.js
import { NextRequest, NextResponse } from 'next/server';
import { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";

// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "your key";

// API handler for generating a PDF from a URL
export const GET = async (req) => {
    const { searchParams } = new URL(req.url);
    const name = searchParams.get("url"); 
    try {
        const pdf = await PdfDocument.fromUrl(name);
        const data = await pdf.saveAsBuffer();
        console.error('data PDF:', data);
        return new NextResponse(data, {
            status: 200,
            headers: {
                "content-type": "application/pdf",
                "Content-Disposition": "attachment; filename=awesomeIron.pdf",
            },
        });
    } catch (error) {
        console.error('Error generating PDF:', error);
        return NextResponse.json({ detail: "error" }, { status: 500 });
    }
};

// pages/api/pdf.js
import { NextRequest, NextResponse } from 'next/server';
import { IronPdfGlobalConfig, PdfDocument } from "@ironsoftware/ironpdf";

// Apply your IronPDF license key
IronPdfGlobalConfig.getConfig().licenseKey = "your key";

// API handler for generating a PDF from a URL
export const GET = async (req) => {
    const { searchParams } = new URL(req.url);
    const name = searchParams.get("url"); 
    try {
        const pdf = await PdfDocument.fromUrl(name);
        const data = await pdf.saveAsBuffer();
        console.error('data PDF:', data);
        return new NextResponse(data, {
            status: 200,
            headers: {
                "content-type": "application/pdf",
                "Content-Disposition": "attachment; filename=awesomeIron.pdf",
            },
        });
    } catch (error) {
        console.error('Error generating PDF:', error);
        return NextResponse.json({ detail: "error" }, { status: 500 });
    }
};

JAVASCRIPT

IronPDF erfordert einen Lizenzschlüssel, den Sie auf der Lizenzseite erhalten und in den obigen Code einfügen können.

Fügen Sie den folgenden Code zu `index.js` hinzu.

'use client';
import { useState, useEffect, useRef } from "react";
import Image from "next/image";

// Utility function to create a delay
const sleep = (ms) => new Promise((r) => setTimeout(r, ms));

export default function Home() {
  const [prediction, setPrediction] = useState(null);
  const [error, setError] = useState(null);
  const promptInputRef = useRef(null);

  // Focus input field on component mount
  useEffect(() => {
    promptInputRef.current.focus();
  }, []);

  // Handle form submission for image prediction
  const handleSubmit = async (e) => {
    e.preventDefault();

    // Initialize a prediction request
    const response = await fetch("/api/predictions", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        prompt: e.target.prompt.value,
      }),
    });

    let prediction = await response.json();
    if (response.status !== 201) {
      setError(prediction.detail);
      return;
    }

    // Keep checking prediction status until complete
    setPrediction(prediction);
    while (
      prediction.status !== "succeeded" &&
      prediction.status !== "failed"
    ) {
      await sleep(1000);
      const response = await fetch(`/api/predictions/${prediction.id}`);
      prediction = await response.json();
      if (response.status !== 200) {
        setError(prediction.detail);
        return;
      }
      console.log({ prediction });
      setPrediction(prediction);
    }
  };

  // Generate a PDF from the prediction result
  const generatePdf = async () => {
    try {
      const response = await fetch("/api/pdf?url=" + prediction.output[prediction.output.length - 1]);
      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);
    }
  };

  return (
    <div className="container max-w-2xl mx-auto p-5">
      <h1 className="py-6 text-center font-bold text-2xl">
        IronPDF: An Awesome Library for PDFs
      </h1>
      <p>Enter prompt to generate an image, then click "Go" to generate:</p>
      <form className="w-full flex" onSubmit={handleSubmit}>
        <input
          type="text"
          className="flex-grow"
          name="prompt"
          placeholder="Enter a prompt to display an image"
          ref={promptInputRef}
        />
        <button className="button" type="submit">
          Go!
        </button>
        <button className="pdfButton" type="button" onClick={generatePdf}>
          Generate PDF
        </button>
      </form>

      {error && <div>{error}</div>}
      {prediction && (
        <>
          {prediction.output && (
            <div className="image-wrapper mt-5">
              <Image
                fill
                src={prediction.output[prediction.output.length - 1]}
                alt="output"
                sizes="100vw"
              />
            </div>
          )}
          <p className="py-3 text-sm opacity-50">status: {prediction.status}</p>
        </>
      )}
    </div>
  );
}

'use client';
import { useState, useEffect, useRef } from "react";
import Image from "next/image";

// Utility function to create a delay
const sleep = (ms) => new Promise((r) => setTimeout(r, ms));

export default function Home() {
  const [prediction, setPrediction] = useState(null);
  const [error, setError] = useState(null);
  const promptInputRef = useRef(null);

  // Focus input field on component mount
  useEffect(() => {
    promptInputRef.current.focus();
  }, []);

  // Handle form submission for image prediction
  const handleSubmit = async (e) => {
    e.preventDefault();

    // Initialize a prediction request
    const response = await fetch("/api/predictions", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        prompt: e.target.prompt.value,
      }),
    });

    let prediction = await response.json();
    if (response.status !== 201) {
      setError(prediction.detail);
      return;
    }

    // Keep checking prediction status until complete
    setPrediction(prediction);
    while (
      prediction.status !== "succeeded" &&
      prediction.status !== "failed"
    ) {
      await sleep(1000);
      const response = await fetch(`/api/predictions/${prediction.id}`);
      prediction = await response.json();
      if (response.status !== 200) {
        setError(prediction.detail);
        return;
      }
      console.log({ prediction });
      setPrediction(prediction);
    }
  };

  // Generate a PDF from the prediction result
  const generatePdf = async () => {
    try {
      const response = await fetch("/api/pdf?url=" + prediction.output[prediction.output.length - 1]);
      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);
    }
  };

  return (
    <div className="container max-w-2xl mx-auto p-5">
      <h1 className="py-6 text-center font-bold text-2xl">
        IronPDF: An Awesome Library for PDFs
      </h1>
      <p>Enter prompt to generate an image, then click "Go" to generate:</p>
      <form className="w-full flex" onSubmit={handleSubmit}>
        <input
          type="text"
          className="flex-grow"
          name="prompt"
          placeholder="Enter a prompt to display an image"
          ref={promptInputRef}
        />
        <button className="button" type="submit">
          Go!
        </button>
        <button className="pdfButton" type="button" onClick={generatePdf}>
          Generate PDF
        </button>
      </form>

      {error && <div>{error}</div>}
      {prediction && (
        <>
          {prediction.output && (
            <div className="image-wrapper mt-5">
              <Image
                fill
                src={prediction.output[prediction.output.length - 1]}
                alt="output"
                sizes="100vw"
              />
            </div>
          )}
          <p className="py-3 text-sm opacity-50">status: {prediction.status}</p>
        </>
      )}
    </div>
  );
}

JAVASCRIPT

Code-Erklärung

1. Importanweisungen

Der Code beginnt mit der Einbindung notwendiger Module aus externen Bibliotheken:

'useState', 'useEffect' und 'useRef' von "react": Dies sind React Hooks, die es Funktionskomponenten ermöglichen, den Zustand zu verwalten, Seiteneffekte zu behandeln und Referenzen auf DOM-Elemente zu erstellen.
'Image' from "next/image": Dies ist eine von Next.js bereitgestellte Komponente für optimiertes Laden von Bildern.
Die "use client" Anweisung stellt sicher, dass die Komponente, die sie verwendet, auf der Clientseite innerhalb einer Next.js-Anwendung gerendert wird.

2. Komponentenfunktion

Die Komponente Home ist als Standardexport definiert. Innerhalb der Komponente gibt es mehrere Zustandsvariablen (prediction, error), die mit Hilfe des Hooks useState verwaltet werden.

Eine Referenz (promptInputRef) wird mithilfe des Hooks useRef erstellt. Der Hook useEffect dient dazu, den Fokus auf promptInputRef zu richten, wenn die Komponente montiert wird.

Die Funktion handleSubmit ist eine asynchrone Funktion, die die Formularübermittlung verarbeitet. Es sendet eine POST-Anfrage an einen API-Endpunkt (/api/predictions) mit einem Prompt-Wert.

Die Antwort wird verarbeitet, und im Erfolgsfall wird der Status prediction aktualisiert. Die Funktion tritt dann in eine Schleife ein, die den Vorhersagestatus periodisch überprüft, bis er erfolgreich ist oder fehlschlägt.

Die Methode generatePdf ruft eine PDF-Datei von einem anderen API-Endpunkt (/api/pdf) ab, basierend auf der letzten Ausgabe im Zustand prediction.

3. HTML-Markup

Die Komponente gibt einen Container <div> mit Styling (max-w-2xl, mx-auto, p-5) zurück. Im Container befindet sich ein <h1>-Element mit dem Text "IronPDF: Eine großartige Bibliothek für PDFs".

Insgesamt scheint dieser Code Teil einer Next.js-Anwendung zu sein, die mit Vorhersagen arbeitet und PDFs basierend auf Benutzereingaben generiert. Die Anweisung 'use client' ist spezifisch für Next.js und stellt sicher, dass die Komponente, in der sie verwendet wird, clientseitig gerendert wird.

Ausgabe

replicate npm (So funktioniert es für Entwickler): Abbildung 1 – So sieht Ihre Next.js-Anwendung mit Replicate und IronPDF aus!

Geben Sie Text für die Vorhersage als "Auto" ein, dann wird das unten gezeigte Bild vorhergesagt:

replicate NPM (Wie es Entwicklern hilft): Abbildung 2 - Geben Sie Auto für die Vorhersage ein und klicken Sie auf Los. Ein Bild eines Autos würde mit Replicate vorhergesagt und erzeugt.

Klicken Sie dann auf "PDF generieren", um ein PDF-Dokument zu erstellen.

PDF-Ausgabe generiert mit IronPDF

replicate npm (So funktioniert es für Entwickler): Abbildung 3 – Als Nächstes können Sie auf die Schaltfläche

IronPDF-Lizenz

Besuchen Sie die IronPDF-Lizenzierungsseite für weitere Informationen.

Platzieren Sie den Lizenzschlüssel in Ihrer Anwendung, wie im folgenden Beispiel 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";

JAVASCRIPT

Abschluss

Das [**replicate**](https://www.npmjs.com/package/replicate) NPM-Paket bietet eine komfortable Möglichkeit, leistungsstarke Modelle des maschinellen Lernens in React-Anwendungen zu nutzen. Indem Sie die Schritte in diesem Artikel befolgen, können Sie Bildgenerierungsfähigkeiten leicht in Ihre Projekte integrieren. Dies eröffnet eine Vielzahl von Möglichkeiten zur Schaffung innovativer und interaktiver Benutzererfahrungen.

Vergessen Sie nicht, andere Modelle auf der Replicate-Plattform zu erkunden, um die Funktionalität Ihrer Anwendungen weiter zu erweitern.

Auch IronPDF ist eine leistungsstarke PDF-Bibliothek für PDF-Generierungs- und Manipulationsfunktionen sowie die Fähigkeit, responsive Diagramme sofort in PDFs zu rendern. Es ermöglicht Entwicklern, funktionsreiche Diagrammpakete mit nur wenigen Codezeilen in Anwendungen zu integrieren. Zusammen erlauben diese beiden Bibliotheken Entwicklern, mit moderner KI-Technologie zu arbeiten und die Ergebnisse zuverlässig in Form von PDFs zu speichern.

Darrius Serrant

Jetzt mit dem Ingenieurteam chatten

Full-Stack-Software-Ingenieur (WebOps)

Darrius Serrant hat einen Bachelor-Abschluss in Informatik von der University of Miami und arbeitet als Full-Stack-WebOps-Marketing-Ingenieur bei Iron Software. Seit seiner Jugend vom Programmieren angezogen, sah er die Informatik als sowohl mysteriös als auch zugänglich, was es zum perfekten Medium für Kreativität und Problemlösung ...

Kunden-Highlight:

Entwickler im Rampenlicht:

Webinare:

Starten Sie die kostenlose 30-Tage-Testversion

replicate npm (Wie es für Entwickler funktioniert)

Einführung in Replicate

Einstieg

Installation

API-Schlüssel

Grundlagen

1. Importieren Sie das Paket und initialisieren Sie den Client

2. Führen Sie eine Inferenz durch

Beispielanwendung

1. Ein neues React-Projekt einrichten:

2. Eine Komponente zur Bildgenerierung erstellen:

3. Verwenden Sie die Komponente in Ihrer Anwendung:

Fehler behandeln

Einführung in IronPDF

Hauptfunktionen von IronPDF

1. HTML-zu-PDF-Umwandlung

2. URL-zu-PDF-Umwandlung

3. PDF-Manipulation

4. PDF-Sicherheit

5. Hochwertige Ausgabe

6. Plattformübergreifende Kompatibilität

7. Einfache Integration

PDF-Dokument mit IronPDF generieren und Recharts NPM-Paket verwenden

Abhängigkeiten installieren

PDF-Generierungs-API

Fügen Sie den folgenden Code zu `index.js` hinzu.

Code-Erklärung

1. Importanweisungen

2. Komponentenfunktion

3. HTML-Markup

Ausgabe

PDF-Ausgabe generiert mit IronPDF

IronPDF-Lizenz

Abschluss

Iron Support Team

Starten Sie die kostenlose 30-Tage-Testversion

replicate npm (Wie es für Entwickler funktioniert)

Einführung in Replicate

Einstieg

Installation

API-Schlüssel

Grundlagen

1. Importieren Sie das Paket und initialisieren Sie den Client

2. Führen Sie eine Inferenz durch

Beispielanwendung

1. Ein neues React-Projekt einrichten:

2. Eine Komponente zur Bildgenerierung erstellen:

3. Verwenden Sie die Komponente in Ihrer Anwendung:

Fehler behandeln

Einführung in IronPDF

Hauptfunktionen von IronPDF

1. HTML-zu-PDF-Umwandlung

2. URL-zu-PDF-Umwandlung

3. PDF-Manipulation

4. PDF-Sicherheit

5. Hochwertige Ausgabe

6. Plattformübergreifende Kompatibilität

7. Einfache Integration

PDF-Dokument mit IronPDF generieren und Recharts NPM-Paket verwenden

Abhängigkeiten installieren

PDF-Generierungs-API

Fügen Sie den folgenden Code zu index.js hinzu.

Code-Erklärung

1. Importanweisungen

2. Komponentenfunktion

3. HTML-Markup

Ausgabe

PDF-Ausgabe generiert mit IronPDF

IronPDF-Lizenz

Abschluss

Verwandte Artikel

linkify-react (Wie es funktioniert: Ein Leitfaden für Entwickler)

next-auth NPM (Wie es für Entwickler funktioniert)

Koa node js (Wie es für Entwickler funktioniert)

Want to deploy IronSuite to a live project for FREE?

What’s included?

Thank You

Want to deploy IronSuite to a live project for FREE?

What’s included?

Von Millionen von Ingenieur*innen weltweit vertraut

Iron Support Team

Fügen Sie den folgenden Code zu `index.js` hinzu.