在dompdf中调整CSS

问题描述 投票：0回答：2

我需要容纳dompdf的CSS。我的系统中有以下内容，在导出时，无法获得适合pdf表格的类似内容........

“在此处输入图像描述”

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9kMDFaMy5wbmcifQ==” alt =“在此处输入图像描述”>

我复制了系统中具有CSS Used扩展名的表中的CSS，但我不太擅长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>

css dompdf
2个回答
0
投票

我能看到的最明显的事情是，您的两列都缺少指定的宽度（％Equiparacion和Calificacion有效。de conocimientos），您可能想要尝试一下。

0
投票

看来您的PDF渲染工具正在使用水平文本而不是垂直文本宽度来确定父级的框宽。这很可能是由于dompdf在使用最新的CSS规则时使用了较早的CSS处理器：

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

尝试此https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode代替

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.