Componente React per editor PDF
Cerchi un editor PDF per React? La maggior parte delle opzioni sono visualizzatori di basso livello che richiedono di costruire l'interfaccia di modifica da soli. SimplePDF ti offre un editor completo – testo, firme, compilazione moduli, annotazioni – come un unico componente React. Niente lotte con PDF.js, niente rendering canvas, niente assemblaggio della barra degli strumenti.
Installa e usa
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>Controllo programmatico
Usa l'hook useEmbed() per controllare l'editor dal tuo codice: inviare documenti, navigare tra le pagine, selezionare strumenti, rilevare campi di moduli ed estrarre contenuti.
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"
/>
</>
);
};Cosa possono fare i tuoi utenti
Compilare moduli PDF
Rileva automaticamente i campi del modulo. Gli utenti compilano campi di testo, caselle di controllo, menu a tendina e pulsanti di opzione in modo nativo.
Firmare documenti
Disegnare, digitare o caricare una firma. Funziona su desktop e dispositivi mobili.
Aggiungere testo e annotazioni
Testo libero, evidenziazioni, timbri e immagini. Renderizzati direttamente sul PDF.
Inviare al tuo backend
I PDF completati vengono inviati tramite webhook alla tua API, oppure archiviati nel tuo bucket S3/Azure.
Perché SimplePDF invece di PDF.js o react-pdf?
Editor completo, non un visualizzatore
PDF.js e react-pdf sono visualizzatori. Per modificare, devi costruire campi di input, aree firma e livelli di annotazione da solo. SimplePDF include tutto questo.
Pronto per il white-label
Il tuo logo, i tuoi colori, il tuo dominio. Configura il branding dalla tua dashboard e usa il controllo programmatico per personalizzare completamente l'esperienza di modifica in white-label.
Nessun server richiesto
Tutto viene eseguito nel browser. Nessun caricamento di file sul tuo server, nessun backend di elaborazione PDF da mantenere.
Prodotto mantenuto
Non mantieni tu l'editor. Noi ci occupiamo dei bug di rendering, della compatibilità con i browser e dei casi limite delle specifiche 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.
Funziona con il tuo stack
Il componente React funziona con Next.js (App Router e Pages Router), Remix, Vite e Create React App. Viene renderizzato come iframe, quindi non ci sono conflitti CSS né preoccupazioni per la dimensione del bundle.
Hai domande?
Come ottengo il PDF compilato?
Configura un webhook per ricevere il PDF completato al tuo endpoint API. Oppure usa il bring-your-own-storage: S3, Azure Blob Storage o SharePoint per riceverlo direttamente nel tuo bucket.
Il componente React è gratuito?
Il componente è gratuito e open source (MIT). Il livello gratuito include la modifica completa con il branding SimplePDF. I piani a pagamento rimuovono il branding e aggiungono webhook, BYOS e white-label.
Funziona con Next.js?
Sì. Il componente funziona sia con l'App Router che con il Pages Router. Viene renderizzato come iframe, quindi non ci sono problemi di idratazione SSR.
Posso caricare qualsiasi PDF?
Sì. Passa una documentURL o lascia che gli utenti carichino dal loro dispositivo. Il PDF viene elaborato interamente nel browser – non tocca né il tuo server né il nostro.
Quali azioni programmatiche sono disponibili?
L'hook useEmbed() ti offre: submit(), goTo({ page }), selectTool(), detectFields(), removeFields() e getDocumentContent(). Tutte restituiscono una Promise con un risultato tipizzato.