<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
Hola, soy un div con contenido aleatorio
</div>
<div id="imprimible">
Hola, yo soy otro div con el id imprimible<br>
Puedo llevar <br>saltos de línea<br>
También
<ul>
<li>Elementos</li>
<li>de una</li>
<li>Lista</li>
</ul>
<h1>Encabezados</h1>
<h2>De todos</h2>
<h3>Los tamaños</h3>
<p>Y <strong>todo</strong> lo que pueda ser <i>creado</i>
usando <code>html</code></p>
</div>
<button id="btnImprimir">Imprimir</button>
<script src="script.js"></script>
</body>
</html>
// Code goes here
function imprimirElemento(elemento) {
var ventana = window.open('', 'PRINT', 'height=400,width=600');
ventana.document.write('<html><head><title>' + document.title + '</title>');
ventana.document.write('<link rel="stylesheet" href="style.css">');
ventana.document.write('</head><body >');
ventana.document.write(elemento.innerHTML);
ventana.document.write('</body></html>');
ventana.document.close();
ventana.focus();
ventana.onload = function() {
ventana.print();
ventana.close();
};
return true;
}
document.querySelector("#btnImprimir").addEventListener("click", function() {
var div = document.querySelector("#imprimible");
imprimirElemento(div);
});
/* Styles go here */
h1{
color: blue;
}
p{
padding: 18px;
background-color: pink;
}