¿Imprimir <div id = "printarea"> </div> solamente?

444

¿Cómo imprimo el div indicado (sin deshabilitar manualmente el resto del contenido de la página)?

Quiero evitar un nuevo cuadro de diálogo de vista previa, por lo que no es útil crear una nueva ventana con este contenido.

La página contiene un par de tablas, una de ellas contiene el div que quiero imprimir: la tabla está diseñada con estilos visuales para la web, que no deberían mostrarse en forma impresa.

javascript css printing dhtml noesgard
fuente

1

stackoverflow.com/questions/2255291/… este enlace funciona perfecto

Jinna Balu

792

Aquí hay una solución general, usando 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 displayes complicado porque si algún elemento tiene display:noneninguno de sus descendientes se mostrará tampoco. Para usarlo, debes cambiar la estructura de tu página.

El uso visibilityfunciona mejor ya que puede activar la visibilidad para los descendientes. Sin embargo, los elementos invisibles aún afectan el diseño, por lo que me muevo section-to-printhacia la parte superior izquierda para que se imprima correctamente.

Bennett McElwee
fuente

21

esta es, con mucho, la forma más rápida y limpia, me pregunto por qué esta respuesta no obtuvo la mayor cantidad de votos.

Dany Khalife

34

Un problema a tener en cuenta con esta solución es que puede terminar imprimiendo miles de páginas en blanco en algunos casos. En mi caso, pude resolver esto usando una pantalla adicional: ninguno de los estilos para los elementos seleccionados, pero tal vez se pueda lograr una solución más general mediante una combinación de alturas forzadas, desbordamiento: ninguno y posicionamiento absoluto para todos los divs o algo así.

Malcolm MacLeod

55

Este es un gran comienzo, pero tuve dos problemas con él: por ejemplo, si alguno de los padres del elemento estableciera su propio posicionamiento relativo / absoluto, el contenido aún se compensaría a menos que lo utilizara position:fixed. Sin embargo, Chrome y Safari también truncarían el contenido, especialmente después de la primera página. Así que mi solución final fue establecer el objetivo y todos sus padres paraoverflow:visible; position:absolute !important; top:0;left:0

natevw

1

@ dudeNumber4 #section-to-printcoincide con la sección misma; #section-to-print *coincide con cada subelemento de la sección. Entonces esa regla solo hace que la sección y todos sus contenidos sean visibles.

Bennett McElwee

3

Puede probar una solución de JavaScript, pero eso no funcionará si su usuario usa el comando Imprimir del navegador.

Bennett McElwee

243

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 onclick (como se muestra arriba) y pase la identificación del div como lo hice anteriormente.

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;
}

¿Te das cuenta de lo simple que es esto? Sin ventanas emergentes, sin ventanas nuevas, sin estilo loco, sin bibliotecas JS como jquery. El problema con las soluciones realmente complicadas (la respuesta no es complicada y no es a lo que me refiero) es el hecho de que NUNCA se traducirá en todos los navegadores. 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 estilos (medios = "imprimir").

Sin pelusa, liviano, simplemente funciona.

Kevin Florida
fuente

@Kevin Intento esto para el formulario, pero imprime un formulario vacío (sin datos) y necesito un formulario completo para imprimir antes de enviarlo

Arif

98

@asprin advertencia! Este no es un código libre de desorden. Usar innerHTML para borrar y luego recrear todo el cuerpo está bien para páginas simples, pero con personalizaciones más avanzadas (menús, presentaciones de diapositivas, etc.) podría borrar algunos comportamientos dinámicos agregados por otros scripts.

Christophe

17

Esta solución no funcionará en ninguna página compleja donde los elementos en el área imprimible dependan de los estilos y / o la posición de los elementos principales. Si extrae el div imprimible, puede parecer totalmente diferente porque ahora faltan todos los padres.

Andrei Volgin

1

Lamentablemente no funciona bien en Chrome si cierra la ventana Vista previa de impresión y luego intenta hacer una jQuery .click. Es una pena, porque el código es muy ligero.

rybo111

3

@BorisGappov, un ejemplo muy simple con un evento de un solo clic para probar mi punto: jsfiddle.net/dc7voLzt Lo diré de nuevo: ¡este no es un código sin desorden! El problema no es con la impresión en sí, ¡se trata de restaurar la página original!

Christophe

121

Todas las respuestas hasta el momento son bastante defectuosos - o bien implican la adición class="noprint"a todo, o se hace un lío hasta displaydentro #printable.

Creo que la mejor solución sería crear un contenedor alrededor del material no imprimible:

<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 un poco las cosas en su HTML ...

Greg
fuente

Creo que tienes razón, pero ¿cómo elimino el estilo de la tabla que rodea el div (si eso es posible eliminar el estilo, puedo imprimir la tabla y excluir el resto del contenido con bastante facilidad

Noesgard el

Yo uso Javascript para recoger el contenido necesario y el CSS como el anterior

noesgard 03 de

99

Prefiero usar HTML semántico. El formato de impresión debería ser manejado idealmente por CSS. Vea mi respuesta sobre cómo hacer esto: stackoverflow.com/questions/468881/…

Bennett McElwee

De acuerdo con Bennett, usar la visibilidad en lugar de la pantalla es una solución mucho más limpia

guigouz

Hice una solución realmente simple en la parte inferior de este hilo, que creo que se adaptará mejor a las necesidades del autor. No se basa en una hoja de estilo de impresión, puede reciclarse en todo su sitio web y es increíblemente liviano.

Kevin Florida

108

Con jQuery es tan simple como esto:

w=window.open();
w.document.write($('.report_left_inner').html());
w.print();
w.close();

romaninsh
fuente

3

Esto es bastante bueno, aunque aparece en Chrome como una ventana emergente bloqueada.

Rafi Jacoby

8

el truco es llamarlo en un evento generado por el usuario, como al hacer clic con el mouse. también puede agregar después de la primera línea: if (! w) alert ('Por favor, active las ventanas emergentes');

romaninsh

1

¿Alguien tiene esto trabajando en IE11? Simplemente abre una ventana y luego la cierra de inmediato. Sin embargo, funciona en Chrome, FF y safari.

greatwitenorth

3

Perdí el CSS al imprimir con esto, ¿hay alguna forma de mantener CSS?

Moxet Khan

2

@MoxetKhan, esta publicación tiene una solución con css vevlo.com/how-to-print-div-content-using-javascript

lakesare

22

¿Podría usar una hoja de estilo de impresión y CSS para organizar el contenido que desea imprimir? Lea este artículo para obtener más sugerencias.

Paul Dixon
fuente

Tengo una hoja de estilos de impresión - tratar de evitar poner una regla de estilo en el resto del contenido ...

noesgard

Tengo una tabla con estilo, contactando el div en cuestión. Si configuro la tabla para mostrar: ninguna, ¿puedo mostrar el div?

noesgard el

Creo que sí, ¡y podrías intentar marcar la regla como importante para impulsarla!

Paul Dixon el

Si la tabla no se muestra, no importará incluso si el div está configurado como 'display: awesome; El padre está oculto y también lo están los hijos. ¿Es esta una situación en la que necesita una tabla o es solo para el diseño de la página?

roborourke

"¡Boom, tiro en la cabeza!" por diseños de mesa. = |

ANeves

19

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". "display" no lo hará. Probado en FF3.

Christian Maioli M.
fuente

15

Realmente no me gustó ninguna de estas respuestas en su conjunto. Si tiene una clase (por ejemplo, printableArea) y la tiene como un elemento secundario inmediato del cuerpo, 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;
}

Para aquellos que buscan printableArea en otro lugar, deben asegurarse de que se muestren los padres de printableArea:

body > *:not(.parentDiv),
.parentDiv > *: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, simplemente lo oculta, 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 display css, ocultan todos los elementos, lo que afecta todo el contenido del área imprimible.

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 volver a agregar el html. Sin embargo, como se mencionó, evitaría esto si puedes y usar una opción CSS como la anterior.

NOTA: Puede agregar cualquier CSS al CSS de impresión utilizando estilos en línea:

<style type="text/css">
@media print {
   //styles here
}
</style>

O como usualmente uso es una etiqueta de enlace:

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

fanfavorite
fuente

¿Qué sucede si el div que desea imprimir no es "un hijo inmediato del cuerpo"? Estoy tratando de hacer esto en vue.js .. Pero obtengo muchas páginas en blanco cuando uso la respuesta aceptada.

Svenema

@svenema, puede usar cualquier CSS que desee. Esto fue solo un ejemplo.

fanfavorite

hmm, aún así, cuando intento esto, en realidad no hay páginas en blanco adicionales, pero el printableArea div tampoco se muestra; Solo tengo 1 página en blanco vacía cuando uso este código.

svenema

Descubrí que es realmente porque el printableArea div no es un hijo directo de la etiqueta del cuerpo, cuando lo convierto en un hijo directo, su solución funciona; sin embargo, en mi caso no puedo hacer que el área imprimible sea un hijo directo. ¿Hay alguna forma de evitar esto?

svenema

@svenema, mira mi edición arriba.

fanfavorite

8

Proporcione el elemento que desee para imprimir la identificación 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>

Jason Plank
fuente

Este es un buen trabajo. Pero es demasiado complicado y no funcionará correctamente entre navegadores (especialmente los navegadores más antiguos). Le sugiero que eche un vistazo a mi solución a continuación.

Kevin Florida

6

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; }

Andreas Niedermair
fuente

Esto no funcionará si el documento no está basado en DIV o #yourdiv también incluye más DIV.

Gumbo

#yourdiv * {display: ...} si coloca esto en la parte superior de la página y tiene un navegador actualizado, puede trabajar con más selectores para ocultar los no divs

Andreas Niedermair

"#yourdiv * {display: ...}": ¿qué debería ser ... sin romper el diseño?

Greg

Esto mostraría elementos en línea también como elementos de bloque. Pero "#yourdiv, #yourdiv div {display: block}" lo hará.

Gumbo

@dittodhole: piénsalo un minuto. ¿Qué podrías poner allí que no rompa el diseño dentro de #yourdiv?

Greg

6

<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>

Dilip Kr Singh
fuente

66

se ve bien pero pierde todos los enlaces de JavaScript y otros después de la impresión

Julien

1

Se imprime sin css.

Moxet Khan

6

Paso 1: escriba el siguiente javascript dentro de su 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>

Hardik Thaker
fuente

¡Éste es el indicado! Lo usé para un modal y galerías. No hay errores de Javascript después del cierre. Realmente útil, especialmente cuando usas modales que son más largos que una página. Muy bien lo envuelve. Perfecto para personas que quieren imprimir en la tienda.

TheWeeezel

2

Con CSS 3 puede usar lo siguiente:

body *:not(#printarea) {
    display: none;
}

Gumbo
fuente

No puedo usar eso, me temo ... (corríjame si está equivocado) la página en la que estoy trabajando es asp.net 1.1 / DHTML

noesgard

Depende del navegador si el selector: not () ya está disponible o no.

Gumbo

Bueno, entonces mi propuesta es solo una mirada al futuro ... No, en serio. Lo acabo de mencionar por completo. Sé que no es factible en este momento. Desafortunadamente.

Gumbo

Podría usar jQuery y este selector que (creo) funcionaría en IE6 - $ ('body *: not (#printarea)'). Style ('display', 'none');

David Heggie el

2

esto ocultará a todos los descendientes de #printarea, ya que se corresponden con *: not (#printarea). Entonces, básicamente, terminas con un contenedor vacío.

cytofu

2

Recogí el contenido usando JavaScript y creé una ventana que podía imprimir en su lugar ...

noesgard
fuente

¿Puede compartir el código, tiene problemas para adoptar CSS?

Moxet Khan

2

El método de Sandro funciona muy bien.

Lo modifiqué para permitir múltiples enlaces printMe, particularmente para usar en páginas con pestañas y expandir texto.

function processPrint(printMe){ <- llamando a una variable aquí

var printReadyElem = document.getElementById(printMe); <- eliminó las comillas alrededor de printMe para pedir una variable

<a href="javascript:void(processPrint('divID'));">Print</a><- pasar la ID div a imprimir en la función para convertir la variable printMe en la ID div. se necesitan comillas simples

fuente

2

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 solicitado (y su contenido).

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 agregado nuevas reglas de clase:

noprintarea le permite suprimir la impresión de elementos dentro de su div, tanto el contenido como el bloque.
noprintcontent le permite suprimir la impresión de elementos dentro de su división; el contenido se suprime pero el área asignada se deja vacía.
print le permite tener elementos que se muestran en la versión impresa pero no en la página de la pantalla. 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 de medios impresos.

function disableSheet(thisSheet,setDisabled)
{ document.styleSheets[thisSheet].disabled=setDisabled; }

El segundo hace el trabajo real y el tercero limpia después. El segundo (printDiv) activa la hoja de estilo de medios 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 la impresión sea realmente 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 vuelven a desactivar el estilo de impresión 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);
}

La única otra cosa que debe hacer es agregar una línea a su procesamiento de carga para que el estilo de impresión se deshabilite inicialmente, permitiendo la impresión de toda la página.

<body onLoad='disableSheet(0,true)'>

Luego, desde cualquier parte 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 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 hoja (0) al número de hoja apropiado si necesita hacerlo más adelante en la secuencia de la hoja.

DrDave
fuente

2

@Kevin Florida Si tiene múltiples 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);
});

Stefan
fuente

2

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>

Raphael Monteiro
fuente

2

El mejor CSS para adaptarse a la altura del espacio vacío:

@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;
  }
}

TRI ÂN
fuente

2

La mejor manera de imprimir Div particular o cualquier elemento

printDiv("myDiv");

function printDiv(id){
        var printContents = document.getElementById(id).innerHTML;
        var originalContents = document.body.innerHTML;
        document.body.innerHTML = printContents;
        window.print();
        document.body.innerHTML = originalContents;
}

Mahetab
fuente

1

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 desea imprimir.

En el uso de CSS

.noprint {
  display: none;
}

Xn0vv3r
fuente

1

Si solo desea imprimir este div, debe usar las instrucciones:

@media print{
    *{display:none;}
    #mydiv{display:block;}
}

Jason Plank
fuente

1

La función printDiv () apareció 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 llamado "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";

}

pmrotule
fuente

Esta línea podría ser útil si desea una identificación única: printContents = printContents.replace (/ id = ("| ') (. *?) (" |') / G, 'id = $ 1 $ 2_2 $ 3');

pmrotule

1

Puede usar un estilo CSS separado que deshabilite cualquier otro contenido, excepto el que tiene la identificación "printarea".

Consulte Diseño de CSS: Ir a imprimir para obtener más explicaciones y ejemplos.

Kosi2801
fuente

Se actualizó el enlace a la nueva ubicación. Un comentario en lugar de un voto negativo hubiera sido bueno.

Kosi2801

1

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 he desactivado 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!" />

vive el amor
fuente

1

Una aproximación más sin afectar la página actual y también persiste el CSS al imprimir. Aquí el selector debe ser un selector div específico que contenido debemos 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 se aplica CSS externo.

Mukesh Kumar Suman
fuente

CSS a veces toma tiempo cargar, este enfoque es lo que estaba buscando para volver a cargar la página antes de imprimir. Gracias

Arpit Shrivastava

1

Probé muchas de las soluciones proporcionadas y ninguna funcionó a la perfección. Pierden enlaces CSS o JavaScript. Encontré una solución perfecta y fácil que no pierde enlaces CSS ni 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();
    }

BibanCS
fuente

Esta apertura y creación de otra ventana que no funciona en Android. Solo funciona window.print () directo.

Merv

1

Llego muy tarde a esta fiesta, pero me gustaría participar con otro enfoque. Escribí un pequeño módulo JavaScript llamado PrintElements para imprimir dinámicamente partes de una página web.

Funciona iterando a través de los elementos de nodo seleccionados, y para cada nodo, atraviesa el árbol DOM hasta el elemento BODY. En cada nivel, incluido el inicial (que es el nivel del nodo que se va a imprimir), adjunta una clase de marcador ( pe-preserve-print) al nodo actual. Luego adjunta otra clase de marcador ( pe-no-print) a todos los hermanos del nodo actual, pero solo si no hay ninguna pe-preserve-printclase en ellos. Como tercer acto, también une otra clase a elementos ancestrales preservados pe-preserve-ancestor.

Un css suplementario de impresión simple muerto ocultará y mostrará los elementos respectivos. Algunos de los beneficios de este enfoque es que se conservan todos los estilos, no abre una nueva ventana, no hay necesidad de moverse por muchos elementos DOM y, en general, no es invasivo con su documento original.

Vea la demostración o lea el artículo relacionado para obtener más detalles .

András Szepesházi
fuente

0

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:visibley visibility:hiddenpropiedad css junto con@media print{}

'display: none' ocultará todos los 'display: block' anidados. Eso no es solución.

0xC0DEGURU
fuente

0

Encontré la solución.

@media print {
    .print-area {
        background-color: white;
        height: 100%;
        width: auto;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index:1500;
        visibility: visible;
    }
    @page{
        size: portrait;
        margin: 1cm;
    }
/*IF print-area parent element is position:absolute*/
    .ui-dialog,
    .ui-dialog .ui-dialog-content{
        position:unset !important;
        visibility: hidden;
    }
}

usuario2573099
fuente

0

En base a la respuesta de @Kevin Florida, hice una forma de evitar que la secuencia de comandos en la página actual se desactive debido al contenido de sobrescritura. Yo uso otro archivo llamado "printScreen.php" (o .html). Envuelva todo lo que quiera imprimir en un div "printSource". Y con javascript, abra una nueva ventana que creó antes ("printScreen.php") y luego tome el contenido en "printSource" de la ventana superior.

Aquí está el código.

Ventana principal :

echo "<div id='printSource'>";
//everything you want to print here
echo "</div>";

//add button or link to print
echo "<button id='btnPrint'>Print</button>";

<script>
  $("#btnPrint").click(function(){
    printDiv("printSource");
  });

  function printDiv(divName) {
   var printContents = document.getElementById(divName).innerHTML;
   var originalContents = document.body.innerHTML;
   w=window.open("printScreen.php", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=50,left=50,width=900,height=400");
   }
</script>

Esto es "printScreen.php" - otro archivo para tomar contenido para imprimir

<head>
// write everything about style/script here (.css, .js)

</head>
<body id='mainBody'></body>
</html>


<script>
    //get everything you want to print from top window
    src = window.opener.document.getElementById("printSource").innerHTML;

    //paste to "mainBody"
    $("#mainBody").html(src);
    window.print();
    window.close();
</script>

QeiNui
fuente

¿Imprimir <div id = "printarea"> </div> solamente?

Respuestas: