web-dev-qa-db-fra.com

impression du contenu div avec css appliqué

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: enter image description here

La sortie que je reçois en cliquant sur le bouton Imprimer: enter image description here

javascriptasp.netcss
12
rupinder18

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\"/>" );
9
Girish Vadhel

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;
}
7
Obaid

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.

1
Pradip Bhagat
       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;

}

0
Mohamed Ashique

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.

0
Gabriele Romanato