funcion para imprimir un div conservando los estilos css

[jmg1189]

hola a todos

tengo una funcion para imprimir un div, esto me funciona bien, lo que no funciona es que al imprimir, no conserva los estilos css de ese archivo. Consideré que creando el link sobre la funcion llamando los estilos funcionaría, pero no es así, no me carga los estilos. alguien que por favor me ayude, tengo la siguiente funcion:

Código Javascript:

function imprimir(){ //funcion para imprimir el contenido del div = panel
            var objeto=document.getElementById('panel'); 
            var ventana=window.open('','_blank'); 
            ventana.document.write(objeto.innerHTML); 
            ventana.document.close();  
            ventana.print(); 
            ventana.close(); 
            
            link = ventana.createElement('link');
            link.setAttribute("href", "estilo_cal.css");
            link.setAttribute("rel", "stylesheet");
            link.setAttribute("type", "text/css");
            ventana.appendChild(link);
        }
 

[IsaBelM]

No es posibleya que ventana es el objeto window. Tendrás que embeber o externalizar o escribir en línea el css en la ventana abierta

[Alexis88]

Mediante una petición asíncrona (AJAX), podrías leer el contenido del archivo externo e insertarlo como contenido de un elemento <style>.

Código Javascript:

var ventana = window.open(),
    css = document.createElement("style"),
    foo = document.querySelector("#id del elemento"),
    ajax = function(url, elem, callback){
        var xhr = new XMLHttpRequest();
        xhr.open("GET", url, true);
        xhr.send();
        xhr.addEventListener("load", function(){
            if (this.status == 200){
                elem.innerHTML = this.responseText;
                callback();
            }
        }, false);
    };
 
ajax("estilos.css", css, function(){
    ventana.document.body.appendChild(css);
    ventana.document.body.appendChild(foo);
    ventana.print();
});
 

De esta manera, creamos la ventana emergente, al elemento <style>, tomamos al elemento que queremos añadir a la ventana emergente y construimos la función que realizará la petición asíncrona. A ella le pasamos la ruta del archivo externo, el elemento al cual se insertará el contenido del archivo externo y una función que se ejecutará al finalizar el proceso.

En la función, creamos una instancia al objeto XMLHttpRequest, iniciamos y ejecutamos la petición y cuando esta se haya completado y el código HTTP nos indique que el proceso fue exitoso, añadimos el contenido del archivo externo al elemento <style> y ejecutamos la llamada de retorno.

Un saludo

[jmg1189]

Iniciado por Alexis88

Mediante una petición asíncrona (AJAX), podrías leer el contenido del archivo externo e insertarlo como contenido de un elemento <style>.

Código Javascript:

var ventana = window.open(),
    css = document.createElement("style"),
    foo = document.querySelector("#id del elemento"),
    ajax = function(url, elem, callback){
        var xhr = new XMLHttpRequest();
        xhr.open("GET", url, true);
        xhr.send();
        xhr.addEventListener("load", function(){
            if (this.status == 200){
                elem.innerHTML = this.responseText;
                callback();
            }
        }, false);
    };
 
ajax("estilos.css", css, function(){
    ventana.document.body.appendChild(css);
    ventana.document.body.appendChild(foo);
    ventana.print();
});
 

De esta manera, creamos la ventana emergente, al elemento <style>, tomamos al elemento que queremos añadir a la ventana emergente y construimos la función que realizará la petición asíncrona. A ella le pasamos la ruta del archivo externo, el elemento al cual se insertará el contenido del archivo externo y una función que se ejecutará al finalizar el proceso.

En la función, creamos una instancia al objeto XMLHttpRequest, iniciamos y ejecutamos la petición y cuando esta se haya completado y el código HTTP nos indique que el proceso fue exitoso, añadimos el contenido del archivo externo al elemento <style> y ejecutamos la llamada de retorno.

Un saludo

hola alexis88

mira la verdad es que se muy poco de o nada sobre ajax y poco tiempo jeje. No existe alguna forma de hacerlo sobre js?.

[Alexis88]

¿Y en qué lenguaje crees que está escrito ese código?

Échale un vistazo a esto: AJAX.

Un saludo