-1

Estou tendo 3 problemas com esse código para gerar PDF com o mPDF:

1 ) Estão sendo geradas 4 páginas ao invés de 1 que é o que o conteúdo enche.

2 ) O estilo CSS não funciona

3 ) A única imagem que está no código não é exibida;

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");

?>

Onde estou errando?

1 Resposta 1

1

Primeiro você precisa entender que nem todos os atributos CSS são suportados pela mPDF. É necessário verificar na documentação os tipos de tags/propriedades que a biblioteca suporta. As marcações na sua folha de estilo têm várias coisas que não são suportadas. Faça uma revisão e construa o código com base nisso.

Em segundo lugar, você não se decide sobre a maneira de incorporar o estilo. A biblioteca dá duas hipóteses: stylesheet (com código em separado) ou inline (direto no corpo do doc. HTML). Você está usando, em regra, a marcação stylesheet (ou seja, $pdf->WriteHTML($estilo, 1);), mas passa vários comandos de estilo inline (como em style="backgroud-color:none; height: 50px !important;"). Assim fica difícil pra biblioteca saber o que você está querendo fazer. Oraganize-se e use um método só, se não fizer isso, não vai renderizar de forma correta.

Eu fiz uma "limpeza" no seu código pra auxiliar na reconstrução:

<?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();

Como dá pra ver, todas as marcações estão funcionando, e as páginas extras desapareceram. Prossiga daí observando a documentação que vai funcionar.

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 .