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?