настроить css в dompdf - PullRequest
Новая
       9

настроить css в dompdf

0 голосов
/ 26 января 2020

Мне нужно учесть CSS dompdf. У меня есть следующее в системе, и при экспорте, я не могу получить что-то подобное, что соответствует листу PDF ........

enter image description here

enter image description here

Я скопировал CSS из таблицы, находящейся в моей системе, с расширением CSS Used, но я не очень хорошо справляюсь с проблемой CSS 

<!DOCTYPE>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Informe de Reingreso</title>
<style>
    body {
        font-family: Arial, sans-serif;
        font-size: 14px;
    }

    .centerTabla {
        text-align: center;
    }

    table{border-collapse:collapse;}
    th{text-align:left;}

    @media print{
        *,*::before,*::after{text-shadow:none!important;box-shadow:none!important;}
        .table th{background-color:#fff!important;}
        .table-bordered th{border:1px solid #ddd!important;}
    }
        *,*::before,*::after{box-sizing:inherit;}
        /*! CSS Used from: Embedded */
        .vertical-text__inner{display:inline-block;white-space:nowrap;line-height:1.5;transform:translate(0,100%) rotate(-90deg);transform-origin:0 0;}
        .table{width:100%;max-width:100%;margin-bottom:1rem;background-color:transparent;}
        .table td{padding:0.75rem;vertical-align:top;border-top:1px solid #c2cfd6;}
        .table thead th{vertical-align:bottom;border-bottom:2px solid #c2cfd6;}
        .table-sm th,.table-sm td{padding:0.3rem;}
        .table-bordered{border:1px solid #c2cfd6;}
        .table-bordered th,.table-bordered td{border:1px solid #c2cfd6;}
        .table-striped tbody tr:nth-of-type(odd){background-color:rgba(0, 0, 0, 0.05);}
</style>

<body>

    <section>
    <br>
    <div class="form-group row border">
        <div class="table-responsive col-md-12">
            <table class="table table-bordered table-striped table-sm">
                <thead >
                    <tr>                                           
                        <th style="height: 150px"><div style="width:5px" class="vertical-text__inner">Nº</div></th>

                        <th style="width:100px">Pensun Academico Aprobado <br> en 2019 -2020 CII</th>

                        <th><div class="vertical-text__inner" style="width:2px">Nivel</div></th> 

                        <th style="width:80px">Periodo Lectivo</th>   

                        <th><div class="vertical-text__inner" style="width:1px">Calificación</div></th> 

                        <th><div class="vertical-text__inner" style="width:2px">Estado</div></th>  

                        <th><div class="vertical-text__inner" style="width:5px">N° vez tomada</div></th>  

                        <th><div class="vertical-text__inner">% Equiparacion</div></th>  

                        <th style="width:100px">Pensun Academico Aprobado <br> en 2019 -2020 CII</th>

                        <th><div class="vertical-text__inner" style="width:2px">Nivel</div></th>   

                        <th><div class="vertical-text__inner" style="width:15px">Validacion de <br> conocimientos</div></th>   

                        <th><div class="vertical-text__inner">Calificacion valid. <br>de conocimientos</div></th>  

                        <th><div class="vertical-text__inner" style="width:2px">Estado</div></th>  

                        <th><div class="vertical-text__inner">N° vez tomada</div></th> 
                    </tr>
                </thead>
                <tbody>
                @foreach ($analisisReingreso as $materias)
                    <tr>
                    <td class="centerTabla">{{$materias->nVecesTomada}}</td>  <!---contador de materias-->
                    <td>{{$materias->nVecesTomada}}</td> 
                    <td class="centerTabla">{{$materias->nivel}}</td> 
                    <td class="centerTabla">{{$materias->periodoLectivo}}</td> 
                    <td class="centerTabla">{{$materias->calificacion}}</td> 
                    <td class="centerTabla">{{$materias->estado}}</td> 
                    <td class="centerTabla">{{$materias->nVecesTomada}}</td> 
                    <td class="centerTabla">{{$materias->equiparacion}}</td> 
                    <td>{{$materias->asignaturas}}</td> 
                    <td class="centerTabla">{{$materias->nivel}}</td> 
                    <td class="centerTabla">{{$materias->validacionConocimientos}}</td> 
                    <td class="centerTabla">{{$materias->califValidConocimientos}}</td> 
                    <td class="centerTabla">{{$materias->estado}}</td> 
                    <td class="centerTabla">{{$materias->nVecesTomada}}</td> 
                </tr>
                @endforeach
                </tbody>

            </table>
        </div>
    </div>
    </section>
    <br>
    <br>
</body>

Ответы [ 2 ]

0 голосов
/ 28 января 2020

Похоже, что ваш инструмент рендеринга PDF использует горизонтальный текст вместо вертикальной ширины текста, чтобы определить ширину поля родителя. Это, скорее всего, связано с тем, что dompdf использует более ранний процессор css, в то время как вы используете последнее правило css:

transform:translate(0,100%) rotate(-90deg);

Попробуйте это https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode вместо

0 голосов
/ 26 января 2020

Самая очевидная вещь, которую я вижу, состоит в том, что двум вашим столбцам не хватает указанной ширины (% Equiparacion и Calificacion valid. De conocimientos), вы можете попробовать это.

...