Como criar PDF com HTML

André Chaves
Code Maestro
Published in
4 min readApr 20, 2018

Nos dias de hoje é muito comum (principalmente pros front-enders e designers) a galera criar sites pra serem seus portifólios. O problema é que, muitas vagas de emprego não pedem um site mas sim um PDF!

Nesse post, vamos usar o Symfony 4 para criar um PDF a partir de um site! Dando uma aprofundada em como converter HTML pra PDF =)

Mãos na massa

Se queremos converter portifólios (HTML) em PDF, precisamos primeiro de um portifólio, certo?

No nosso caso vamos usar o portifólio do Will Cega, um designer da Hefesto de perfil bem criativo =)

Portifólio

Beleza, mas e o PDF?

A gente só precisa instalar o Snappy Bundle da KNP, uma ferramenta que encapsula o comando de terminal wkhtmltopdf para PHP!

O lado bom é que ela integra bem com o Symfony então pra gente basta instalar o comando wkhtmltopdf, executando simplesmente:

sudo apt-get update
sudo apt-get install xvfb libfontconfig wkhtmltopdf

E pedir o snappy pro composer:

composer require knplabs/knp-snappy-bundle

comando composer require knplabs/knp-snappy-bundle

Ajustes de compatibilidade

Além disso, como esse é um bundle mais antigo do Symfony, ele ainda não integra muito bem com o flex que veio na última versão.

Por isso, vamos precisar fazer o processo de carregamento dele, que antes era feito no arquivo AppKernel.php e na versão atual do framework é feito no arquivo bundles.php, adicionando a classe do bundle à lista:

adição da classe do bundle à lista de bundles

Transformando URLs em PDF

Perfeito, com isso a gente já pode usar o Snappy através da classe PDF por injeção de dependência:

alguns métodos disponveis da classe PDF

Aqui a gente ja pode ver que temos algumas opções para pegar informações. Os métodos getOutPut e getOutputFromHtml são nossas ferramentas.

O método getOutPut, como o nome já diz, nos traz uma saída a partir de uma URL!

Então no nosso caso, com a URL do portifólio, podemos simplesmente fazer a chamada:

Recebendo HTML através da URL

E, assim, já recebemos o HTML dessa URL e convertemos para um pdf guardado na variável resultado.

Para visualizar melhor, seria legal vermos esse PDF na url /portifolio do sistema. Pra isso, podemos especificar os dados no cabeçalho da nossa resposta, indicando que estamos enviando um PDF:

Retornando o PDF

Com isso, ao acessar a url, temos:

PDF

Um PDF perfeitamente navegável! Mantendo a estrutura e as funcionalidades do HTML do site, o que já nos permite fazer muita coisa. Inclusive, download, impressão, rotação, zoom in e zoom out do arquivo =)

Transformando qualquer HTML em PDF

Mas, nem sempre temos o conteúdo que queremos de pé em um servidor como o Will.

Muitas vezes precisamos converter um HTML texto ou até mesmo criar um template nosso e transformá-lo em PDF.

Para isso, podemos usar o método getOutputFromHtml, com o conteúdo que a gente quiser:

rederizando PDF por HTML em texto

E, acessando a URL, temos o resultado em PDF:

PDF renderizado pelo HTML

Indo além com TWIG

Claro que nosso exemplo foi um HTML bem simples. Mas, o poder do método getOutputFromHtml pode ir muito além de um HTML simples.

Sabendo que o método recebe uma string, podemos utilizar qualquer ferramenta de templates de HTML para construir os PDFs mais complexos.

No nosso caso, podemos utilizar do próprio TWIG para criar templates de qualquer coisa como: contratos com nome do cliente dinâmico, certificados com nome do aluno dinâmico, relatórios com a estrutura de alguma tabela e tudo que sua criatividade for capaz de pensar =)

Mas, como ficaria?

No nosso caso é bem simples, a classe Controller tem disponível o TWIG no método no famoso método render.

Logo, bastaria passar o template de qualquer Twig para o método getOutputFromHtml:

Renderizando pelo twig

Informando tudo que esse Twig precisar de dados dinâmicos.

A parte legal é que aqui se aplica toda regra de desacoplamento de front-end que costumamos comentar aqui no blog. Inclusive para herança de templates, blocos e tudo mais.

O único ponto a se levar em consideração nesse processo todo do TWIG é que o Snappy não consegue importar arquivos externos ao HTML.

Ou seja, é legal ao desenvolver os TWIGs que vão virar PDFs com blocos de CSS e JS bem separados pois todo o código precisará estar diretamente na página final sem tags link ou script =)

E ai, o que você achou de criar PDFs dinâmicos com HTML? Conhece algum outro jeito? Compartilha aqui com a gente nos comentários!

--

--

André Chaves
Code Maestro

Empreendedor, CTO, desenvolvedor e apaixonado por automação.