Include CSS when generating a PDF using PHP’s MPDF class

Question

Good morning!

I need to generate a report, in this report I have some CSS for better organization. I can generate the PDF, but the styles are not loaded next to the HTML. I’ve tried to put the CSS in a separate file, but it didn’t work either. I am using version 7.1 of the MPDF. Below is the script...

<?php 
   ob_start();
?>
<style type="text/css">
    body {
        font-family: arial;
        padding: 10px;
    }

    .container-a4 {
        width: 695px;
        height: 942px;
    }

    .text-center {
        text-align: center;
    }

    .border-table {
        border: solid black 1px;
        border-collapse: collapse;
        padding: 10px;

    }

    .text-wrap {
        word-wrap: break-word;
    }
</style>

<div class="container-a4">

<table class="border-table" width="100%">
    <tr>
        <td class="text-center border-table" colspan="2"><b>RELATÓRIO DAS ATIVIDADES REGISTRADAS EM ATA</b></td>
        <td class="border-table">CÓD: <?php echo $ativ_func_set['IDAtividade'] ?></td>
    </tr>
    <tr>
        <td class="border-table"><b>Responsável: <?php echo $ativ_func_set['nomefunc']; ?></td>
        <td class="border-table"><b>Setor: <?php echo $ativ_func_set['nomesetor']; ?></b></td>
        <td class="border-table"><b>Data: <?php echo date('d/m/Y'); ?></b></td>
    </tr>
</table>

<p><b>ATIVIDADE:</b> <?php echo $ativ_func_set['tituloativ']; ?></p>
<p style="text-align: justify;"><b>DESCRIÇÃO DA ATIVIDADE:</b> <?php echo $ativ_func_set['descativ']; ?></p>
<p><b>Data limite para a atividade:</b> <?php echo date('d/m/Y', strtotime($ativ_func_set['dtlimativ'])); ?></p>
<p><b>Data limite para entrega do relatório:</b> <?php echo date('d/m/Y', strtotime($ativ_func_set['dtlimrelativ'])); ?></p>
<p>Houve atraso na realização da atividade? <?php echo $this->write(10); ?></p>
<p class="text-wrap">Justificativa: <?php echo $this->write(234); ?></p> 
<p>Houve atraso na entrega do relatório? <?php echo $this->write(10); ?></p>
<p class="text-wrap">Justificativa: <?php echo $this->write(234); ?></p>
<p class="text-wrap">Resumo dos resultados: <?php echo $this->write(468); ?></p>
<p class="text-wrap">Observações: <?php echo $this->write(234); ?></p>
<br><br><br><br>


<table width="100%">
    <tr class="text-center">
        <td style="width: 50%;">
            <?php echo $this->write(25); ?><br>
            Keila Cristina Belo da Silva<br>
            Coordenadora Acadêmica
        </td>
        <td style="width: 50%;">
            <?php echo $this->write(25); ?><br>
            <?php echo $ativ_func_set['nomefunc'] ?><br>
            Responsável
        </td>
    </tr>
</table>

</div>

<?php
    $html = ob_get_contents();
    ob_end_clean();

    $mpdf = new \Mpdf\Mpdf();
    $mpdf->WriteHTML($html);
    $mpdf->Output();
    exit;
?>

Thanks in advance for any help!

Answer 1

Hi @Reginaldo Boecke,

The secret is to add the style in writeHtml(), for example:

$html = "

<style>
.box{
  background-color:#c12;
  color:#eee;
  font-size:22px;
}
</style>


<div class='box'>mPDF com CSS</div> 

";

<?php
    //$html = ob_get_contents();
    ob_end_clean();

    $mpdf = new \Mpdf\Mpdf();
    $mpdf->WriteHTML($html);
    $mpdf->Output();
    exit;
?>