Imprimir el contenido de un DIV que mantenga los estilos

tranquilo_8925 · #1 (**permalink**) 08/02/2013, 09:26

Tengo el siguiente código o script que me imprime los datos que están dentro de un DIV: Este DIV se llama muestra.

Código PHP:

Ver original<script type="text/javascript">
function imprSelec(muestra)
{
var ficha=document.getElementById(muestra);
var ventimp=window.open(' ','popimpr');
ventimp.document.write(ficha.innerHTML);
ventimp.document.close();
ventimp.print();
ventimp.close();
}
</script>

Funciona muy bien, pero lo malo es que los formatos texto que tiene, como por ejemplo, tamaño de letra, color, negrita o cursiva, no los considera y a la hora de imprimir todo lo imprime de COLOR NEGRO y del MISMO TAMAÑO DE LETRA.

Que puedo hacer para que a la hora de imprimir salga con los mismos estilos que tiene la página.

La última. Dentro del DIV tengo un button. ¿ES POSIBLE OCULTAR ESE BUTTON PERO SOLO PARA LA IMPRESIÓN?. NO DESEO QUE EN LA IMPRESIÓN SE VEA ESE BOTÓN QUE DICE: "ACTUALIZACIÓN DE DATOS"?.

Me olvidada, tengo un button2 que manda a la impresión el código script que esta arriba, este button2 esta fuera del DIV

Muchas gracias Anticipadas ...

vosk · #2 (**permalink**) 09/02/2013, 08:44

Cuando creas una nueva ventan no hereda los estilos del parent: por defecto te crea un arbol de etiquetas vacio al que puedes añadir 'cosas', y una de las cosas que debes añadir para aplicar estilos es un "link rel=styesheet" o un bloque de estilos

Código:

var ventimp=window.open(' ','popimpr');
ventimp.document.close();

var css = ventimp.document.createElement("link");
css.setAttribute("href", "estilo.css");
css.setAttribute("rel", "stylesheet");
css.setAttribute("type", "text/css");
ventimp.document.head.appendChild(css);

Solo una cosa: el appendChild funciona cuando has cerrado el arbol de tags, en el codigo cierras con 'document.close()', luego puedes añadir (modificar, quitar) lo que quieras.

Y lo otro, puedes jugar con el atributo 'media' del tag link, haces un css para display que lo tendras en la pagina normal y otro para print en el que p.ej. todos los botones pueden estar ocultos

Código:

//estilo_print.css
BUTTON {
    display:none;
}

//en la funcion imprSelec
var css = ventimp.document.createElement("link");
css.setAttribute("href", "estilo_print.css");
css.setAttribute("rel", "stylesheet");
css.setAttribute("type", "text/css");
css.setAttribute("media", "print");
ventimp.document.head.appendChild(css);

En la nueva pagina puedes poner dos link rel, uno con media=display para que el usuario vea lo que se va a imprimir, y otro con print que será el formato que saldra por la impresora.

No se si hay algo en css para que desde dentro de un mismo css se pueda orientar los estilos a diferentes media

Saludos
vosk

tranquilo_8925 · #3 (**permalink**) 09/02/2013, 20:18

Muchas gracias VOSK, por tu respuesta. He intentado poner el código dentro del que tengo pero no consigo que funcione. En algunos casos no me funciona nada.

Lo del button que deseo ocultar tampoco lo he podido hacer.

La verdad soy novato en esto y me falta mucho por aprender. Nuevamente Gracias VOSK por tu ayuda. Gracias a ti y a muchos que ayudan en este Foro estoy aprendiendo ...

vosk · #4 (**permalink**) 10/02/2013, 06:29

"...en este Foro estoy aprendiendo..."

Creo que hablo en nombre de todos si digo que yo tambien :)

En algunos casos no te funciona... por que? Que navegador usas? Que errores te marca el depurador de errores del navegador?

Bueno, una cosa que acabo de ver: en mi post anterior te comente que para ocultar todos los botones bastaba con BUTTON {display:none;}, es incorrecto, obvié que los input button se llaman button y si lo usaste tal cual puede que ese sea el error (no existe el objeto button). Si acaso le das un id o un class y le asignas los estilos

Código:

//estilo_normal.css
#boton_imprimir {
    color:#0000ff;//p.ej., aqui aplicas los estilos necesarios o no aplicas ninguno, lo que convenga
}


//estilo_imprimir.css
//este archivo es una copia exacta del estilo_normal.css y al final le añades el estilo para ocultar los botones
#boton_imprimir {
    display:none;
}


//pagina.html
<html>
    <head>
        <!--
            En la pagina normal le asignas el css normal, con los botones visibles
        -->
        <link rel="stylesheet" type="text/css" href="estilo_normal.css">
        <script>
            /*
                Aqui va la funcion imprSelec, con la creacion dinaminca de la etiqueta link rel donde le asignas la hoja de estilos modificada para ocultar los botones
            */
        </script>
    </head>
    <body>
        <div id="muestra">
            Texto del div a imprimir
            <input type="button" id="boton_imprimir" value="Print" onClick="imprSelec(el_argumento_necesario);">
        </div>
    </body>
</html>

Saludos
vosk

tranquilo_8925 · #5 (**permalink**) 12/02/2013, 07:39

Muchas gracias VOSK, recién escribo porque he estado haciendo arreglos con el código que me has enviado pero no consigo hacerlo. Lo he probado con Explorer, Chrome, Firefox, pero nada. No creo que sea el navegador. Bueno mejor te lo paso a graficar:

En la siguiente imagen lo que esta encerrado en el cuadro de color rojo es lo que esta dentro del DIV que se llama "muestra". Como vez hay dos botones. El que esta dentro del DIV que me sirve para actualizar los datos, y esta allí porque también hay un FORM para poder Modificar las notas.

Después de Modificar los datos el docente puede imprimir los datos de esa asignatura y aula y allí es donde esta el problema porque cuando le doy clic en Imprimir Datos, sale una nueva ventana pero los formatos de texto no son iguales a la página de actualización y además el botón Guardar Cambios no lo puedo ocultar. Si imprime pero como lo vemos en la siguiente imagen:

Gracias por entender. Si escribo en este foro es porque todas las veces que lo hice me dieron respuestas satisfactorias ... Muchas gracias por tu ayuda y de todos los que les interese el tema. Además les queda para los que tengan el mismo problema ...

vosk · #6 (**permalink**) 12/02/2013, 12:41

Tendría que funcionar.

Haz las comprovaciones de error habituales (esto te sirve para este caso y para cualquier otro con el que vuelvas a encontrarte): en firefox haz click derecho sobre 'Semestre academico' (en la ventana lista para imprimir) y del menu contextual selecciona 'inspeccionar elemento' (ojo, no es lo mismo que ver el codigo fuente aunque tambien veas el codigo fuente), habilita el modo 'estilo' (abajo a la derecha al lado de vista 3d) para ver el estilo que se aplica sobre esa frase, tendria que tener como minimo color rojo y tal vez negrita ok? El primer campo son los estilos declarados directamente sobre el elemento, los demas son los heredados desde la hoja de estilos del documento y que se aplican sobre ese elemento seleccionado.

En caso que en la comprovacion anterior no te salga ningun estilo aplicado (ni directo ni heredado de la hoja), comprueba que has asignado correctamente la nueva hoja de estilos. Para eso abres otra vez el 'inspeccionar elemento' y en la vista central repliegas el codigo hasta el comienzo, donde deberian estas las etiquetas de head y el link rel para la hoja. Asegurate que existen y que la ruta del *.css es correcta.

En el caso que la comprovacion anterior no te saliera ningun link rel, tienes que comprovar el script que abre la ventana. Vas a la ventana con el documento original, abres el depurador de errores (varia en cada navegador, en ff herramientas/desarrollador/consola de errores, limpias el contenido, recargas la pagina y pinchas en imprimir, luego vas otra vez al depurador de errores y tendria que salir algun error. Lo solucionas o lo comentas en el foro y listo.

En el caso que la comprovacion anterior no te saliera ningun error, vas al script que abre la nueva ventana y te aseguras que tienes las instrucciones en el orden necesario: recoger contenido, abrir ventana, escribir contenido, cerrar documento, crear etiqueta linkrel, asignar etiqueta al documento cerrado, imprimir y cerrar ventana. Si no lo tienes en este orden corriges y listo.

En caso que la comprovacion anterior estuviera todo en orden, no tengo ni idea de que sucede; si acaso di que estas resfriado y no vayas al trabajo :)

Saludos
vosk