MPDF background-image e fonte

Se você usa o mpdf para gerar seus relatórios ou arquivos em PDF e deseja colocar uma imagem de fundo para gerar um papel timbrado personalizado, uma marca d’água ou qualquer outra coisa, com uma imagem de alta definição para impressão, basta você acrescentar isto na tag body do seu css:

body{font-family:Arial;background:url(/img/back/pagina_pdf-18px-A4.jpg) no-repeat;
background-image-resolution:300dpi;background-image-resize:6;}

Lembrando que você deve chamar seu css no PDF desta forma:

$css = file_get_contents('css/style_pdf.css');
$mpdf->WriteHTML($css,1);

O background-image-resolution indica a qualidade na hora da impressão e o background-image-resize, no valor 6, indica que independente do tamanho da imagem, ele redimensionará em largura e altura para caber na página do pdf…Perfect!

Existe também outra forma sem precisar declarar no css, que é declarando no próprio corpo do html a imagem. No caso abaixo a imagem vai sobrescrever toda a página, se vc quer que ele fique por trás, coloque um z-index:0:

<div style=”position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 0;”><img style=”width: 210mm; height: 297mm; margin: 0;” alt=”” src=”files/images/frontcover.jpg” /></div>

(Dica: Sempre leia a documentação…rs)

Se você também pretende personalizar com fontes diferentes, você precisar carregar suas fontes Truetype (.ttf) na pasta /ttfonts, em seguida configure o arquivo config_fonts.php desta forma, no array the array $this->fontdata{:

/* Arial */
"arial" => array(
'R' => "arial.ttf",
'I' => "ariali.ttf",
),

Lembrando que o nome da fonte, na configuração do mpdf, precisa ser minuscula e sem espaços.

Pronto, assim você chamar a sua fonte preferida, tanto no CSS inline, como no CSS externo do seu PDF no definir a fonte em todo o arquivo na tag body do CSS externo ou desta forma:

$mpdf->SetFont('Arial');

Espero ter ajudado… =]

Fonte: http://mpdf1.com/manual/index.php?tid=245&searchstring=background%20image

2 Comments

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s