Je travaille sur un projet et je souhaite imprimer du contenu div.Le code que j'utilise répond à mes exigences, mais j'obtiens une sortie simple sans application de Css ni d'obtention de l'image. le code et la sortie que je reçois et la sortie que je veux.
Code:
function PrintElem(elem) {
Popup($(elem).html());
}
function Popup(data) {
var mywindow = window.open('', 'new div', 'height=400,width=600');
mywindow.document.write('<html><head><title></title>');
mywindow.document.write('<link rel="stylesheet" href="css/midday_receipt.css" type="text/css" />');
mywindow.document.write('</head><body >');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
mywindow.print();
mywindow.close();
return true;
}
Sortie que je reçois avant de cliquer sur le bouton Imprimer:
La sortie que je reçois en cliquant sur le bouton Imprimer:
Vous devez modifier la propriété css media
en print
. Ajoutez une nouvelle ligne à votre fonction createPopup () comme ci-dessous, vous avez joint votre css:
mywindow.document.write( "<link rel=\"stylesheet\" href=\"style.css\" type=\"text/css\" media=\"print\"/>" );
Si vous souhaitez afficher le code CSS, vous devez ajouter un délai d’attente avant de l’imprimer, car il faut un certain temps pour que le code CSS s’applique au code HTML, puis vous pourrez l’imprimer.
Essaye ça:
function Popup(data) {
var mywindow = window.open('', 'new div', 'height=400,width=600');
mywindow.document.write('<html><head><title></title>');
mywindow.document.write('<link rel="stylesheet" href="css/midday_receipt.css" type="text/css" />');
mywindow.document.write('</head><body >');
mywindow.document.write(data);
mywindow.document.write('</body></html>');
mywindow.document.close();
mywindow.focus();
setTimeout(function(){mywindow.print();},1000);
mywindow.close();
return true;
}
Si vous utilisez une image en tant qu'image d'arrière-plan du site, vous ne l'obtiendrez certainement pas. L'impression par navigateur désactive toutes les images en arrière-plan.
Essayez plutôt d’utiliser img tags. Assurez-vous également que l'option de désactivation des images de votre navigateur n'est pas cochée.
function printpage() {
var getpanel = document.getElementById("<%= Panel1.ClientID%>");
var MainWindow = window.open('', '', 'height=500,width=800');
MainWindow.document.write('<html><head><title></title>');
MainWindow.document.write("<link rel=\"stylesheet\" href=\"styles/Print.css\" type=\"text/css\"/>");
MainWindow.document.write('</head><body onload="window.print();window.close()">');
MainWindow.document.write(getpanel.innerHTML);
MainWindow.document.write('</body></html>');
MainWindow.document.close();
setTimeout(function () {
MainWindow.print();
}, 500)
return false;
}
Une cause possible de votre problème de rendu peut être due aux chemins relatifs que vous utilisez pour le fichier CSS et les images. Tout d'abord, essayez d'utiliser des chemins absolus. Le fait que la structure HTML soit rendue exclut les problèmes liés à la génération du nouveau document HTML. Ajoutez également media="print"
à l'élément link
.
Ce code fonctionne, bien que partiellement:
(function() {
function createPopup( data ) {
var mywindow = window.open( "", "new div", "height=400,width=600" );
mywindow.document.write( "<html><head><title></title>" );
mywindow.document.write( "<link rel=\"stylesheet\" href=\"style.css\" type=\"text/css\"/>" );
mywindow.document.write( "</head><body >" );
mywindow.document.write( data );
mywindow.document.write( "</body></html>" );
mywindow.print();
//mywindow.close();
return true;
}
document.addEventListener( "DOMContentLoaded", function() {
document.getElementById( "print" ).addEventListener( "click", function() {
createPopup( document.getElementById( "content" ).innerHTML );
}, false );
});
})();
J'ai supprimé l'appel .close (). N'oubliez pas que certains styles CSS peuvent ne pas fonctionner avec print.