javascript - texto - ¿Imprimir<div id=“printarea”></div> solo?
imprimir texto en div javascript (26)
¿Cómo imprimo el div indicado (sin deshabilitar manualmente todo el contenido de la página)?
Quiero evitar un nuevo cuadro de diálogo de vista previa, por lo que crear una nueva ventana con este contenido no es útil.
La página contiene un par de tablas, una de ellas contiene el div que quiero imprimir: la tabla tiene un estilo con estilos visuales para la web, que no deberían aparecer impresos.
Da cualquier elemento que quieras imprimir el ID
printMe.Incluya este script en su etiqueta de cabeza:
<script language="javascript"> var gAutoPrint = true; function processPrint(){ if (document.getElementById != null){ var html = ''<HTML>/n<HEAD>/n''; if (document.getElementsByTagName != null){ var headTags = document.getElementsByTagName("head"); if (headTags.length > 0) html += headTags[0].innerHTML; } html += ''/n</HE'' + ''AD>/n<BODY>/n''; var printReadyElem = document.getElementById("printMe"); if (printReadyElem != null) html += printReadyElem.innerHTML; else{ alert("Error, no contents."); return; } html += ''/n</BO'' + ''DY>/n</HT'' + ''ML>''; var printWin = window.open("","processPrint"); printWin.document.open(); printWin.document.write(html); printWin.document.close(); if (gAutoPrint) printWin.print(); } else alert("Browser not supported."); } </script>Llamar a la función
<a href="javascript:void(processPrint());">Print</a>
¿Podría usar una hoja de estilo de impresión y usar CSS para organizar el contenido que desea imprimir? Lea este artículo para más punteros.
@Kevin Florida Si tiene varios divs con la misma clase, puede usarlo así:
<div style="display:none">
<div id="modal-2" class="printableArea">
<input type="button" class="printdiv-btn" value="print a div!" />
</div>
</div>
Estaba usando el tipo de contenido interno de Colorbox
$(document).on(''click'', ''.printdiv-btn'', function(e) {
e.preventDefault();
var $this = $(this);
var originalContent = $(''body'').html();
var printArea = $this.parents(''.printableArea'').html();
$(''body'').html(printArea);
window.print();
$(''body'').html(originalContent);
});
Aquí hay una solución general, utilizando solo CSS , que he verificado que funciona.
@media print {
body * {
visibility: hidden;
}
#section-to-print, #section-to-print * {
visibility: visible;
}
#section-to-print {
position: absolute;
left: 0;
top: 0;
}
}
Los enfoques alternativos no son tan buenos. Usar la display es complicado porque si algún elemento tiene display:none , ninguno de sus descendientes mostrará tampoco. Para usarlo, tienes que cambiar la estructura de tu página.
El uso de la visibility funciona mejor, ya que puede activar la visibilidad para los descendientes. Sin embargo, los elementos invisibles todavía afectan el diseño, así que muevo la section-to-print a la parte superior izquierda para que se imprima correctamente.
Con CSS 3 puedes usar lo siguiente:
body *:not(#printarea) {
display: none;
}
Con jQuery es tan simple como esto:
w=window.open();
w.document.write($(''.report_left_inner'').html());
w.print();
w.close();
El método de Sandro funciona muy bien.
Lo modifiqué para permitir el uso de múltiples enlaces de PrintMe, en particular para usar en páginas con pestañas y expandir el texto.
function processPrint(printMe){ <- llamando a una variable aquí
var printReadyElem = document.getElementById(printMe); <- eliminó las comillas alrededor de printMe para solicitar una variable
<a href="javascript:void(processPrint(''divID''));">Print</a> <: pasar el ID div a imprimir a la función para convertir la variable printMe en el ID div. se necesitan comillas simples
En mi caso tuve que imprimir una imagen dentro de una página. Cuando utilicé la solución votada, tenía 1 página en blanco y la otra mostrando la imagen. Espero que ayude a alguien.
Aquí está el css que utilicé:
@media print {
body * {
visibility: hidden;
}
#not-print * {
display: none;
}
#to-print, #to-print * {
visibility: visible;
}
#to-print {
display: block !important;
position: absolute;
left: 0;
top: 0;
width: auto;
height: 99%;
}
}
Mi html es:
<div id="not-print" >
<header class="row wrapper page-heading">
</header>
<div class="wrapper wrapper-content">
<%= image_tag @qrcode.image_url, size: "250x250" , alt: "#{@qrcode.name}" %>
</div>
</div>
<div id="to-print" style="display: none;">
<%= image_tag @qrcode.image_url, size: "300x300" , alt: "#{@qrcode.name}" %>
</div>
Esto funciona bien:
<style type="text/css">
@media print
{
body * { visibility: hidden; }
#printcontent * { visibility: visible; }
#printcontent { position: absolute; top: 40px; left: 30px; }
}
</style>
Tenga en cuenta que esto solo funciona con "visibilidad". "pantalla" no lo hará. Probado en FF3.
La función printDiv () salió varias veces, pero en ese caso, pierde todos sus elementos de enlace y valores de entrada. Entonces, mi solución es crear un div para todo lo que se llama "body_allin" y otro fuera del primero llamado "body_print".
Entonces llamas a esta función:
function printDiv(divName){
var printContents = document.getElementById(divName).innerHTML;
document.getElementById("body_print").innerHTML = printContents;
document.getElementById("body_allin").style.display = "none";
document.getElementById("body_print").style.display = "";
window.print();
document.getElementById("body_print").innerHTML = "";
document.getElementById("body_allin").style.display = "";
document.getElementById("body_print").style.display = "none";
}
Mejor css para adaptarse al espacio vacío altura:
@media print {
body * {
visibility: hidden;
height:0;
}
#section-to-print, #section-to-print * {
visibility: visible;
height:auto;
}
#section-to-print {
position: absolute;
left: 0;
top: 0;
}
}
Paso 1: Escribe el siguiente javascript dentro de tu etiqueta de cabeza
<script language="javascript">
function PrintMe(DivID) {
var disp_setting="toolbar=yes,location=no,";
disp_setting+="directories=yes,menubar=yes,";
disp_setting+="scrollbars=yes,width=650, height=600, left=100, top=25";
var content_vlue = document.getElementById(DivID).innerHTML;
var docprint=window.open("","",disp_setting);
docprint.document.open();
docprint.document.write(''<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"'');
docprint.document.write(''"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">'');
docprint.document.write(''<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">'');
docprint.document.write(''<head><title>My Title</title>'');
docprint.document.write(''<style type="text/css">body{ margin:0px;'');
docprint.document.write(''font-family:verdana,Arial;color:#000;'');
docprint.document.write(''font-family:Verdana, Geneva, sans-serif; font-size:12px;}'');
docprint.document.write(''a{color:#000;text-decoration:none;} </style>'');
docprint.document.write(''</head><body onLoad="self.print()"><center>'');
docprint.document.write(content_vlue);
docprint.document.write(''</center></body></html>'');
docprint.document.close();
docprint.focus();
}
</script>
Paso 2: llame a la función PrintMe (''DivID'') mediante un evento onclick.
<input type="button" name="btnprint" value="Print" onclick="PrintMe(''divid'')"/>
<div id="divid">
here is some text to print inside this div with an id ''divid''
</div>
Podría usar un estilo CSS separado que deshabilite todos los demás contenidos, excepto el que tiene el ID "printarea".
Consulte Diseño de CSS: Ir a Imprimir para obtener más explicaciones y ejemplos.
Probé muchas de las soluciones provistas. Ninguna de ellas funcionó perfectamente. O pierden enlaces CSS o JavaScript. Encontré una solución perfecta y fácil que no pierde CSS ni enlaces de JavaScript.
HTML:
<div id=''printarea''>
<p>This is a sample text for printing purpose.</p>
<input type=''button'' id=''btn'' value=''Print'' onclick=''printFunc();''>
</div>
<p>Do not print.</p>
Javascript:
function printFunc() {
var divToPrint = document.getElementById(''printarea'');
var htmlToPrint = '''' +
''<style type="text/css">'' +
''table th, table td {'' +
''border:1px solid #000;'' +
''padding;0.5em;'' +
''}'' +
''</style>'';
htmlToPrint += divToPrint.outerHTML;
newWin = window.open("");
newWin.document.write("<h3 align=''center''>Print Page</h3>");
newWin.document.write(htmlToPrint);
newWin.print();
newWin.close();
}
Puede usar esto: http://vikku.info/codesnippets/javascript/print-div-content-print-only-the-content-of-an-html-element-and-not-the-whole-document/
O use visibility:visible y visibility:hidden propiedad css visibility:hidden junto con @media print{}
''display: none'' ocultará todos los ''display: block'' anidados. Eso no es solución.
Realmente no me gustó ninguna de estas respuestas en su conjunto. Si tiene una clase (digamos printableArea) y la tiene como hijo inmediato del cuerpo, entonces puede hacer algo como esto en su CSS de impresión:
body > *:not(.printableArea) {
display: none;
}
//Not needed if already showing
body > .printableArea {
display: block;
}
Usar la visibilidad puede causar muchos problemas de espacio y páginas en blanco. Esto se debe a que la visibilidad mantiene el espacio de los elementos, solo lo hace oculto, mientras que la pantalla lo elimina y permite que otros elementos ocupen su espacio.
La razón por la que esta solución funciona es que no estás agarrando todos los elementos, solo los hijos inmediatos del cuerpo y ocultándolos. Las otras soluciones a continuación con pantalla css, ocultan todos los elementos, lo que afecta todo dentro del contenido de PrintableArea.
No sugeriría javascript, ya que necesitaría tener un botón de impresión en el que el usuario haga clic y los botones de impresión estándar del navegador no tendrían el mismo efecto. Si realmente necesita hacer eso, lo que haría es almacenar el html del cuerpo, eliminar todos los elementos no deseados, imprimir y luego agregar el html nuevamente. Sin embargo, como se mencionó, evitaría esto si pudiera y usaría una opción de CSS como la anterior.
NOTA: Puede agregar cualquier CSS en el CSS de impresión usando estilos en línea:
<style type="text/css">
@media print {
//styles here
}
</style>
O como uso habitualmente es una etiqueta de enlace:
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
Recogí el contenido con JavaScript y creé una ventana que podía imprimir en su lugar ...
Si solo desea imprimir este div, debe usar la instrucción:
@media print{
*{display:none;}
#mydiv{display:block;}
}
Tenía varias imágenes, cada una con un botón, y necesitaba hacer clic en un botón para imprimir cada div con una imagen. Esta solución funciona si tengo deshabilitado el caché en mi navegador, y el tamaño de la imagen no cambia en Chrome:
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
w = window.open();
w.document.write(printContents);
w.document.write(''<scr'' + ''ipt type="text/javascript">'' + ''window.onload = function() { window.print(); window.close(); };'' + ''</sc'' + ''ript>'');
w.document.close(); // necessary for IE >= 10
w.focus(); // necessary for IE >= 10
return true;
}
<div id="printableArea">
<h1>Print me</h1>
</div>
<input type="button" onclick="printDiv(''printableArea'')" value="print a div!" />
Tengo una mejor solución con un código mínimo.
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!" />
Luego, agregue un evento como un clic (como se muestra arriba), y pase el id del div como lo hice arriba.
Ahora vamos a crear 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;
}
Observe lo simple que es esto? Sin ventanas emergentes, sin ventanas nuevas, sin estilos locos, sin bibliotecas JS como jquery. El problema con soluciones realmente complicadas (la respuesta no es complicada y no a lo que me refiero) es el hecho de que NUNCA se traducirá en todos los navegadores, ¡nunca! Si desea hacer que los estilos sean diferentes, haga lo que se muestra en la respuesta marcada agregando el atributo de medios a un enlace de hoja de estilo (medios = "imprimir").
Sin pelusa, ligero, simplemente funciona.
Todas las respuestas hasta ahora son bastante defectuosas, ya sea que incluyen agregar class="noprint" a todo o desordenan la display dentro de #printable .
Creo que la mejor solución sería crear una envoltura alrededor de las cosas no imprimibles:
<head>
<style type="text/css">
#printable { display: none; }
@media print
{
#non-printable { display: none; }
#printable { display: block; }
}
</style>
</head>
<body>
<div id="non-printable">
Your normal page contents
</div>
<div id="printable">
Printer version
</div>
</body>
Por supuesto, esto no es perfecto, ya que implica mover cosas en tu HTML un poco ...
Un acercamiento más sin afectar la página actual y también se mantiene el css durante la impresión. Aquí el selector debe ser específico div selector que contenido necesitamos imprimir.
printWindow(selector, title) {
var divContents = $(selector).html();
var $cssLink = $(''link'');
var printWindow = window.open('''', '''', ''height='' + window.outerHeight * 0.6 + '', width='' + window.outerWidth * 0.6);
printWindow.document.write(''<html><head><h2><b><title>'' + title + ''</title></b></h2>'');
for(var i = 0; i<$cssLink.length; i++) {
printWindow.document.write($cssLink[i].outerHTML);
}
printWindow.document.write(''</head><body >'');
printWindow.document.write(divContents);
printWindow.document.write(''</body></html>'');
printWindow.document.close();
printWindow.onload = function () {
printWindow.focus();
setTimeout( function () {
printWindow.print();
printWindow.close();
}, 100);
}
}
Aquí se proporciona un tiempo de espera para mostrar que los CSS externos se aplican a él.
Use una hoja de estilo especial para imprimir
<link rel="stylesheet" href="print.css" type="text/css" media="print" />
y luego agregue una clase, es decir, "noprint" a cada etiqueta cuyo contenido no desee imprimir.
En el uso de CSS
.noprint {
display: none;
}
hm ... use el tipo de una hoja de estilo para imprimir ... por ejemplo:
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
print.css:
div { display: none; }
#yourdiv { display: block; }
printDiv (divId) : una solución generalizada para imprimir cualquier div en cualquier página.
Tuve un problema similar pero quería (a) poder imprimir toda la página, o (b) imprimir cualquiera de varias áreas específicas. Mi solución, gracias a gran parte de lo anterior, le permite especificar cualquier objeto div para imprimir.
La clave para esta solución es agregar una regla apropiada a la hoja de estilo del medio de impresión para que se imprima el div (y su contenido) solicitado.
Primero, cree el css de impresión necesario para suprimir todo (pero sin la regla específica para permitir el elemento que desea imprimir).
<style type="text/css" media="print">
body {visibility:hidden; }
.noprintarea {visibility:hidden; display:none}
.noprintcontent { visibility:hidden; }
.print { visibility:visible; display:block; }
</style>
Tenga en cuenta que he añadido nuevas reglas de clase:
- noprintarea le permite suprimir la impresión de elementos dentro de su división, tanto el contenido como el bloque.
- noprintcontent le permite suprimir la impresión de elementos dentro de su división: se suprime el contenido pero el área asignada se deja vacía.
- imprimir le permite tener elementos que aparecen en la versión impresa pero no en la página de la pantalla. Estos normalmente tendrán "display: none" para el estilo de pantalla.
Luego inserte tres funciones de JavaScript. El primero simplemente activa y desactiva la hoja de estilo del soporte de impresión.
function disableSheet(thisSheet,setDisabled)
{ document.styleSheets[thisSheet].disabled=setDisabled; }
El segundo hace el trabajo real y el tercero se limpia después. El segundo (printDiv) activa la hoja de estilo del soporte de impresión, luego agrega una nueva regla para permitir que se imprima el div deseado, emite la impresión y luego agrega un retraso antes de la limpieza final (de lo contrario, los estilos se pueden restablecer antes de que se imprima) hecho.)
function printDiv(divId)
{
// Enable the print CSS: (this temporarily disables being able to print the whole page)
disableSheet(0,false);
// Get the print style sheet and add a new rule for this div
var sheetObj=document.styleSheets[0];
var showDivCSS="visibility:visible;display:block;position:absolute;top:30px;left:30px;";
if (sheetObj.rules) { sheetObj.addRule("#"+divId,showDivCSS); }
else { sheetObj.insertRule("#"+divId+"{"+showDivCSS+"}",sheetObj.cssRules.length); }
print();
// need a brief delay or the whole page will print
setTimeout("printDivRestore()",100);
}
Las funciones finales eliminan la regla agregada y establecen el estilo de impresión nuevamente en deshabilitado para que se pueda imprimir toda la página.
function printDivRestore()
{
// remove the div-specific rule
var sheetObj=document.styleSheets[0];
if (sheetObj.rules) { sheetObj.removeRule(sheetObj.rules.length-1); }
else { sheetObj.deleteRule(sheetObj.cssRules.length-1); }
// and re-enable whole page printing
disableSheet(0,true);
}
Lo único que debe hacer es agregar una línea a su procesamiento de carga para que el estilo de impresión se desactive inicialmente, lo que permite la impresión de toda la página.
<body onLoad=''disableSheet(0,true)''>
Luego, desde cualquier lugar de su documento, puede imprimir un div. Simplemente emita printDiv ("thedivid") desde un botón o lo que sea.
Una gran ventaja de este enfoque es que proporciona una solución general para imprimir contenido seleccionado desde una página. También permite el uso de estilos existentes para los elementos que se imprimen, incluido el div que contiene.
NOTA: En mi implementación, esta debe ser la primera hoja de estilo. Cambie las referencias de la hoja (0) al número de hoja adecuado si necesita hacerlo más adelante en la secuencia de la hoja.
<script type="text/javascript">
function printDiv(divId) {
var printContents = document.getElementById(divId).innerHTML;
var originalContents = document.body.innerHTML;
document.body.innerHTML = "<html><head><title></title></head><body>" + printContents + "</body>";
window.print();
document.body.innerHTML = originalContents;
}
</script>