Question

我正在尝试使下面的代码在mPDF中工作，但是会出错。

但是，在浏览器中浏览不会出现错误。

我希望找到下图所示的结果。

请注意显示：table-cell;并变换：rotate（180deg）;文字旋转：180；在浏览器中工作。

Anotação 2019-03-21 092449

遵循我的代码：

<?php 

    require 'vendor/autoload.php';

    $css  = '
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            div.tabela {
                display: table;
                width: 870px;
                margin: 0 auto;
                border: 1px #000 solid;
            }

            div.tabela div.titulos {
                background-color: #CCC;
            }

            div.tabela div.registros {
                height: 30px;
                border-top: none;
            }

            div.tabela div.titulos, 
            div.tabela div.registros {  
                display: table-row;
                width: 100%;
            }

            div.tabela div.titulos div, 
            div.tabela div.registros div {
                display: table-cell;
                text-align: center;
                vertical-align: middle;
                border-left: 1px #000 solid;
            }

            div.tabela div.titulos div:nth-child(1), 
            div.tabela div.registros div:nth-child(1) {
                border-left: none;
            }

            span {}

            span.normal {}

            span.rotate {
                height: 200px;
                writing-mode: vertical-rl;
                transform: rotate(180deg);
                                text-rotate : 180;
                transform-origin: center;
            }

        </style>
    ';

    $body = '       

        <div class="tabela">

            <div class="titulos">

                <div style="width: 100px;"><span class=normal>Nome do Gcéu</label></div>
                <div style="width: 100px;"><span class=rotate>Supervisor</label></div>
                <div style="width: 100px;"><span class=normal>Líder</label></div>
                <div style="width: 050px;"><span class=rotate>Houve Supervisão?</label></div>
                <div style="width: 050px;"><span class=rotate>Houve dia de Jejum?</label></div>
                <div style="width: 050px;"><span class=rotate>Houve dia de Evangelismo?</label></div>
                <div style="width: 050px;"><span class=rotate>Membros Compromissados</label></div>
                <div style="width: 050px;"><span class=rotate>Visitantes</label></div>
                <div style="width: 050px;"><span class=rotate>Crianças de 0 a 12 anos</label></div>
                <div style="width: 050px;"><span class=rotate>Total de presentes</label></div>
                <div style="width: 050px;"><span class=rotate>Ofertas</label></div>
                <div style="width: 050px;"><span class=rotate>Discipulados</label></div>
                <div style="width: 050px;"><span class=rotate>Número de decisões</label></div>

            </div>

        </div>  

        <div class="tabela">

            <div class="registros">

                <div style="width: 100px;">Gceú</div>
                <div style="width: 100px;">Carlos</div>
                <div style="width: 100px;">Cleo</div>
                <div style="width: 050px;">Sim</div>
                <div style="width: 050px;">Sim</div>
                <div style="width: 050px;">Não</div>
                <div style="width: 050px;">12</div>
                <div style="width: 050px;">3</div>
                <div style="width: 050px;">3</div>
                <div style="width: 050px;">18</div>
                <div style="width: 050px;">12.3</div>
                <div style="width: 050px;">2</div>
                <div style="width: 050px;">1</div>

            </div>  

        </div>

    ';

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

?>

为什么要在PDF上面加上它？

请注意显示：table-cell;并变换：rotate（180deg）;和text-rotate：

180；在PDF中不起作用。

新功能：

<?php 

    $css  = '
        <style>

            * {
                margin: 0;
                padding: 0;
            }

            div.titulos {
                height: 200px;
                background-color: #CCC;
            }

            div.registros {
                height: 30px;
                border-top: none;
            }

            div.titulos, 
            div.registros { 
                width: 870px;
                margin: 0 auto;
                border: thin solid #000;
            }

            div.titulos div, 
            div.registros div {
                float: left;
                text-align: center;
                vertical-align: middle;
                border-left: thin solid #000;
            }

            div.titulos div:nth-child(1), 
            div.registros div:nth-child(1) {
                border-left: none;
            }

            span {}

            span.normal {}

            span.rotate {
                height: 200px;
                rotate : -90;
                text-rotate : -90;
                writing-mode: vertical-rl;
                transform: rotate(180deg);
                transform-origin: center;
            }

        </style>
    ';

    $body = '   
            <div class="titulos">

                <div style="width: 100px;"><span class=normal>Nome do Gcéu</span></div>
                <div style="width: 100px;"><span class=rotate>Supervisor</span></div>
                <div style="width: 100px;"><span class=normal>Líder</span></div>
                <div style="width: 050px;"><span class=rotate>Houve Supervisão?</span></div>
                <div style="width: 050px;"><span class=rotate>Houve dia de Jejum?</span></div>
                <div style="width: 050px;"><span class=rotate>Houve dia de Evangelismo?</span></div>
                <div style="width: 050px;"><span class=rotate>Membros Compromissados</span></div>
                <div style="width: 050px;"><span class=rotate>Visitantes</span></div>
                <div style="width: 050px;"><span class=rotate>Crianças de 0 a 12 anos</span></div>
                <div style="width: 050px;"><span class=rotate>Total de presentes</span></div>
                <div style="width: 050px;"><span class=rotate>Ofertas</span></div>
                <div style="width: 050px;"><span class=rotate>Discipulados</span></div>
                <div style="width: 050px;"><span class=rotate>Número de decisões</span></div>

            </div>

            <div class="registros">

                <div style="width: 100px;">Gceú</div>
                <div style="width: 100px;">Carlos</div>
                <div style="width: 100px;">Cleo</div>
                <div style="width: 050px;">Sim</div>
                <div style="width: 050px;">Sim</div>
                <div style="width: 050px;">Não</div>
                <div style="width: 050px;">12</div>
                <div style="width: 050px;">3</div>
                <div style="width: 050px;">3</div>
                <div style="width: 050px;">18</div>
                <div style="width: 050px;">12.3</div>
                <div style="width: 050px;">2</div>
                <div style="width: 050px;">1</div>

            </div>  
    ';

    //echo $css.$body;

    require 'vendor/autoload.php';
    $mpdf = new \Mpdf\Mpdf();
    $mpdf->SetDisplayMode( 'fullpage' );
    $mpdf->WriteHTML( $css, 1 );
    $mpdf->WriteHTML( $body );
    $mpdf->Output();

现在，只有跨度不旋转。

如何解决？

现在怎么样：

Answer 1

mPDF不支持属性display: table。使用实际的HTML table。

此外，根据supported CSS documentation，每个文档text-rotate仅支持值1-90或-90：

旋转表格单元格中的文本。可接受的值是1-90（逆时针），或-90（仅）（顺时针旋转）。（自定义属性）

显示：表格单元格；并变换：rotate（180deg）;文字旋转：180；在mPDF中不起作用

1 个答案: