Por que ler PDFs se você não pode escrever neles?
Olá a todos! Eu sou o Albert, e adoro tornar as ferramentas mais convenientes e fáceis de usar.
Se você já tentou aprender sozinho, estudar livros de programação ou ler documentos técnicos complexos em PDF no seu notebook, conhece essa dificuldade. Você abre um livro, quer destacar um trecho de código, desenhar uma seta ao lado de uma explicação ou deixar uma nota de margem — e percebe que os visualizadores de PDF clássicos são pesados, pagos ou perdem todos os seus desenhos ao atualizar a página.
Quis resolver isso e criei o PDF Ink — um aplicativo web leve e rápido para ler e anotar livros em PDF de forma interativa diretamente no seu navegador.
A Ideia e a Stack Tecnológica
O principal objetivo era construir uma ferramenta que:
- Iniciasse em um clique em qualquer navegador moderno.
- Permitisse carregar qualquer livro em PDF local.
- Permitisse desenhar usando o mouse, caneta ou toque, e adicionar notas de texto.
- O mais importante: Salvasse sua página atual, nível de zoom, biblioteca e notas de desenho localmente de forma segura para retomar os estudos a qualquer momento.
Para a implementação, selecionei: React + TypeScript + Vite + TailwindCSS.
Para renderização de PDF, integrei a biblioteca pdfjs-dist (PDF.js) da Mozilla.
Arquitetura de Canvas com Camada Dupla
Para garantir que o aplicativo continue responsivo durante os desenhos, dividi a área de trabalho em duas camadas independentes:
- Camada PDF : Um
<canvas>de fundo estático que renderiza a imagem do PDF conforme o zoom. - Camada de Anotação : Um
<canvas>transparente sobreposto que captura os eventos do ponteiro, desenha os traços e exibe as notas de texto.
Esse método torna o desenho super rápido: quando você desenha uma linha, o aplicativo redesenha apenas a leve camada vector, deixando intacta a pesada imagem do PDF.
Evolução do Banco de Dados: Passando para o IndexedDB v2
A versão inicial salvava o arquivo PDF e todos os desenhos como um único objeto no IndexedDB. Com manuais pesados, gravar 20 MB no disco a cada 250 ms causava lentidão na interface.
Reescrevi o gerenciador do IndexedDB para separar os arquivos das anotações:
- Armazém
pdfs: Armazena o arquivo binário bruto (ArrayBuffer) apenas uma vez no primeiro import. - Armazém
pdfs_metadata: Armazena coordenadas, páginas e notas leves em JSON.
Agora, ao desenhar, apenas os metadados são salvos. A gravação leva uma fração de milissegundo, eliminando qualquer lentidão!
Teste agora mesmo!
Você pode testar a versão online aqui:
👉 Practice Book PDF APP Live App
Bons estudos, e escreva códigos que facilitem a vida!