Ir para o conteúdo
  • Revista PROGRAMAR: Já está disponível a edição #60 da revista programar. Faz já o download aqui!

carcleo

inserir CSS no mPDF

Mensagens Recomendadas

carcleo

Código:

$css = "
<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>
";

require 'vendor/autoload.php';

$html = $css . $_POST["htmlPDF"];

$mpdf = new \Mpdf\Mpdf();
$mpdf->SetDisplayMode('fullpage');
$mpdf->WriteHTML($html);
$mpdf->Output("relatorio.pdf","D");

Se eu fizer: 

echo $html;
die();

Então o HTML sai perfeito no navegador.

Mas a impressão do pdf sai sem estilo.

Também tentei da forma abaxo sendo que o css importado é o mesmo:

require 'vendor/autoload.php';

$relatorio = file_get_contents('_scripts/_css/relatorio.css');

$html = $_POST["htmlPDF"];

$mpdf = new \Mpdf\Mpdf();
$mpdf->SetDisplayMode( 'fullpage' );
$mpdf->WriteHTML( $relatorio, 1 );
$mpdf->WriteHTML( $html );
$mpdf->Output("relatorio.pdf","D");

Mesm coisa: eu não consig exibir o css.

Onde estará o erro?

Por mais incrível que pareça, o código abaixo funciona mas não são os css e html que serão usados.

require 'vendor/autoload.php';

$relatorio = file_get_contents( 'style.css' );

$html = "<ul class='border'><li>Membros</li></ul>";

$mpdf = new \Mpdf\Mpdf();
$mpdf->SetDisplayMode( 'fullpage' );
$mpdf->WriteHTML( $relatorio, 1 );
$mpdf->WriteHTML( $html );
$mpdf->Output();

O HTML que vai popular o pdf é do tipo:

 $html = "    
<ul class='border'>
   <li style='text-align: left; border-bottom: .1px rgb(0,0,0) solid;'><label class='labelPequeno'>Gcéu</label> : " . $celula['nomeCelula'] . "</li>
   <li style='text-align: left; border-bottom: .1px rgb(0,0,0) solid;' class='backCinza'><label class='labelPequeno'>Supervisor de Setor</label> : " . $nomeLideres['nomeLiderSetor'] . "</li>
   <li style='text-align: left; border-bottom: .1px rgb(0,0,0) solid;'><label class='labelPequeno'>Líder</label> : " . $celula['nomeLider'] . "</li>
   <li style='text-align: left;'><label class='labelPequeno'>Auxiliar</label> : " . $celula['nomeAuxiliar'] . "</li>
</ul>
<ul class='border'>
   <li style='text-align: left; border-bottom: .1px rgb(0,0,0) solid;'><label class='labelPequeno'>Dias que acontece</label> : " . $celula['diaReunioes'] . "</li>
   <li style='text-align: left;'><label class='labelPequeno'>Membros Ativos</label> : " . $membros . "</li>
</ul>";

 

Editado por carcleo

Partilhar esta mensagem


Ligação para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.

Entrar Agora

×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade. Este site usa cookies para disponibilizar funcionalidades personalizadas. Para mais informações visite esta página.