L'anteprima di stampa è vuota dopo l'aggiunta del riferimento al foglio di stile esterno nel contenuto HTML di stampa

Voglio stampare il contenuto DIV di una pagina. Quello che faccio è recuperare il contenuto del div usando JS e passarlo alla nuova finestra obj su cui chiamo .print(). I contenuti e le immagini del testo vengono visualizzati come tali. Proprio quando aggiungo questa linea per il contenuto div recuperatiL'anteprima di stampa è vuota dopo l'aggiunta del riferimento al foglio di stile esterno nel contenuto HTML di stampa

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

l'anteprima di stampa è vuota. Ho provato ad aggiungere anche altri fogli di stile, stesso risultato. Qualunque riferimento al foglio di stile aggiungo per stampare i contenuti HTML, la stessa pagina di anteprima dei risultati. qui è il mio codice JS per stampare il contenuto della pagina.

var printDivCSS = new String ('<link href="myprintstyle.css" rel="stylesheet" type="text/css">'); 
function Popup(htmldata) 
{ 
    var mywindow = window.open('test', 'eChallanReceipt', 'height=800,width=800,top=20;left=20'); 
    var str ="<html><head><title>test</title>"; 
    str+= "</head><body>"+ printDivCSS + htmldata+"</body></html>"; 
    mywindow.document.write(str); 
    mywindow.document.close(); // necessary for IE >= 10 
    mywindow.focus(); // necessary for IE >= 10 

    mywindow.print(); 
    mywindow.close(); 

    return false; 
}

Si prega di suggerire qualche correzione. Voglio modellare il contenuto di stampa. Browser: Chrome

Lo stesso codice funziona in Mozilla. Ma in Chrome sto affrontando questo problema.

fonte

2016-01-16 zee

Perché il tag jQuery? – j08691

I CSS devono essere chiamati dal capo della pagina, non dal corpo.

fonte

2016-01-16 19:06:51 vandijkstef

Anche io ho provato ad aggiungere css in testa, non funziona ancora – zee

Difficile dirlo senza un esempio dal vivo. Vedo che il problema è solo Chrome. Potresti controllare gli strumenti di sviluppo? (Fai clic con il pulsante destro del mouse su>> inspect). Ti interesserà la scheda di rete (attiva il log di conservazione) e la scheda delle risorse (apri la cartella "frames") per verificare se il foglio di stile è stato caricato correttamente. Fai riferimento anche alla console, vedi se ci sono degli errori lì. Inoltre, è possibile utilizzare la scheda degli elementi per vedere cosa sta succedendo nei dati HTML. Un altro suggerimento, aggiungi "media =" stampa "" nel tuo css link – vandijkstef

So che questa è una vecchia domanda, ma per chi ha questo problema, ecco la soluzione.

Sta mostrando una pagina vuota perché il documento non ha ancora finito di caricare. quindi per risolverlo aggiungi mywindow.print() in un timeout.

var printDivCSS = new String ('<link href="myprintstyle.css" rel="stylesheet" type="text/css">'); 
function Popup(htmldata) 
{ 
    var mywindow = window.open('test', 'eChallanReceipt', 'height=800,width=800,top=20;left=20'); 
    var str ="<html><head><title>test</title>"; 
    str+= "</head><body>"+ printDivCSS + htmldata+"</body></html>"; 
    mywindow.document.write(str); 
    mywindow.document.close(); // necessary for IE >= 10 
    $(mywindow.document).ready(function(){ 
    //set this timeout longer if you have many resources to load 
    setTimeout(function(){ 
     mywindow.focus(); 
     mywindow.print(); 
    },1000); 

    return false; 
}

fonte

2016-11-09 07:14:49 Miqe

La pagina si rende vuota poiché il css non ha finito di caricare –

tuttavia ho usato la funzione window.onload invece di setTimeout ... poiché non si può dire in modo affidabile se il css sarà in grado di caricare nel timeout specificato –

Non c'è un modo migliore? Il timeout è un po 'hacky e se ci vuole più tempo per caricare il foglio di stile, si romperà e stamperà una pagina vuota – chasmani

L'anteprima di stampa è vuota dopo l'aggiunta del riferimento al foglio di stile esterno nel contenuto HTML di stampa

risposta

Problemi correlati