Composant React pour éditeur PDF
Vous cherchez un éditeur PDF pour React ? La plupart des options sont des visionneuses bas niveau qui nécessitent de construire l'interface d'édition vous-même. SimplePDF vous offre un éditeur complet – texte, signatures, remplissage de formulaires, annotations – sous forme d'un seul composant React. Pas de bidouillage avec PDF.js, pas de rendu canvas, pas d'assemblage de barre d'outils.
Installer et utiliser
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>Contrôle programmatique
Utilisez le hook useEmbed() pour contrôler l'éditeur depuis votre code : soumettre des documents, naviguer entre les pages, sélectionner des outils, détecter les champs de formulaire et extraire le contenu.
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"
/>
</>
);
};Ce que vos utilisateurs peuvent faire
Remplir des formulaires PDF
Détecte automatiquement les champs de formulaire. Les utilisateurs remplissent les champs de texte, cases à cocher, listes déroulantes et boutons radio nativement.
Signer des documents
Dessiner, taper ou téléverser une signature. Fonctionne sur ordinateur et mobile.
Ajouter du texte et des annotations
Texte libre, surlignages, tampons et images. Rendu directement sur le PDF.
Envoyer à votre backend
Les PDF complétés sont envoyés par webhook à votre API, ou stockés dans votre bucket S3/Azure.
Pourquoi SimplePDF plutôt que PDF.js ou react-pdf ?
Éditeur complet, pas une visionneuse
PDF.js et react-pdf sont des visionneuses. Pour éditer, vous devez construire les champs de formulaire, les zones de signature et les couches d'annotation vous-même. SimplePDF inclut tout cela.
Prêt pour la marque blanche
Votre logo, vos couleurs, votre domaine. Configurez l'image de marque depuis votre tableau de bord et utilisez le contrôle programmatique pour personnaliser entièrement l'expérience d'édition en marque blanche.
Aucun serveur requis
Tout s'exécute dans le navigateur. Pas de téléversement de fichiers vers votre serveur, pas de backend de traitement PDF à maintenir.
Produit maintenu
Vous ne maintenez pas l'éditeur. Nous gérons les bugs de rendu, la compatibilité navigateur et les cas limites de la spécification PDF.
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.
Fonctionne avec votre stack
Le composant React fonctionne avec Next.js (App Router et Pages Router), Remix, Vite et Create React App. Il est rendu sous forme d'iframe, donc pas de conflits CSS ni de problèmes de taille de bundle.
Vous avez des questions ?
Comment récupérer le PDF rempli ?
Configurez un webhook pour recevoir le PDF complété sur votre endpoint API. Ou utilisez le stockage propre : S3, Azure Blob Storage ou SharePoint pour le recevoir directement dans votre bucket.
Le composant React est-il gratuit ?
Le composant est gratuit et open source (MIT). Le niveau gratuit inclut l'édition complète avec le branding SimplePDF. Les plans payants suppriment le branding et ajoutent les webhooks, BYOS et la marque blanche.
Est-ce que ça fonctionne avec Next.js ?
Oui. Le composant fonctionne avec l'App Router et le Pages Router. Il est rendu sous forme d'iframe, donc pas de problèmes d'hydratation SSR.
Puis-je charger n'importe quel PDF ?
Oui. Passez une documentURL ou laissez les utilisateurs téléverser depuis leur appareil. Le PDF est traité entièrement dans le navigateur – il ne touche ni votre serveur ni le nôtre.
Quelles actions programmatiques sont disponibles ?
Le hook useEmbed() vous donne : submit(), goTo({ page }), selectTool(), detectFields(), removeFields() et getDocumentContent(). Toutes renvoient une Promise avec un résultat typé.