Problems to generate PDF with mPDF

Question

I’m having 3 problems with that code for generate PDF with the mPDF:

1 ) Are being generated 4 pages instead of 1 which is what the content fills.

2 ) The style CSS doesn’t work

3 ) A only image who is in the code is not displayed;

Código:

<?php

$estilo = '
    <style>
        img {
            max-width: 100%;
        }
        ul {
            list-style: none;
        }
        div.relatorio {
            width: 95%;
            margin: 0 auto;
        }
        div.relatorio ul.border {
            border: .1px rgb(0,0,0) solid;
        }
        div.relatorio .centralizado {
            text-align: center !important;
        }
        div.relatorio .backCinza {
            background-color: rgb(217,217,217);
        }
        div.relatorio ul.ulInlineBlock li {
            display: inline-block;
        }
        div.relatorio ul.lancamento li, div.relatorio ul.resumo li {
            height: 100%;
            line-height: 18px;
            font-size: .85em;
            border-left: .1px rgb(0,0,0) solid;
            text-align: center;
            vertical-align: middle;
        }
        div.relatorio ul.lancamento li {
            width: 113.5px !important;
        }
        div.relatorio ul.resumo li {
            width: 150px !important;
        }
        div.relatorio ul.lancamento li:first-child, div.relatorio ul.resumo li:first-child {
            border-left: none;
        }
        .erro, .hCentralizadoAvisos {
            color: rgb(255,0,0);
        }
        .hCentralizado, .hCentralizadoAvisos, .erro {
            width: auto;
            line-height: 50px;
            text-align: center;
            margin: 0 auto;
        }
        .labelPequeno {
            width: 150px;
            height: 30px;
            padding: 3px;
            display: inline-block;
        }
        span.vertical {
            -webkit-writing-mode: vertical-lr;
            -ms-writing-mode: tb-lr;
            writing-mode: vertical-lr;
            -webkit-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            transform: rotate(180deg);
        }
        span.comum {
        }
        div.cabecalhoVertical {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            margin: 0 auto;
            width: 800px;
            height: 220px;
            border: .1px rgb(0,0,0) solid;
        }
        div.cabecalhoVertical div {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            border-right: .1px rgb(0,0,0) solid;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
        }
        div.cabecalhoVertical div span {
            text-align: center;
            font-weight: bolder;
        }
    </style>
';

$html = '

    <div class="relatorio">

        <div class="chartjs-size-monitor" style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: hidden; pointer-events: none; visibility: hidden; z-index: -1;">
            <div class="chartjs-size-monitor-expand" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
                <div style="position:absolute;width:1000000px;height:1000000px;left:0;top:0"></div>
            </div>
            <div class="chartjs-size-monitor-shrink" style="position:absolute;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1;">
                <div style="position:absolute;width:200%;height:200%;left:0; top:0"></div>
            </div>
        </div>

        <img src="http://www.wesleyanagceu.com.br/_imgs/gceu.png">

        <h1>Relatório Mensal</h1><br><br>

        <div class="cabecalhoVertical">
            <div style="width:100px;"><span class="comum">Nome do Gcéu</span></div>
            <div style="width:100px;"><span class="vertical">Supervisor</span></div>
            <div style="width:100px;"><span class="comum">Líder</span></div>
            <div style="width:050px;"><span class="vertical">Houve Supervisão</span></div>
            <div style="width:050px;"><span class="vertical">Houve dia de Jejum</span></div>
            <div style="width:050px;"><span class="vertical">Houve dia de Evangelismo</span></div>
            <div style="width:050px;"><span class="vertical">Membros Compromissados</span></div>
            <div style="width:050px;"><span class="vertical">Visitantes</span></div>
            <div style="width:050px;"><span class="vertical">Crianças de 0 à 12 anos</span></div>
            <div style="width:050px;"><span class="vertical">Total de presentes</span></div>
            <div style="width:050px;"><span class="vertical">Ofertas</span></div>
            <div style="width:050px;"><span class="vertical">Disicpulados</span></div>
            <div style="width:050px;"><span class="vertical">Número de decisões</span></div>
        </div>

        <div class="border cabecalhoVertical" style="backgroud-color:none; height: 50px !important;">
            <div style="width:100px;"><span class="comum">Célula 1</span></div>
            <div style="width:100px;"><span class="comum">Cleonice</span></div>
            <div style="width:100px;"><span class="comum">Jonas</span></div>
            <div style="width:050px;"><span class="comum">Não</span></div>
            <div style="width:050px;"><span class="comum">Não</span></div>
            <div style="width:050px;"><span class="comum">Não</span></div>
            <div style="width:050px;"><span class="comum">50</span></div>
            <div style="width:050px;"><span class="comum">10</span></div>
            <div style="width:050px;"><span class="comum">13</span></div>
            <div style="width:050px;"><span class="comum">73</span></div>
            <div style="width:050px;"><span class="comum">22,65</span></div>
            <div style="width:050px;"><span class="comum">2</span></div>
            <div style="width:050px;"><span class="comum">11</span></div>
        </div>

        <div class="border cabecalhoVertical" style="backgroud-color:none; height: 50px !important;">
            <div style="width:100px;"><span class="comum">Celula 2</span></div>
            <div style="width:100px;"><span class="comum">Carlos</span></div>
            <div style="width:100px;"><span class="comum">Jonas</span></div>
            <div style="width:050px;"><span class="comum">Não</span></div>
            <div style="width:050px;"><span class="comum">Não</span></div>
            <div style="width:050px;"><span class="comum">Não</span></div>
            <div style="width:050px;"><span class="comum">10</span></div>
            <div style="width:050px;"><span class="comum">5</span></div>
            <div style="width:050px;"><span class="comum">3</span></div>
            <div style="width:050px;"><span class="comum">18</span></div>
            <div style="width:050px;"><span class="comum">78,39</span></div>
            <div style="width:050px;"><span class="comum">3</span></div>
            <div style="width:050px;"><span class="comum">1</span></div>
        </div>

        <div class="border cabecalhoVertical" style="backgroud-color:none; height: 50px !important;">
            <div style="width:100px;"><span class="comum">Celula TOP</span></div>
            <div style="width:100px;"><span class="comum">Carlos</span></div>
            <div style="width:100px;"><span class="comum">Carlos</span></div>
            <div style="width:500px;"><span class="comum">Não houve Reuniões para esse Gcéu</span></div>
        </div>

        <div class="border cabecalhoVertical" style="backgroud-color:none; height: 50px !important;">
            <div style="width:100px;"><span class="comum">Jesuita</span></div>
            <div style="width:100px;"><span class="comum">Josefina Etelvina</span></div>
            <div style="width:100px;"><span class="comum">Josefina Etelvina</span></div>
            <div style="width:500px;"><span class="comum">Não houve Reuniões para esse Gcéu</span></div>
        </div>

        <div class="border cabecalhoVertical" style="backgroud-color:none; height: 50px !important;">
            <div style="width:100px;"><span class="comum">Tassito</span></div>
            <div style="width:100px;"><span class="comum">Carlos</span></div>
            <div style="width:100px;"><span class="comum">Carlos</span></div>
            <div style="width:500px;"><span class="comum">Não houve Reuniões para esse Gcéu</span></div>
        </div>

    </div>
';

require_once 'vendor/autoload.php';

$pdf = new \Mpdf\Mpdf();
$pdf->AddPage();
$pdf->SetDisplayMode( 'fullpage' );


$pdf->charset_in='UTF-8';
$pdf->SetFont('Arial','B',16);
$pdf->WriteHTML($estilo, 1);
$pdf->WriteHTML( $html );
$pdf->Output();
//$pdf->Output("relatorio.pdf","D");

?>

Where I am errandthe?

Answer 1

First you need to understand that not all attributes CSS are supported by mPDF. It is necessary to verify in the documentation the types of tags/properties the library supports. Markups in your stylesheet have several things that are not supported. Review and build the code based on this.

Second, you don’t decide on how to incorporate the style. The library gives two hypotheses: stylesheet (with a separate code) or inline (directly in the body of doc. HTML). As a rule, you are using markup stylesheet (that is to say, $pdf->WriteHTML($estilo, 1);), but passes several style commands inline (as in style="backgroud-color:none; height: 50px !important;"). Makes it hard for the library to know what you’re up to. Pray and use only one method, if you don’t, you won’t render correctly.

I did a "clean" on your code to assist in the reconstruction:

<?php

require_once 'vendor/autoload.php';

$pdf = new \Mpdf\Mpdf([
    'debug' => TRUE,
    'allow_output_buffering' => TRUE,
    'allow_charset_conversion' => TRUE,
    'charset_in' => 'utf-8'
]);

$estilo = '
img {
    max-width:100%;
}
/* body{
    background-color:red;
} */
ul {
    list-style:none;
}
h1{
    margin-bottom: 25px;
    border-bottom:1px solid;
}
.relatorio {
    width: 95%;
    margin: 0 auto;
}
.red{
    background-color:red;
    color:white;
    padding:2px;
}
.comum{

}';

$html = '
    <div class="relatorio">
        <img src="http://www.wesleyanagceu.com.br/_imgs/gceu.png">
        <h1>Relatório Mensal</h1>
        <div class="cabecalhoVertical">
            <div class="comum">Nome do Gcéu</div>
            <div class="vertical">Supervisor</div>
            <div class="comum">Líder</div>
            <div class="vertical">Houve Supervisão</div>
            <div class="vertical">Houve dia de Jejum</div>
            <div class="vertical">Houve dia de Evangelismo</div>
            <div class="vertical">Membros Compromissados</div>
            <div class="vertical">Visitantes</div>
            <div class="vertical">Crianças de 0 à 12 anos</div>
            <div class="vertical">Total de presentes</div>
            <div class="vertical">Ofertas</div>
            <div class="vertical">Disicpulados</div>
            <div class="vertical">Número de decisões</div>
        </div>
        <div class="cabecalhoVertical">
            <div class="comum"><span>Célula 1</div>
            <div class="comum"><span>Cleonice</div>
            <div class="comum"><span>Jonas</div>
            <div class="comum"><span>Não</div>
            <div class="comum"><span>Não</div>
            <div class="comum"><span>Não</div>
            <div class="comum"><span>50</div>
            <div class="comum"><span>10</div>
            <div class="comum"><span>13</div>
            <div class="comum"><span>73</div>
            <div class="comum"><span>22,65</div>
            <div class="comum"><span>2</div>
            <div class="comum"><span>11</div>
        </div>
        <div class="cabecalhoVertical">
            <div class="comum"><span>Celula 2</div>
            <div class="comum"><span>Carlos</div>
            <div class="comum"><span>Jonas</div>
            <div class="comum"><span>Não</div>
            <div class="comum">Não</div>
            <div class="comum">Não</div>
            <div class="comum">10</div>
            <div class="comum">5</div>
            <div class="comum">3</div>
            <div class="comum">18</div>
            <div class="comum">78,39</div>
            <div class="comum">3</div>
            <div class="comum">1</div>
        </div>
        <div class="cabecalhoVertical">
            <div class="comum">Celula TOP</div>
            <div class="comum">Carlos</div>
            <div class="comum">Carlos</div>
            <div class="red">Não houve Reuniões para esse Gcéu</div>
        </div>
        <div class="cabecalhoVertical">
            <div class="comum">Jesuita</div>
            <div class="comum">Josefina Etelvina</div>
            <div class="comum">Josefina Etelvina</div>
            <div class="red">Não houve Reuniões para esse Gcéu</div>
        </div>
        <div class="cabecalhoVertical">
            <div class="comum">Tassito</div>
            <div class="comum">Carlos</div>
            <div class="comum">Carlos</div>
            <div class="red">Não houve Reuniões para esse Gcéu</div>
        </div>
    </div>';

$pdf->SetDisplayMode('fullpage');
$pdf->SetFont('Arial', 'B', 16);
$pdf->WriteHTML($estilo,1);
$pdf->WriteHTML($html);
$pdf->Output();

As you can see, all the markups are working, and the extra pages are gone. Continue from there observing the documentation that will work.