React PDF-editorcomponent
Op zoek naar een React PDF-editor? De meeste opties zijn low-level viewers waarbij u de bewerkingsinterface zelf moet bouwen. SimplePDF biedt u een volledige editor – tekst, handtekeningen, formulieren invullen, annotaties – als een enkel React-component. Geen geworsteld met PDF.js, geen canvas-rendering, geen werkbalk samenstellen.
Installeren en gebruiken
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 besturing
Gebruik de useEmbed()-hook om de editor vanuit uw code te besturen: documenten verzenden, pagina's navigeren, gereedschappen selecteren, formuliervelden detecteren en inhoud extraheren.
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"
/>
</>
);
};Wat uw gebruikers kunnen doen
PDF-formulieren invullen
Detecteert formuliervelden automatisch. Gebruikers vullen tekstvelden, selectievakjes, vervolgkeuzelijsten en keuzerondjes native in.
Documenten ondertekenen
Teken, typ of upload een handtekening. Werkt op desktop en mobiel.
Tekst en annotaties toevoegen
Vrije tekst, markeringen, stempels en afbeeldingen. Wordt direct op de PDF gerenderd.
Naar uw backend verzenden
Voltooide PDF's worden via webhook naar uw API gestuurd, of opgeslagen in uw S3/Azure-bucket.
Waarom SimplePDF in plaats van PDF.js of react-pdf?
Volledige editor, geen viewer
PDF.js en react-pdf zijn viewers. Om te bewerken moet u formulierinvoer, handtekeningvelden en annotatielagen zelf bouwen. SimplePDF bevat dit allemaal.
Klaar voor white-label
Uw logo, uw kleuren, uw domein. Configureer de huisstijl vanuit uw dashboard en gebruik programmatische besturing om de bewerkingservaring volledig in white-label aan te bieden.
Geen server nodig
Alles draait in de browser. Geen bestandsuploads naar uw server, geen PDF-verwerkingsbackend om te onderhouden.
Onderhouden product
U onderhoudt de editor niet. Wij behandelen renderingbugs, browsercompatibiliteit en edge cases van de PDF-specificatie.
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.
Werkt met uw stack
Het React-component werkt met Next.js (App Router en Pages Router), Remix, Vite en Create React App. Het wordt als iframe gerenderd, dus er zijn geen CSS-conflicten of zorgen over bundelgrootte.
Heeft u vragen?
Hoe krijg ik de ingevulde PDF terug?
Configureer een webhook om de voltooide PDF op uw API-endpoint te ontvangen. Of gebruik bring-your-own-storage: S3, Azure Blob Storage of SharePoint om het direct in uw bucket te ontvangen.
Is het React-component gratis?
Het component is gratis en open source (MIT). Het gratis niveau biedt volledige bewerking met SimplePDF-branding. Betaalde plannen verwijderen de branding en voegen webhooks, BYOS en white-label toe.
Werkt het met Next.js?
Ja. Het component werkt met zowel de App Router als de Pages Router. Het wordt als iframe gerenderd, dus er zijn geen SSR-hydratatieproblemen.
Kan ik elke PDF laden?
Ja. Geef een documentURL door of laat gebruikers uploaden vanaf hun apparaat. De PDF wordt volledig in de browser verwerkt – het raakt noch uw server noch de onze.
Welke programmatische acties zijn beschikbaar?
De useEmbed()-hook biedt u: submit(), goTo({ page }), selectTool(), detectFields(), removeFields() en getDocumentContent(). Alle retourneren een Promise met een getypeerd resultaat.