-2

Boas, Estou tentando converter uma pagina html para pdf utilizando html2pdf, mas ao que parece o background-size:cover nao esta funcionando.

Na minha pagina web a minha imagem fica assim:

inserir a descrição da imagem aqui

Ao converter para PDF a imagem perde as formaçoes css e fica assim:

inserir a descrição da imagem aqui

Meu código e o seguinte <div class="imagem" style="background-image: url(ficheiros/foto.png); background-position: center; background-size:cover; backgroud-repeat: no-repeat;"></div>

Alguem sabe alguma forma de eu conseguir que a imagem no pdf preencha a div na totalidade sem repetição?

4
  • dua div utiliza uma classe imagem, mostra pra mim o que tem nessa classe 2/07/2019 às 10:54
  • 1
    Poste o link da lib que vc está usando, qual é esse html2pdf que vc usa, tem o link do projeto dele?
    – hugocsl
    2/07/2019 às 11:57
  • 1
    No exemplo que postou o background está escrito de forma incorreta - backgroud-repeat: no-repeat;. O seu código está assim também? 2/07/2019 às 13:43
  • .imagem{border: 7px solid #e0e0e0; border-top-left-radius: 50px; border-bottom-right-radius: 50px; height:340px; width:265px; overflow:hidden;}
    – Ricardo
    3/07/2019 às 14:25

1 Resposta 1

2
+25

Edição em 4/7/19. A implementação https://github.com/spipu/html2pdf, de fato, praticamente ignora a propriedade background-size, e esse não é o primeiro problema deles com CSS. Você pode contribuir no projeto, melhorando-o ou apenas informando o problema, ou pode apenas ajustar as dimensões da imagem manualmente de modo que fique satisfatória no PDF. Ou, além disso, pode seguir a sugestão abaixo.

Existem várias implementações de html2pdf. Eu sugiro a você o wkhtmltopdf. Ele é bastante poderoso para reproduzir HTML's não triviais em PDF, por usar o motor do Qt WebKit.

Por exemplo, você não expos o que tem na sua classe CSS imagem (class="imagem"), mas para preencher uma <div> com uma imagem, com as dimensões, seria algo mais ou menos assim (testado no Chrome, Firefox e Safari):

#com_imagem_de_fundo {
  height: 256px;
  width: 512px;
  
  background-image: url(https://ichef.bbci.co.uk/news/660/cpsprodpb/0288/production/_105284600_44935b21-9f20-4727-a2c0-84bef85a4548.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
<div id="com_imagem_de_fundo"></div>

Assumindo que os trechos acima estão dispostos adequadamente num arquivo pagina.html, gere o pagina.pdf pela linha de comando:

$ wkhtmltopdf pagina.html pagina.pdf

Ou, no PHP, usando o phpwkhtmltopdf:

<?php
require __DIR__.'/vendor/autoload.php';
use mikehaertl\wkhtmlto\Pdf;

$pdf = new Pdf('pagina.html');
if (!$pdf->saveAs('pagina.pdf')) {
  $erro = $pdf->getError();
  // ... lide com o erro
}
?>

Rode composer require mikehaertl/phpwkhtmltopdf no diretório de pagina.html, para testar. Observo que o comando wkhtmltopdf deve estar já funcionando no sistema (phpwkhtmltopdf é um pequeno wrapper).

3
  • Mas o wkhtmltopdf não tenho que instalar algo no servidor? As vezes não temos acesso ao servidor por isto ele é um pouco mais complicado utilizar.
    – Tiedt Tech
    3/07/2019 às 12:14
  • Sim, ele deve ser instalado no sistema. Apesar disso, é uma boa alternativa. ;)
    – jcbrtl
    3/07/2019 às 15:09
  • 1
    @TiedtTech, veja github.com/dompdf/dompdf , como outra alternativa. Mas já observo que este está em conformidade com CSS 2.1, no qual ainda não está definida a propriedade background-size; além disso, no dompdf a propriedade float está em desenvolvimento
    – jcbrtl
    16/07/2019 às 10:51

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .