Exporting html to PDF with html2pdf background-size does not work

Asked

Viewed 400 times

-2

Boas, I am trying to convert an html page to pdf using html2pdf, but it seems the background-size:cover is not working.

On my web page my image looks like this:

inserir a descrição da imagem aqui

When converting to PDF the image loses the css formations and stays like this:

inserir a descrição da imagem aqui

My code and the following <div class="imagem" style="background-image: url(ficheiros/foto.png); background-position: center; background-size:cover; backgroud-repeat: no-repeat;"></div>

Does anyone know any way I can get the image in the pdf to fill the entire div without repetition?

  • dua div uses an image class, shows me what’s in this class

  • 1

    Post the link of the lib you are using, which is this html2pdf you use, has the link of his project?

  • 1

    In the example that posted the background is misspelled - backgroud-repeat: no-repeat;. Your code is like this too?

  • .image{border: 7px Solid #e0e0e0; border-top-left-Radius: 50px; border-bottom-right-Radius: 50px; height:340px; width:265px; overflow:Hidden;}

1 answer

2

Edition in 4/7/19. The implementation https://github.com/spipu/html2pdf, in fact, practically ignores the property background-size, and that’s not their first problem with CSS. You can contribute to the project by improving it or just reporting the problem, or you can just adjust the image dimensions manually so that it is satisfactory in the PDF. Or, in addition, you can follow the suggestion below.

There are several implementations of html2pdf. I suggest to you the wkhtmltopdf. It is quite powerful to play non-trivial HTML’s in PDF, by using the Qt Webkit engine.

For example, you don’t expose what you have in your image CSS class (class="imagem"), but to fill a <div> with an image, with dimensions, would be something like this (tested in Chrome, Firefox and 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>

Assuming the above excerpts are arranged properly in a file html page., manages the pdf page. by the command line:

$ wkhtmltopdf pagina.html pagina.pdf

Or, in PHP, using 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
}
?>

Spin composer require mikehaertl/phpwkhtmltopdf in the directory of html page., to test. I note that the command wkhtmltopdf must already be working in the system (phpwkhtmltopdf is a small wrapper).

  • But the wkhtmltopdf don’t I have to install something on the server? Sometimes we don’t have access to the server so it’s a bit more complicated to use.

  • Yes, it should be installed on the system. Despite this, it is a good alternative. ;)

  • 1

    @Tiedttech, see https://github.com/dompdf/dompdf as an alternative. But I see that it complies with CSS 2.1, in which the property is not yet defined background-size; moreover, in the dompdf the property float is under development

Browser other questions tagged

You are not signed in. Login or sign up in order to post.