0

Buenos dias lo que estoy tratando de hacer es que cuando doy a imprimir y son 3 formularios que solamente se muestren maximo 2 formularios por hoja (cada uno ocupando la mitad de la hoja A4 sin importar el tamaño de los formularios) y que el tercer formulario aparesca en la siguiente hoja ocupando la mitad de una hoja A4

Este es el codigo que uso para poder imprimir todos los formularios que hay en un div

function printDiv_boletas() {

  var printContents = $("#planillas_select").html();
  var document_html = window.open('', 'PRINT', 'height=400,width=600');
  document_html.document.write("<link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" type=\"text/css\"/>");
  document_html.document.write("<link rel=\"stylesheet\" href=\"https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap.min.css\" type=\"text/css\"/>");
  document_html.document.write("<link rel=\"stylesheet\" href=\"<?php echo base_url() ?>assets/template/css/impresion.css\" type=\"text/css\"/>");
  document_html.document.write("</head><body>");
  document_html.document.write(printContents);
  document_html.document.write("</body></html>");
  setTimeout(function() {
    document_html.print();
    document_html.document.close();
    document_html.focus();
    document_html.close();
    return true;
  }, 2000)
}

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

Cada que aumenta el numero de pagina se corre hacia abajo

1
  • Te sugiero que armes primero tu impresion es decir crear una especie de plantilla con html y css donde una vez que lo visualizes como deseas ...mandes a imprimir con window.print()... el 5 jul. 2018 a las 14:44

2 respuestas 2

2

Esta respuesta abunda en lo que dijo Pablo Lozano.

Si tu estructura tuviese la forma:

<div id="planillas_select">
    <div class="formulario">
     contenido...
    </div>
    <div class="formulario">
     contenido...
    </div>
    <div class="formulario">
     contenido...
    </div>
</div>

Y dentro de cada div con clase formulario estuviera no sólo la tabla sino también el lugar donde se firma, puedes poner la regla que te dice Pablo en cada elemento par (usando el seudoselector nth-child):

@media print {
  .formulario:nth-child(even) { 
    page-break-inside: avoid;
    page-break-after: always;
  }
}

Esto es: para el formulario que va en la segunda mitad de la página, evitar un salto de página dentro del contenedor. Luego del contenedor, forzar un salto de página.

Sin embargo esta regla no hace magia. Junto con ella probablemente tendrás que modificar los estilos para que dos formularios efectivamente quepan en una página, cosa que hoy no ocurre.

Esto lo puedes lograr usando un zoom menor a 1 o reducir los márgenes y paddings cuando se imprima.

Adicionalmente, debieras configurar de antemano el tamaño de página y sus márgenes. En el siguiente ejemplo, para A4 y poniendo un zoom de 90%:

  @media print {
    @page {
      size: 210mm 297mm;
      margin: 5mm 5mm 5mm 5mm;
      orphans: 0;
      widows: 0;
    }
    .formulario {
       zoom:90%;
    }
    .formulario:nth-child(even) { 
        page-break-inside: avoid;
        page-break-after: always;
    }
  }

Puedes previsualizar los estilos de impresión usando chrome devtools via "puntitos"->more tools->rendering

introducir la descripción de la imagen aquí

1

Hay reglas de CSS que puedes usar al imprimir:

@media print {
  .pagina {
    page-break-inside: avoid;
    page-break-after: always;
  }
}

Si pones esta clase a un contenedor y te aseguras de que dentro de cada contenedor sólo tienes 2 formularios (y que las dimensiones del contenedor son de menos de una página, claro), se añadirá un salto de página tras cada uno.

Puedes encontrar más información aquí.

2
  • Tengo un contenedor que contiene n contenedores , y quiero que a la hora de dar a imprimir me muestre dos contenedores por hoja que cada uno mida la mitad
    – Luis
    el 5 jul. 2018 a las 16:04
  • En estos momentos cada que sea mayor el numero de hojas el contenido se va mas hacia abajo en la ultima hoja aparece un contenido en la mitad de la hoja
    – Luis
    el 5 jul. 2018 a las 16:06

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.