Componente React para editor de PDF
Procura um editor de PDF para React? A maioria das opções são visualizadores de baixo nível que exigem que construa a interface de edição por conta própria. O SimplePDF oferece um editor completo – texto, assinaturas, preenchimento de formulários, anotações – como um único componente React. Sem complicações com PDF.js, sem renderização de canvas, sem montagem de barras de ferramentas.
Instalar e usar
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>Controlo programático
Utilize o hook useEmbed() para controlar o editor a partir do seu código: submeter documentos, navegar páginas, selecionar ferramentas, detetar campos de formulário e extrair conteúdo.
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"
/>
</>
);
};O que os seus utilizadores podem fazer
Preencher formulários PDF
Deteta campos de formulário automaticamente. Os utilizadores preenchem campos de texto, caixas de seleção, listas pendentes e botões de opção nativamente.
Assinar documentos
Desenhar, digitar ou carregar uma assinatura. Funciona em computador e dispositivos móveis.
Adicionar texto e anotações
Texto livre, destaques, carimbos e imagens. Renderizados diretamente no PDF.
Enviar para o seu backend
Os PDFs concluídos são enviados por webhook para a sua API, ou armazenados no seu bucket S3/Azure.
Porquê SimplePDF em vez de PDF.js ou react-pdf?
Editor completo, não um visualizador
PDF.js e react-pdf são visualizadores. Para editar, precisa de construir campos de formulário, áreas de assinatura e camadas de anotação por conta própria. O SimplePDF inclui tudo isto.
Pronto para white-label
O seu logotipo, as suas cores, o seu domínio. Configure a imagem de marca a partir do seu painel e utilize o controlo programático para personalizar completamente a experiência de edição em white-label.
Sem servidor necessário
Tudo é executado no navegador. Sem carregamento de ficheiros para o seu servidor, sem backend de processamento de PDF para manter.
Produto com manutenção
Não precisa de manter o editor. Nós tratamos dos bugs de renderização, da compatibilidade com navegadores e dos casos limite da especificação 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.
Funciona com o seu stack
O componente React funciona com Next.js (App Router e Pages Router), Remix, Vite e Create React App. É renderizado como iframe, por isso não há conflitos de CSS nem preocupações com o tamanho do bundle.
Tem alguma pergunta?
Como obtenho o PDF preenchido de volta?
Configure um webhook para receber o PDF concluído no seu endpoint de API. Ou use bring-your-own-storage: S3, Azure Blob Storage ou SharePoint para recebê-lo diretamente no seu bucket.
O componente React é gratuito?
O componente é gratuito e de código aberto (MIT). O plano gratuito inclui edição completa com branding SimplePDF. Os planos pagos removem o branding e adicionam webhooks, BYOS e white-label.
Funciona com Next.js?
Sim. O componente funciona tanto com o App Router como com o Pages Router. É renderizado como iframe, por isso não há problemas de hidratação SSR.
Posso carregar qualquer PDF?
Sim. Passe uma documentURL ou permita que os utilizadores carreguem a partir do seu dispositivo. O PDF é processado inteiramente no navegador – nunca toca no seu servidor nem no nosso.
Que ações programáticas estão disponíveis?
O hook useEmbed() oferece: submit(), goTo({ page }), selectTool(), detectFields(), removeFields() e getDocumentContent(). Todos retornam uma Promise com um resultado tipado.