0

he estado batallado con este problema pero no encuentro solucion.

Intento generar un reporte de ventas pero siempre el ultimo registro hace un salto y aparece en la siguiente pagina: Ejemplo:

introducir la descripción de la imagen aquí

Les dejo mi codigo fuente del reporte

<body id="page-top">
<div class="contenedor">

    <div id="general">

        <div id="div-logo">

            <img src="{{public_path('imagenes/Logo.jpg')}}" alt="Logo del cliente"  style="height: 35px;">
        </div>

        <div id="div-titulo" style="height: 100%">
            <div  style="text-align: center">
                <h5 style="font-size: 16px; margin:5px">Lista de ventas</h5>
                <h6 style="font-size: 14px; margin:5px"> Reporte de ventas</h6>
                <b> Del {{$fechaInicio}} al {{$fechaFinal}}</b>
            </div>
        </div>

        <div id="div-fecha">
            <div  style="text-align: right">
                <br /><br /><br />
                Fecha: {{ date("Y-m-d")}}
            </div>
        </div>
    </div>

    <table class="table table-bordered table-sm" >
        <thead>
          <tr>
            <th scope="col">No. Venta</th>
            <th scope="col">Fecha Venta</th>
            <th scope="col">Vendido por</th>
            <th scope="col">Imagen</th>
            <th scope="col">Producto</th>
            <th scope="col">Categoria</th>
            <th scope="col">Detalle</th>
            <th scope="col">Precio compra</th>
            <th scope="col">Precio venta</th>
            <th scope="col">Cantidad</th>
            <th scope="col">Importe</th>
          </tr>
        </thead>
        <tbody>

        @foreach ($ventas as $venta)
                <tr>
                    <td style="text-align:center;">{{$venta->numeroVenta}}</td>
                    <td style="text-align:center;">{{$venta->fecha_venta}}</td>
                    <td style="text-align:left;">Daniela Rodriguez</td>
                    <td style="text-align:center;"><img src="{{public_path('imagenes/productos/').'/'.$venta->imagen}}" style='width: 25px; height:20px;' /></td>
                    <td style="text-align:left;">{{$venta->nombre}}</td>
                    <td style="text-align:center;">{{$venta->categoria}}</td>
                    <td style="text-align:center;">{{$venta->detalle}}</td>
                    <td style="text-align:right;">${{$venta->precio_compra}}</td>
                    <td style="text-align:right;">${{$venta->precio_venta}}</td>
                    <td style="text-align:center;">{{$venta->cantidad}}</td>
                    <td style="text-align:right;">${{$venta->importe}}</td>
                </tr>
        @endforeach
        <tr>
            <td colspan="9"> </td>
            <td>Total:</td>
            <td style="text-align:right;">$ 50,000</td>
        </tr>
        </tbody>
      </table>

</div>

También me he dado cuenta que si meto registros estáticos, no hace el salto de linea pero cuando meto un for de blade ahí si sucede el problema.

Tambien les dejo el codigo css:

       .contenedor{
                /*border: 1px solid red;*/
    }
    body{
        font-size: 9px;
    }


    #general {
        width: 100%;
        height: 130px;
        overflow: hidden;
    }

    #div-logo , #div-titulo, #div-fecha{
        float: left;
        width: 33%;
    }

    .table {
        width: 100%;
        max-width: 100%;
        margin-bottom: 1rem;
        background-color: transparent;
        border-collapse: collapse;
    }

    .table-bordered td, .table-bordered th {
        border: 1px solid #dee2e6;
        border-top-color: rgb(222, 226, 230);
        border-top-style: solid;
        border-top-width: 1px;
        border-right-color: rgb(222, 226, 230);
        border-right-style: solid;
        border-right-width: 1px;
        border-bottom-color: rgb(222, 226, 230);
        border-bottom-style: solid;
        border-bottom-width: 1px;f
        border-left-color: rgb(222, 226, 230);
        border-left-style: solid;
        border-left-width: 1px;
        border-image-source: initial;
        border-image-slice: initial;
        border-image-width: initial;
        border-image-outset: initial;
        border-image-repeat: initial;
    }

    .table td, .table th {
        vertical-align: top;
        border-top: 1px solid #dee2e6;
    }


    th > div, th > span, th {
        font-size: 8px;
        vertical-align: middle;
    }
    td > div, td > span, td {
        font-size: 6px;
        vertical-align: middle;
    }
    .main_container{
        padding-top:15px;
        padding-left:5px;
        z-index: 99;
        background-size: cover;
        width:735px;
        height:975px;
        position:relative;
    }

También había agregado estas lineas pero no funciono

    thead { display: table-header-group }
    tfoot { display: table-row-group }
    tr { page-break-inside: avoid }

Recién acabo de meter un tr con datos estático antes de que se ejecute el for y recorra las ventas y funciono, pero aun sigo sin saber cual es el problema.

Encontré el problema pero no se como solucionarlo. Al parecer cuando un TD tiene mucho texto se escribe en la siguiente linea de abajo y esto hace que haga el salto de pagina.

1 respuesta 1

0

La solución puede estar relacionado con mejorar el diseño, formatear mejor las columnas y sus encabezados: Agrega porcentajes al width. Por ejemplo:

<tr>
    <th style="width:5%;">5%</th>
    <th style="width:10%;">10%</th>
    <th style="width:25%;">25%</th>
    <th style="width:60%;">60%</th>
</tr>

Lo otro es usar la propiedad margin-auto, prueba además con otras fuentes y las proporciones(Font ratio) y tambien usar las clases CSS Word-break:break-all y Word-wrap:break-Word;

1
  • Gracias por la ayuda. Lo voy a intentar. Commented el 25 jul. 2021 a las 21:18

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.