1

Estoy intentando hacer configurable una página de impresión con JavaScript pero no obtengo resultado alguno. Tengo "n" elementos registrados en mi base de datos en MySQL, a la cual doy mantenimiento en PHP, pero surge una necesidad de querer configurar la página de impresión, osea tener una opción de ingresar una cierta cantidad de registros a imprimir por página. Ejemplo si ingreso 4 en un input, se impriman 4 registros por página y así sucesivamente hasta terminar de imprimir todos los registros.

Si alguien ha realizado ese trabajo y pudiera ayudarme a realizar eso o por lo menos darme algunas sugerencias o ejemplos de como hacerlo les estaría muy agradecidos.

Ejemplo:

introducir la descripción de la imagen aquí

Éste es mi código:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Javascript</title>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <style type="text/css">
    ol.lower-alpha {
      list-style-type: lower-alpha;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-12" style="margin-top: 50px">
        <form class="form-inline" method="post">
          <div class="form-group">
            <label for="nro">N° Preguntas a imprimir por Página</label>
            <input type="text" name="nro" id="nro" class="form-control" placeholder="5">
          </div>
          <button class="btn btn-primary" type="button" id="btnPrint"><i class="glyphicon glyphicon-print"></i> Imprimir</button>
        </form>
      </div>
    </div>
    <di class="row" id="area_impresion">
      <div class="col-md-12" style="margin-top: 50px">
        <h2 class="text-center" style="margin-bottom: 20px">Cuestionario</h2>
      </div>
      <div class="col-md-12">
        <p> 01. Pregunta N° 01
          <ol class='lower-alpha'>
            <li>alternativa 01</li>
            <li>alternativa 02</li>
            <li>alternativa 03</li>
            <li>alternativa 04</li>
            <li>alternativa 05</li>
          </ol>
        </p>
        <p> 02. Pregunta N° 02
          <ol class='lower-alpha'>
            <li>alternativa 01</li>
            <li>alternativa 02</li>
            <li>alternativa 03</li>
            <li>alternativa 04</li>
            <li>alternativa 05</li>
          </ol>
        </p>
        <p> 03. Pregunta N° 03
          <ol class='lower-alpha'>
            <li>alternativa 01</li>
            <li>alternativa 02</li>
            <li>alternativa 03</li>
            <li>alternativa 04</li>
            <li>alternativa 05</li>
          </ol>
        </p>
        <p> 04. Pregunta N° 04
          <ol class='lower-alpha'>
            <li>alternativa 01</li>
            <li>alternativa 02</li>
            <li>alternativa 03</li>
            <li>alternativa 04</li>
            <li>alternativa 05</li>
          </ol>
        </p>
        <p> 05. Pregunta N° 05
          <ol class='lower-alpha'>
            <li>alternativa 01</li>
            <li>alternativa 02</li>
            <li>alternativa 03</li>
            <li>alternativa 04</li>
            <li>alternativa 05</li>
          </ol>
        </p>
        <p> 06. Pregunta N° 06
          <ol class='lower-alpha'>
            <li>alternativa 01</li>
            <li>alternativa 02</li>
            <li>alternativa 03</li>
            <li>alternativa 04</li>
            <li>alternativa 05</li>
          </ol>
        </p>
        <p> 07. Pregunta N° 07
          <ol class='lower-alpha'>
            <li>alternativa 01</li>
            <li>alternativa 02</li>
            <li>alternativa 03</li>
            <li>alternativa 04</li>
            <li>alternativa 05</li>
          </ol>
        </p>
        <p> 08. Pregunta N° 08
          <ol class='lower-alpha'>
            <li>alternativa 01</li>
            <li>alternativa 02</li>
            <li>alternativa 03</li>
            <li>alternativa 04</li>
            <li>alternativa 05</li>
          </ol>
        </p>
        <p> 09. Pregunta N° 09
          <ol class='lower-alpha'>
            <li>alternativa 01</li>
            <li>alternativa 02</li>
            <li>alternativa 03</li>
            <li>alternativa 04</li>
            <li>alternativa 05</li>
          </ol>
        </p>
        <p> 10. Pregunta N° 10
          <ol class='lower-alpha'>
            <li>alternativa 01</li>
            <li>alternativa 02</li>
            <li>alternativa 03</li>
            <li>alternativa 04</li>
            <li>alternativa 05</li>
          </ol>
        </p>
        <p> 11. Pregunta N° 11
          <ol class='lower-alpha'>
            <li>alternativa 01</li>
            <li>alternativa 02</li>
            <li>alternativa 03</li>
            <li>alternativa 04</li>
            <li>alternativa 05</li>
          </ol>
        </p>
        <p> 12. Pregunta N° 12
          <ol class='lower-alpha'>
            <li>alternativa 01</li>
            <li>alternativa 02</li>
            <li>alternativa 03</li>
            <li>alternativa 04</li>
            <li>alternativa 05</li>
          </ol>
        </p>
        <p> 13. Pregunta N° 13
          <ol class='lower-alpha'>
            <li>alternativa 01</li>
            <li>alternativa 02</li>
            <li>alternativa 03</li>
            <li>alternativa 04</li>
            <li>alternativa 05</li>
          </ol>
        </p>
        <p> 14. Pregunta N° 14
          <ol class='lower-alpha'>
            <li>alternativa 01</li>
            <li>alternativa 02</li>
            <li>alternativa 03</li>
            <li>alternativa 04</li>
            <li>alternativa 05</li>
          </ol>
        </p>
        <p> 15. Pregunta N° 15
          <ol class='lower-alpha'>
            <li>alternativa 01</li>
            <li>alternativa 02</li>
            <li>alternativa 03</li>
            <li>alternativa 04</li>
            <li>alternativa 05</li>
          </ol>
        </p>
        <p> 16. Pregunta N° 16
          <ol class='lower-alpha'>
            <li>alternativa 01</li>
            <li>alternativa 02</li>
            <li>alternativa 03</li>
            <li>alternativa 04</li>
            <li>alternativa 05</li>
          </ol>
        </p>
        <p> 17. Pregunta N° 17
          <ol class='lower-alpha'>
            <li>alternativa 01</li>
            <li>alternativa 02</li>
            <li>alternativa 03</li>
            <li>alternativa 04</li>
            <li>alternativa 05</li>
          </ol>
        </p>
        <p> 18. Pregunta N° 18
          <ol class='lower-alpha'>
            <li>alternativa 01</li>
            <li>alternativa 02</li>
            <li>alternativa 03</li>
            <li>alternativa 04</li>
            <li>alternativa 05</li>
          </ol>
        </p>
        <p> 19. Pregunta N° 19
          <ol class='lower-alpha'>
            <li>alternativa 01</li>
            <li>alternativa 02</li>
            <li>alternativa 03</li>
            <li>alternativa 04</li>
            <li>alternativa 05</li>
          </ol>
        </p>
        <p> 20. Pregunta N° 20
          <ol class='lower-alpha'>
            <li>alternativa 01</li>
            <li>alternativa 02</li>
            <li>alternativa 03</li>
            <li>alternativa 04</li>
            <li>alternativa 05</li>
          </ol>
        </p>
      </div>
  </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script type="text/javascript">
    $(function() {

      $("#btnPrint").on('click', function() {

        var nro = $("#nro").val(); //Nro de Preguntas a imprimir por página

        var objeto = document.getElementById('area_impresion'); //obtenemos el objeto a imprimir
        var ventana = window.open('', '_blank'); //abrimos una ventana vacía nueva
        ventana.document.write(objeto.innerHTML); //imprimimos el HTML del objeto en la nueva ventana
        ventana.document.close(); //cerramos el documento
        ventana.print(); //imprimimos la ventana
        ventana.close(); //cerramos la ventana

      });
    });
  </script>
</body>

</html>

4
  • 1
    Sería bueno que pusieras código y así te podemos ayudar mejor, también lo que dices se me ocurre que con CSS lo personalices manipulado desde javascript... Commented el 13 may. 2017 a las 4:12
  • con imprimir te refieres a lo que hace la "impresora" o a "mostrar" los datos? Commented el 13 may. 2017 a las 4:36
  • Hola Roberto edite la pregunta porque derrepente no me deje entender muy bien. Por favor ojala puedas ayudarme amigo. Commented el 13 may. 2017 a las 15:08
  • Hola Maghdiel Campos, allí puse lo que estoy tratando de hacer pero no se como hacer que dependiendo de la cantidad de preguntas que ingrese el usuario en el input se imprima esa cantidad de preguntas por página. Alguna idea? Commented el 13 may. 2017 a las 15:24

1 respuesta 1

1

Puedes conseguir lo que quieres de una manera sencilla, tan sólo añadiendo un poco de CSS a la página que creas nueva y que se va a imprimir.

La idea es que cada pregunta es un p seguido de un ol(*), entonces si lo que quieres es que haya n preguntas por página, lo que deberías hacer es añadir un salto de página después de cada n ol. En CSS esto se puede lograr gracias a que:

  • Puedes añadir un salto de página con page-break-after.
  • Puedes seleccionar el n-elemento con el selector :nth-of-type(X) (donde X es un número).
  • Puedes seleccionar los múltiplos de n con el selector :nth-of-type(Xn) (X será un número).

Quieres un estilo que añada un salto de página para las preguntas (.lower-alpha) múltiplos del número indicado en el input ([valor-de-nro]). Que sería algo así:

.lower-alpha:nth-of-type( [valor-de-nro]n ) { 
    page-break-after: always; 
}

Así que sólo te quedaría modificar un poco tu JavaScript para asegurarte que añades ese estilo (sólo código JS relacionado):

$(function() {

  $("#btnPrint").on('click', function() {

    var nro = $("#nro").val(); //Nro de Preguntas a imprimir por página

    var objeto = document.getElementById('area_impresion'); //obtenemos el objeto a imprimir
    var ventana = window.open('', '_blank'); //abrimos una ventana vacía nueva
    ventana.document.write(objeto.innerHTML); //imprimimos el HTML del objeto en la nueva ventana

    // si se ha escrito un número
    if (nro != "" && !isNaN(nro)) {
        // añadimos el estilo que pone un salto de página cada nro preguntas 
        ventana.document.write("<style>.lower-alpha:nth-of-type(" + nro + "n) { page-break-after: always; }</style>");
    }

    ventana.document.close(); //cerramos el documento
    ventana.print(); //imprimimos la ventana
    ventana.close(); //cerramos la ventana

  });
});

Y con eso ya funciona correctamente y a la hora de imprimir pasa a la página siguiente después de cada n preguntas. Lo probé en local (parece que los snippets bloquean los pop-ups) y funciona correctamente.


(*) Nota: el HTML de la pregunta no es válido porque un ol no puede ir dentro de un p, entonces <p><ol></ol></p> será interpretado por los navegadores como <p></p><ol></ol> y un </p> huérfano).

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.