Botón que imprima solo parte de una página web.

Clicker · #1 (**permalink**) 23/03/2004, 13:33

Hola muchachos. Una pregunta que me tiene medianamente loco hace un tiempo.

Imaginemos que tengo esto en una misma página de un sitio web:

---------------

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut at enim. Nam rutrum ullamcorper quam. Ut et velit nec tortor facilisis fringilla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Cras vel felis. Curabitur iaculis lacus at mi. Nam luctus. Phasellus sit amet felis non elit mollis tincidunt. Nam commodo neque tincidunt sapien. Nulla facilisi. Sed aliquam neque eget velit. Duis sit amet mauris. Vestibulum eu justo. Nullam consectetuer auctor metus. Cras placerat. Suspendisse ac sem non eros volutpat fermentum. Phasellus feugiat sapien et arcu.

[imprimir artículo]

Consectetuer adipiscing elit.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut at enim. Nam rutrum ullamcorper quam. Ut et velit nec tortor facilisis fringilla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Cras vel felis. Curabitur iaculis lacus at mi. Nam luctus. Phasellus sit amet felis non elit mollis tincidunt. Nam commodo neque tincidunt sapien. Nulla facilisi. Sed aliquam neque eget velit. Duis sit amet mauris. Vestibulum eu justo. Nullam consectetuer auctor metus. Cras placerat. Suspendisse ac sem non eros volutpat fermentum. Phasellus feugiat sapien et arcu.

[imprimir artículo]

------------

En la página original, el "[imprimir artículo]" tiene el siguiente código:

<a href="#" onClick="window.print();return false">

Y funciona perfectamente si se trata de imprimir la página entera (es decir, ambos artículos).

Ahora, la pregunta es: ¿cómo hago para que al hacer click en "[imprimir artículo]" solo se imprima el artículo correspondiente, es decir un solo artículo (el que se encuentra encima del botón "[imprimir artículo]".

Cabe decir que podría hacerlo usando HTML o Java, más no PHP u otro lenguaje, pues no lo conozco. Ahora, si necesariamente tuviese que ser en PHP u otro lenguaje y me pueden detallar cómo hacerlo, les estaré eternamente agradecido.

Muchas gracias de antemano...!

Clicker.

caricatos · #2 (**permalink**) 23/03/2004, 14:22

Hola Clicker:

Con html y un poquito de javascript tiene que ser suficiente.

Puedes crear una ventana emergente con lo que quieres que se imprima y luego cerrarla...

Si el link o botón para imprimir tiene que referenciar a una capa con id=articulo001 (por ejemplo) te serviría algo así:

<a href="javascript: imprimir('articulo001')">[imprimir artículo]</a>

y la funcioncita javascript...

function imprimir(articulo) {
var ventana = window.open("", "", "");
var contenido = "<html><body>" + document.getElementById(articulo).innerHTML + "</body></html>";
ventana.write(contenido);
ventana.print();
setTimeout('ventana.close()', 1000);
return true;
}

Lo puse sin hacer pruebas, pero en teoría tiene que funcionar.
Lo del setTimeout tal vez no sea necesario

Saludos

Clicker · #3 (**permalink**) 23/03/2004, 15:12

Hola Caricatos, muchas gracias por tu ayuda y por tomarte unos minutos para darme detalles, eres muy amable y se agradece de verdad.

Un abrazo.

Clicker.

JavierB · #4 (**permalink**) 24/03/2004, 06:53

Hola, Clicker.

Prueba este código que creo que te puede servir:

Código PHP:

  <html>

<head>

<style>

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

Artículo primero

</div>

<a href="#" onclick="impre('uno');return false">Imprime 1</a>

<div id="dos">

Artículo segundo

</div>

<a href="#" onclick="impre('dos');return false">Imprime 2</a>

<div id="tres">

Articulo tercero

</div>

<a href="#" onclick="impre('tres');return false">Imprime 3</a>

</body>

</html>

Saludos,

tunait · #5 (**permalink**) 24/03/2004, 10:27

Excelente la propuesta, JavierB

Traslado el tema al foro de javascript.

movido desde html

saludos