React PDF-Editor-Komponente
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.
Installation und Verwendung
npm install @simplepdf/react-embed-pdfimport { 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"
/>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.
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.
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.
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.