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.

Índice

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.

Deja una respuesta Cancelar la respuesta