React PDF-Editor-Komponente

Integrieren Sie PDF-Bearbeitung in Ihre React-App mit einer einzigen Komponente. Ihre Benutzer füllen aus, unterschreiben und senden PDFs, ohne Ihre App zu verlassen.

Auf der Suche nach einem React PDF-Editor? Die meisten Optionen sind Low-Level-Viewer, bei denen Sie die Bearbeitungsoberfläche selbst erstellen müssen. SimplePDF bietet Ihnen einen vollständigen Editor – Text, Unterschriften, Formularausfüllung, Annotationen – als einzelne React-Komponente. Kein PDF.js-Aufwand, kein Canvas-Rendering, kein Toolbar-Zusammenbau.

View on GitHub

Installation und Verwendung

Installieren

npm install @simplepdf/react-embed-pdf

Inline-Modus

Ideal, wenn der Editor der primäre Inhalt der Seite oder des Abschnitts ist

import { EmbedPDF } from '@simplepdf/react-embed-pdf';

<EmbedPDF
  companyIdentifier="yourcompany"
  mode="inline"
  style={{ width: 900, height: 800 }}
  documentURL="https://cdn.simplepdf.com/simple-pdf/assets/forms/fw4.pdf"
/>

Modal-Modus

Ideal, wenn der Editor eine Aktion ist und nicht der Hauptinhalt

import { EmbedPDF } from '@simplepdf/react-embed-pdf';

<EmbedPDF companyIdentifier="yourcompany">
  <a href="https://cdn.simplepdf.com/simple-pdf/assets/forms/fw4.pdf">
    Open PDF editor
  </a>
</EmbedPDF>

Programmatische Steuerung

Verwenden Sie den useEmbed()-Hook, um den Editor aus Ihrem Code zu steuern: Dokumente absenden, Seiten navigieren, Werkzeuge auswählen, Formularfelder erkennen und Inhalte extrahieren.

useEmbed() hook

import { EmbedPDF, useEmbed } from '@simplepdf/react-embed-pdf';

const Editor = () => {
  const { embedRef, actions } = useEmbed();

  return (
    <>
      <button onClick={() => actions.submit({
        downloadCopyOnDevice: false
      })}>
        Submit
      </button>
      <button onClick={() => actions.selectTool('SIGNATURE')}>
        Sign
      </button>
      <button onClick={() => actions.detectFields()}>
        Detect Fields
      </button>
      <EmbedPDF
        companyIdentifier="yourcompany"
        ref={embedRef}
        mode="inline"
        style={{ width: 900, height: 800 }}
        documentURL="https://cdn.simplepdf.com/simple-pdf/assets/forms/fw4.pdf"
      />
    </>
  );
};

Was Ihre Benutzer tun können

PDF-Formulare ausfüllen

Erkennt Formularfelder automatisch. Benutzer füllen Texteingaben, Kontrollkästchen, Dropdown-Listen und Optionsfelder nativ aus.

Dokumente unterschreiben

Zeichnen, tippen oder laden Sie eine Unterschrift hoch. Funktioniert auf Desktop und Mobilgeräten.

Text und Annotationen hinzufügen

Freitext, Hervorhebungen, Stempel und Bilder. Wird direkt im PDF gerendert.

An Ihr Backend senden

Fertige PDFs werden per Webhook an Ihre API gesendet oder in Ihrem S3/Azure-Bucket gespeichert.

Warum SimplePDF statt PDF.js oder react-pdf?

Vollständiger Editor, kein Viewer

PDF.js und react-pdf sind Viewer. Um zu bearbeiten, müssen Sie Formulareingaben, Unterschriftenfelder und Annotationsebenen selbst erstellen. SimplePDF enthält all das.

White-Label-fähig

Ihr Logo, Ihre Farben, Ihre Domain. Branding konfigurieren Sie über Ihr Dashboard und nutzen Sie die programmatische Steuerung, um das Bearbeitungserlebnis vollständig im White-Label anzubieten.

Kein Server erforderlich

Alles läuft im Browser. Keine Datei-Uploads auf Ihren Server, kein PDF-Verarbeitungs-Backend zu warten.

Gepflegtes Produkt

Sie pflegen den Editor nicht. Wir kümmern uns um Rendering-Bugs, Browser-Kompatibilität und PDF-Spezifikations-Sonderfälle.

Healthcare · HIPAA-compliant workflows

SimplePDF is a great tool that was very easy to implement into our web portal. They have straight forward and clear documentation on setting it up and then plenty of resources on how to utilize it even further to fit your development environment.

Tyler HarrisonSoftware Developer, Centralis Health

Funktioniert mit Ihrem Stack

Die React-Komponente funktioniert mit Next.js (App Router und Pages Router), Remix, Vite und Create React App. Sie wird als iframe gerendert, sodass es keine CSS-Konflikte oder Bundle-Größen-Bedenken gibt.

Haben Sie Fragen?

Wie erhalte ich das ausgefüllte PDF zurück?

Konfigurieren Sie einen Webhook, um das fertige PDF an Ihren API-Endpunkt zu erhalten. Oder nutzen Sie Bring-Your-Own-Storage: S3, Azure Blob Storage oder SharePoint, um es direkt in Ihren Bucket zu liefern.

Ist die React-Komponente kostenlos?

Die Komponente ist kostenlos und Open Source (MIT). Die kostenlose Stufe umfasst vollständige Bearbeitung mit SimplePDF-Branding. Bezahlpläne entfernen das Branding und bieten Webhooks, BYOS und White-Label.

Funktioniert es mit Next.js?

Ja. Die Komponente funktioniert sowohl mit dem App Router als auch mit dem Pages Router. Sie wird als iframe gerendert, sodass es keine SSR-Hydration-Probleme gibt.

Kann ich jedes PDF laden?

Ja. Übergeben Sie eine documentURL oder lassen Sie Benutzer von ihrem Gerät hochladen. Das PDF wird vollständig im Browser verarbeitet – es berührt weder Ihren Server noch unseren.

Welche programmatischen Aktionen sind verfügbar?

Der useEmbed()-Hook bietet Ihnen: submit(), goTo({ page }), selectTool(), detectFields(), removeFields() und getDocumentContent(). Alle geben ein Promise mit einem typisierten Ergebnis zurück.

Integrationen

Jetzt ausprobieren

Installieren Sie die React-Komponente und sehen Sie sie in weniger als 5 Minuten in Aktion.

Editor ausprobieren Preise ansehen