javascript - tipos - ¿Cómo imprimir contenido HTML al hacer clic en un botón, pero no en la página?
onclick javascript (6)
Aquí hay una versión pura de CSS
.example-print {
display: none;
}
@media print {
.example-screen {
display: none;
}
.example-print {
display: block;
}
}
<div class="example-screen">You only see me in the browser</div>
<div class="example-print">You only see me in the print</div>
Esta pregunta ya tiene una respuesta aquí:
- Imprimir <div id = "printarea"> </ div> solamente? 26 respuestas
Quiero imprimir algo de contenido HTML, cuando el usuario hace clic en un botón. Una vez que el usuario haga clic en ese botón, se abrirá el diálogo de impresión del navegador, pero no imprimirá la página web. En su lugar, imprimirá algún otro contenido HTML que no se muestra en la página.
Al hacer esta pregunta, se me ocurren algunas soluciones. Pero no estoy seguro de si esas son buenas ideas o si se puede hacer algo mejor. Una de esas soluciones es: puedo mantener este contenido HTML en un div y hacerlo display: para imprimir, pero display: none para visualizar. Todos los demás elementos en la página web pueden display: none para impresión y display: para la pantalla. Y luego llama para imprimir.
¿Alguna mejor idea?
De acuerdo con este enlace SO puede imprimir un div específico con
w=window.open();
w.document.write(document.getElementsByClassName(''report_left_inner'')[0].innerHTML);
w.print();
w.close();
Debajo del código puede ser de ayuda:
<html>
<head>
<script>
function printPage(id)
{
var html="<html>";
html+= document.getElementById(id).innerHTML;
html+="</html>";
var printWin = window.open('''','''',''left=0,top=0,width=1,height=1,toolbar=0,scrollbars=0,status =0'');
printWin.document.write(html);
printWin.document.close();
printWin.focus();
printWin.print();
printWin.close();
}
</script>
</head>
<body>
<div id="block1">
<table border="1" >
</tr>
<th colspan="3">Block 1</th>
</tr>
<tr>
<th>1</th><th>XYZ</th><th>athock</th>
</tr>
</table>
</div>
<div id="block2">
This is Block 2 content
</div>
<input type="button" value="Print Block 1" onclick="printPage(''block1'');"></input>
<input type="button" value="Print Block 2" onclick="printPage(''block2'');"></input>
</body>
</html>
Encontré otra solución elegante para esto:
Coloque su parte imprimible dentro de un div con una identificación como esta:
<div id="printableArea">
<h1>Print me</h1>
</div>
<input type="button" onclick="printDiv(''printableArea'')" value="print a div!" />
Ahora creemos un javascript realmente simple:
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
FUENTE: SO Respuesta
Si agrega y elimina el innerHTML, todos los javascript, css y más se cargarán dos veces, y los eventos se activarán dos veces (me pasó a mí), es mejor ocultar el contenido, usando jQuery y css de esta manera:
function printDiv(selector) {
$(''body .site-container'').css({display:''none''});
var content = $(selector).clone();
$(''body .site-container'').before(content);
window.print();
$(selector).first().remove();
$(''body .site-container'').css({display:''''});
}
El "contenedor de sitio" div contiene todo el sitio, por lo que puede llamar a la función como:
printDiv(''.someDiv'');
Quiero ver esto
Ejemplo http://jsfiddle.net/35vAN/
<html>
<head>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js" > </script>
<script type="text/javascript">
function PrintElem(elem)
{
Popup($(elem).html());
}
function Popup(data)
{
var mywindow = window.open('''', ''my div'', ''height=400,width=600'');
mywindow.document.write(''<html><head><title>my div</title>'');
/*optional stylesheet*/ //mywindow.document.write(''<link rel="stylesheet" href="main.css" type="text/css" />'');
mywindow.document.write(''</head><body >'');
mywindow.document.write(data);
mywindow.document.write(''</body></html>'');
mywindow.print();
mywindow.close();
return true;
}
</script>
</head>
<body>
<div id="mydiv">
This will be printed. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a quam at nibh adipiscing interdum. Nulla vitae accumsan ante.
</div>
<div>
This will not be printed.
</div>
<div id="anotherdiv">
Nor will this.
</div>
<input type="button" value="Print Div" onclick="PrintElem(''#mydiv'')" />
</body>
</html>