Aplicação web para criação de documentos profissionais diretamente no navegador, com formulário completo, pré-visualização A4 em tempo real, modelos personalizáveis e geração de arquivos PDF.
O projeto foi desenvolvido com foco em simplicidade, produtividade, responsividade e experiência do usuário, utilizando HTML, CSS e JavaScript puro.
Interface principal do PDF Generator, reunindo formulário, configurações e pré-visualização do documento em tempo real.
Visualização do documento preenchido antes da geração do arquivo PDF.
Você pode utilizar o PDF Generator diretamente pelo GitHub Pages:
Caso o repositório utilize outro nome no GitHub, ajuste a URL do GitHub Pages de acordo com o nome utilizado.
- 📝 Formulário completo para criação de documentos
- 👁️ Pré-visualização em tempo real no formato A4
- 🎨 Três modelos prontos: moderno, clássico e minimalista
- 🖌️ Personalização de cor, fonte e tamanho do texto
- ✍️ Assinatura personalizada no documento
- 📄 Geração de documentos em PDF
- ⬇️ Download do PDF diretamente pelo navegador
- ✅ Validação dos campos obrigatórios
- 🔢 Contadores de caracteres
- 💾 Salvamento automático do rascunho no LocalStorage
- 🔄 Restauração automática do último rascunho
- 🗑️ Limpeza do formulário com confirmação
- 🔍 Controle de zoom da pré-visualização
- 🔔 Mensagens de sucesso e erro
- 🌙 Modo claro e escuro
- 💻 Interface responsiva para desktop, tablet e celular
- ⌨️ Atalho
Ctrl + Spara salvar o rascunho
| Tecnologia | Utilização |
|---|---|
| HTML5 | Estrutura e semântica da aplicação |
| CSS3 | Interface, responsividade e temas |
| JavaScript ES6+ | Lógica e interatividade |
| LocalStorage | Persistência de rascunhos e preferências |
| html2pdf.js | Geração e download dos documentos em PDF |
A biblioteca html2pdf.js é utilizada exclusivamente para transformar a pré-visualização do documento em um arquivo PDF baixável.
pdf-generator/
│
├── index.html
├── README.md
│
├── assets/
│ ├── css/
│ │ └── style.css
│ │
│ └── js/
│ └── app.js
│
└── images/
├── pdf-generator-home.png
└── pdf-generator-preview.png
- Clone este repositório:
git clone https://github.com/marcelogomesdev/pdf-generator.git- Acesse a pasta do projeto:
cd pdf-generator-
Abra a pasta no Visual Studio Code.
-
Execute o
index.htmlutilizando a extensão Live Server ou abra o arquivo diretamente no navegador.
É necessário manter conexão com a internet para carregar recursos externos utilizados pelo projeto, como a biblioteca responsável pela geração do PDF.
O PDF Generator utiliza o LocalStorage do navegador para armazenar localmente:
- rascunho do documento;
- configurações selecionadas;
- preferências da interface;
- tema claro ou escuro.
Dessa forma, o usuário pode fechar ou atualizar a página sem perder automaticamente o conteúdo salvo.
O projeto funciona diretamente no navegador e não possui backend próprio.
As informações inseridas no formulário permanecem armazenadas localmente no dispositivo do usuário e não são enviadas para um servidor da aplicação.
Isso torna o projeto adequado para demonstrações, estudos e criação rápida de documentos sem necessidade de cadastro.
Para publicar sua própria versão:
- Envie os arquivos para um repositório no GitHub.
- Acesse Settings.
- Entre em Pages.
- Em Build and deployment, selecione Deploy from a branch.
- Selecione a branch
main. - Escolha a pasta
/ (root). - Clique em Save.
- Aguarde a publicação.
O GitHub disponibilizará uma URL semelhante a:
https://seu-usuario.github.io/pdf-generator/
O PDF Generator foi desenvolvido como projeto de portfólio para aplicar conceitos de desenvolvimento Front-end em uma aplicação funcional, explorando:
- manipulação do DOM;
- validação de formulários;
- atualização de interface em tempo real;
- persistência de dados no navegador;
- geração de arquivos;
- responsividade;
- temas claro e escuro;
- experiência do usuário;
- organização e manutenção de código JavaScript.
Este projeto está disponível para fins de estudo e portfólio.
Para definir permissões específicas de cópia, modificação e distribuição, consulte o arquivo de licença do repositório.
Desenvolvido por Marcelo Gomes dev