Nueva pregunta

Pregunta:

Fecha: 12-05-2017 18:03:34 (En Español)

Configurar página de impresión con JavaScript[No resuelta]

Buenas noches, estoy intentando hacer configurable una página de impresión con javascript pero no obtengo resultado alguno. Tengo "n" elementos registrados en mi bd en mysql el 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, 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

<!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/3.2.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>
Etiquetas: CSS - CSS3 - HTML5 - Imprimir - Javascript - JQuery - PDF - PHP - PHP MySQLi - Pregunta - Query Votos: 1 - Respuestas: 4 - Vistas: 21 Compartir en: Google Facebook Twitter LinkedIn Link
 

Respuestas:

  • Fecha: 14-05-2017 05:37:22 Buenas, soy nuevo aquí; primero tu estas imprimiendo por el id "area_impresion" tu div completo.
    Es aquí donde le dices que obtenga el contenido o valor por id
    var objeto = document.getElementById('area_impresion'); //obtenemos el objeto a imprimir osea todo objeto del html que tengo id area_impresion se imprimirá.

    Debes hacer que recorra un ciclo for en caso de no ingresar cantidad 3 o 4 por un else imprimes todo, en caso de ingresar 5 o 4 entrar en el ciclo for, y que imprima la cantidad deseada por el usuario.

    Recomendación mejorar tu html usar id para ol id="preg1" o hacer una tabla por el id siempre vas a imprimir lo que quieras..! no olvidar
      Votos: 1 - Link respuesta
     
  • Fecha: 16-05-2017 05:30:54 Mi sugerencia es la siguiente, cuando en tu campo de texto le pones el numero 5 por ejemplo y le das imprimir debe crearte un div por bloques de 5, este div le debes poner la siguiente propiedad css page-break-before: always lo que hace esta propiedad es que crea el div y da un salto de pagina por ejemplo de la siguiente forma:

    <a href="javascript:imprSelec('divImprimir')" >Imprimir</a> //con esta instrucción mandamos a imprimir
    
    for(condiciones){ //for que crea n divs
       <div id="divImprimir" style="height: 900px; font-size: 12pt; page-break-before: always">
          // contenido
       </div>
    }
    


    lo que hace este for es que va creando divs con contenido adentro y despues da un salto depagina entre cada uno de losdivs al mandar imprimir

    NOTA: acomodar el codigo en donde corresponde es decir lo php y lo html donde corresponde ya que ésto solo fue a manera de ejemplo
      Votos: 2 - Link respuesta
     
  • Fecha: 19-05-2017 09:30:34 Ruben tu respuesta es la mas acertada. No estaba al tanto de esa propiedad hasta que lei tu respuesta.

    Simplemente genial.

    Muchas gracias por el aporte
      Votos: 1 - Link respuesta
     
  • Fecha: 19-05-2017 09:48:37 Gracias Ernesto por el comentario, es lo genial de estos sitios poder aportar y que sea de utilidad, una instrucción tan corta que nos resuelve un gran problema   Votos: 1 - Link respuesta
     
Para participar activamente de la comunidad primero debes autenticarte, ingresa al sistema.Iniciar Sesión
 
frjcbbae garagebible.com