Imprimit el contenido de un DIV

elsoba · #1 (**permalink**) 30/12/2010, 09:29

Hola,

He estado buscando durante un tiempo una forma de imprimir el contenido de un DIV que tengo dentro una página web, y si bien aquí he encontrado como hacerlo, se me ha presentado un problema que creo nadie ha planteado.

El DIV en el cual se encuentra el contenido que deseo imprimir tiene como parámetros height:200px y overflow:auto para forzar el scroll ya que su contenido es mayor.

Ahora bien el problema se presenta al intentar imprimir su contenido ya que sólo se imprime lo que llega a verse de esos 200px quedando fuera de la impresión lo que supera esa altura.

Quisiera saber si existe alguna manera de lograr que se imprima todo el contenido.

Aquí debajo les dejo un ejemplo del código que estoy utilizando.

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<style type="text/css">
@media print {
    div,a {display:none}
    .ver {display:block}
    .nover {display:none}
}
</style>
 
<script>
function impre(num) {
    document.getElementById(num).className="ver";
    print();
    document.getElementById(num).className="nover";
}
</script>
 
</head>
 
 
 
<body>
 
<div id="uno">Barra de menús</div>
<a href="#" onclick="impre('uno');return false">Imprime 1</a>
 
<div id="dos" style="width:500px; height:200px; overflow:auto;">
    <p>Imprimir este documento</p>
    <p>Imprimir este documento</p>
    <p>Imprimir este documento</p>
    <p>Imprimir este documento</p>
    <p>Imprimir este documento</p>
    <p>Imprimir este documento</p>
    <p>Imprimir este documento</p>
    <p>Imprimir este documento</p>
    <p>Imprimir este documento</p>
    <p>Imprimir este documento</p>
    <p>Imprimir este documento</p>
    <p>Imprimir este documento</p>
    <p>Imprimir este documento</p>
    <p>Imprimir este documento</p>
    <p>Imprimir este documento</p>
    <p>Imprimir este documento</p>
    <p>Imprimir este documento</p>
    <p>Imprimir este documento</p>
</div>
<a href="#" onclick="impre('dos');return false">Imprime 2</a>
 
</body>
</html>

Perr0 · #2 (**permalink**) 30/12/2010, 11:24

Prueba con esto!!

salu2

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<style type="text/css">
@media print {
    a {display:none}
    
    .formatoprint{
        width:auto;
        height:auto;
        overflow:hidden;
    }
}
 
@media screen {
    .formatodoc{
        width:500px;
        height:200px;
        overflow:auto;
    }
}
</style>
 
<script>
function impre() {
    print();
}
</script>
 
</head>
 
 
 
<body>
 
<div id="uno">Barra de menús</div>
<a href="#" onclick="impre();return false">Imprime 1</a>
 
<div id="dos" class="formatodoc formatoprint">
    <p>Imprimir este documento Linea 1</p>
    <p>Imprimir este documento Linea 2</p>
    <p>Imprimir este documento Linea 3</p>
    <p>Imprimir este documento Linea 4</p>
    <p>Imprimir este documento Linea 5</p>
    <p>Imprimir este documento Linea 6</p>
    <p>Imprimir este documento Linea 7</p>
    <p>Imprimir este documento Linea 8</p>
    <p>Imprimir este documento Linea 9</p>
    <p>Imprimir este documento Linea 10</p>
    <p>Imprimir este documento Linea 11</p>
    <p>Imprimir este documento Linea 12</p>
    <p>Imprimir este documento Linea 13</p>
    <p>Imprimir este documento Linea 14</p>
    <p>Imprimir este documento Linea 15</p>
    <p>Imprimir este documento Linea 16</p>
    <p>Imprimir este documento Linea 17</p>
    <p>Imprimir este documento Linea 18</p>
    <p>Imprimir este documento Linea 19</p>
    <p>Imprimir este documento Linea 20</p>
</div>
<a href="#" onclick="impre();return false">Imprime 2</a>
 
</body>
</html>

elsoba · #3 (**permalink**) 30/12/2010, 12:52

Muchas gracias Perro, el código funciona bárbaro, salvo que también se imprime el contenido del DIV "uno" y quisiera que no se pueda imprimir, porque allí iria un encabezado que no debe formar parte de la impresión.

Si pudieras darme una mano con esto te lo agredesería muchisimo.

Saludos

Perr0 · #4 (**permalink**) 30/12/2010, 13:20

Cita:

Iniciado por elsoba

Muchas gracias Perro, el código funciona bárbaro, salvo que también se imprime el contenido del DIV "uno" y quisiera que no se pueda imprimir, porque allí iria un encabezado que no debe formar parte de la impresión.

Si pudieras darme una mano con esto te lo agredesería muchisimo.

Saludos

deberias reemplazar

Código CSS:

Ver originala {display:none}

por

Código CSS:

Ver originala,#uno {display:none}

modifique algunas cosas que estaba demas por ello el cambio, comparalo con tu anterior por la parte estilos...

salu2