Imprimir Modal en Bootstrap, DIV, CSS [Ejemplo completo]

Imprimir Modal en Bootstrap. Generalmente las páginas o sistemas web que desarrollamos contienen información de todo tipo como ser: Menús, índice de secciones, imágenes, sidebar, etc.

Por lo tanto, deseamos ofrecer a los usuarios finales una óptima experiencia, por ende, la posibilidad de imprimir sólo lo que es contenido o áreas específicas.

Veamos un ejemplo, una web de turismo en la que quieres ofrecer al visitante la posibilidad de imprimir sólo la ruta turística de una determinada ciudad, sin las barras de navegación, imágenes, menús, etc.

Imprimir Modal en Bootstrap

En impresión Web, en primera instancia pensaremos en el método window.print(), pero esta opción no es la recomendable porque imprime la página completa.

¿Cuál sería la solución?

Podemos usar CSS o JavaScript.

a) Usando CSS

@media print {
.hidden-print {
display: none !important;
}
}

En Bootstrap 4 esto ha cambiado a:

.d-print-none

b) Usando DIV con ID

La solución para lograr nuestro objetico es programar que parte de su contenido vamos a ofrecer a nuestros visitantes o usuarios para que puedan imprimir.

  • La zona que deseamos imprimir la colocamos en un elemento de bloque HTML con un atributo id, lo más simple es colocarla dentro de un bloque DIV, de esta técnica tenemos localizada la parte de la página que queremos que se imprima.
  • Luego implementaremos un botón o un enlace para llamar a una función que abra una ventana nueva.
  • En esta ventana se escribe el contenido del objeto correspondiente al bloque DIV, o sea, lo que deba imprimirse. Una vez hecho esto sólo queda llamar al método print de la nueva ventana.

Después de la etiqueta <body> agregaremos una división similar a esto:

<div id="div_print">Este texto es lo que se imprimirá cuando se pulse el enlace.</div>

Como segundo paso, deberemos tener por algún otro lugar el link que imprimirá la división:

<a href="javascript:imprimirSeleccion('div_print')" >Imprimir texto</a>

Para finalizar, necesitaremos poner dentro del <head> la siguiente función js:

<script language="Javascript">
function imprimirSeleccion(nombre) {
var ficha = document.getElementById(nombre);
var ventimp = window.open(' ', 'popimpr');
ventimp.document.write( ficha.innerHTML );
ventimp.document.close();
ventimp.print( );
ventimp.close();
}
</script>

Ejemplo completo

<html>
<head>
<title>Nuevo documento</title>
<script language="Javascript">
function imprimirSeleccion(nombre) {
var ficha = document.getElementById(nombre);
var ventimp = window.open(' ', 'popimpr');
ventimp.document.write( ficha.innerHTML );
ventimp.document.close();
ventimp.print( );
ventimp.close();
}
</script>
</head>
<body>
<div id="div_print">División que se imprimirá cuando se pulse el enlace.</div>
<a href="javascript:imprSelec('div_print')" >Imprimir división</a>
</body>
</html>

IMPRIMIR EN MODAL BOOTSTRAP

A diferencia del ejemplo anterior, este imprimirá una ventana modal generada por el framework Boostrap.

$('#printButton').on('click', function () {
if ($('.modal').is(':visible')) {
var modalId = $(event.target).closest('.modal').attr('id');
$('body').css('visibility', 'hidden');
$("#" + modalId).css('visibility', 'visible');
$('#' + modalId).removeClass('modal');
window.print();
$('body').css('visibility', 'visible');
$('#' + modalId).addClass('modal');
} else {
window.print();
}
});

Ejemplo completo
Código completo del ejemplo usando Boostrap.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Bootstrap Modal Remote</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="//code.jquery.com/jquery-1.8.3.js"></script>

<script type="text/javascript" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap.min.css">
</head>
<body>
<h1>Don't Print</h1>

<a data-target="#myModal" role="button" class="btn" data-toggle="modal">Launch modal</a>

<div class="modal fade hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal to print</h3>

</div>
<div class="modal-body">
<p>Print Me</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary" id="printButton">Print</button>
</div>
</div>

<script type="text/javascript">
$('#printButton').on('click', function () {
if ($('.modal').is(':visible')) {
var modalId = $(event.target).closest('.modal').attr('id');
$('body').css('visibility', 'hidden');
$("#" + modalId).css('visibility', 'visible');
$('#' + modalId).removeClass('modal');
window.print();
$('body').css('visibility', 'visible');
$('#' + modalId).addClass('modal');
} else {
window.print();
}
});
</script>

</body>
</html>

CONCLUSIÓN

La implementación de la función de impresión es muy sencilla como han podido apreciar y en este artículo hemos aprendido 3 formas:

  • Estilos CSS
  • DIV HTML y JavaScript
  • Modal Boostrap

Espero que esta breve explicación les ayude en sus proyectos web.

Me fascina la programación en diversos lenguajes y mas aún si son sistemas web o páginas web.

Entradas relacionadas

Integrar Bootstrap 3 Badge Colors

Integrar Bootstrap 3 Badge Colors

En este artículo vamos a integrar colores de fondo en la clase BADGE de Bootstrap 3. Integrar Bootstrap 3 Badge Colors. En el framework Bootstrap 3 por…

5 formar de validar checkbox

5 formar de validar checkbox

5 formar de validar checkbox. Aquí mostrare varias formas de validar checkbox usando jQuery y JavaScript, también usaremos funciones a nivel de formulario. Aquí debéis fijaros que…

Cómo mostrar ocultar DIV usando CHECKBOX

Cómo mostrar ocultar DIV usando CHECKBOX

Cómo mostrar ocultar DIV usando CHECKBOX?. Lo que haremos será trabajar en un div al hacer clic con el mouse usando jQuery, use el método toggle(). Por…

Enviar formulario usando checkbox

Enviar formulario usando checkbox

Enviar formulario usando checkbox. En este articulo veremos una forma de enviar un formulario HTML usando una casilla o varias casillas de verificación (checkbox). Por lo tanto,…

Limpiar Select2 jQuery

Limpiar Select2 jQuery: Ejemplo completo

Limpiar Select2 jQuery. En este articulo aprenderemos a restablecer para mostrar el marcador de posición select2. JQuery Select2 restablece y luego muestra el marcador de posición. Por…

Evitar duplicados al importar MySQL y PHP

Evitar duplicados al importar MySQL y PHP

Evitar duplicados al importar MySQL y PHP. La mayoría de sistemas web o de escritorio trabajan con importación de registros hacia la base de datos para optimizar…

Esta entrada tiene un comentario

  1. Agrega ventajas y desventajas de cada una para completar mas la info, use la de html javascript y no me paso estilos, probare las otras

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *