web-dev-qa-db-fra.com

Imprimer une partie spécifique de la page Web

J'essaie d'imprimer une partie spécifique de ma demande.

L'application dispose d'une liste d'utilisateurs, affichant leur prénom et leur nom. Lorsque je clique sur un utilisateur, une fenêtre contextuelle contenant des informations plus détaillées les concernant apparaît. 

Comment puis-je imprimer uniquement la fenêtre contextuelle d'un utilisateur sur lequel j'ai cliqué? 

 <div id="user<?=$user->id;?>" class="popup">
      <div class="details">
           User details...
      </div>
      <a href="#print">Print</a>
 </div>

Le bouton d'impression ne fonctionne pas encore.

javascripthtmlprinting
49
ItsGreg

Vous pouvez utiliser un simple JavaScript pour imprimer une division spécifique à partir d'une page.

var prtContent = document.getElementById("your div id");
var WinPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
WinPrint.document.write(prtContent.innerHTML);
WinPrint.document.close();
WinPrint.focus();
WinPrint.print();
WinPrint.close();
113
pmtamal

Vous devez ouvrir une nouvelle fenêtre (ou accéder à une nouvelle page) contenant uniquement les informations que vous souhaitez que l'utilisateur puisse imprimer.

Javscript:

function printInfo(ele) {
    var openWindow = window.open("", "title", "attributes");
    openWindow.document.write(ele.previousSibling.innerHTML);
    openWindow.document.close();
    openWindow.focus();
    openWindow.print();
    openWindow.close();
}

HTML:

<div id="....">
    <div>
        content to print
    </div><a href="#" onclick="printInfo(this)">Print</a>
</div>

Quelques notes ici: l’ancre ne doit PAS avoir d’espace entre elle et la div contenant le contenu à imprimer

9
SReject

J'ai créé cette extension jQuery pour imprimer le code HTML de l'élément sélectionné: $('#div2').print();

$.fn.extend({
    print: function() {
        var frameName = 'printIframe';
        var doc = window.frames[frameName];
        if (!doc) {
            $('<iframe>').hide().attr('name', frameName).appendTo(document.body);
            doc = window.frames[frameName];
        }
        doc.document.body.innerHTML = this.html();
        doc.window.print();
        return this;
    }
});

Voir en action ici .

7
Alessandro Lettieri

Au lieu de tout le JavaScript compliqué, vous pouvez y parvenir avec la simple CSS: utilisez simplement deux fichiers CSS, un pour l'affichage normal de votre écran et un autre pour l'affichage deONLYdu contenu que vous souhaitez imprimer. Dans ce dernier fichier, masquez tout ce que vous ne voulez pas imprimer, affichez uniquement la fenêtre contextuelle. 

N'oubliez pas de définir l'attribut media des deux fichiers CSS:

<link rel="stylesheet" href="screen-css.css" media="all" />
<link rel="stylesheet" href="print-css.css" media="print" />
6
che-azeh

Utilisez simplement CSS pour masquer le contenu que vous ne souhaitez pas imprimer . Lorsque l'utilisateur sélectionne imprimer, la page se tournera vers " media =" print "CSS pour obtenir des instructions sur la mise en page.

Le media = "print" CSS contient des instructions pour masquer le contenu que nous ne voulons pas imprimer.

<!-- CSS for the things we want to print (print view) -->
<style type="text/css" media="print">

#SCREEN_VIEW_CONTAINER{
        display: none;
    }
.other_print_layout{
        background-color:#FFF;
    }
</style>

<!-- CSS for the things we DO NOT want to print (web view) -->
<style type="text/css" media="screen">

   #PRINT_VIEW{
      display: none;
   }
.other_web_layout{
        background-color:#E0E0E0;
    }
</style>

<div id="SCREEN_VIEW_CONTAINER">
     the stuff I DO NOT want printed is here and will be hidden - 
     and not printed when the user selects print.
</div>

<div id="PRINT_VIEW">
     the stuff I DO want printed is here.
</div>
4
Stnfordly

Voici ma version améliorée qui indique que lorsque nous voulons charger des fichiers css ou qu'il y a des références d'image dans la pièce.

Dans ces cas, nous devons attendre que les fichiers CSS ou les images soient complètement chargés avant d'appeler la fonction print (). Par conséquent, nous ferions mieux de déplacer les appels de la fonction print () et close () dans le code HTML. Voici l'exemple de code:

var prtContent = document.getElementById("order-to-print");
var WinPrint = window.open('', '', 'left=0,top=0,width=384,height=900,toolbar=0,scrollbars=0,status=0');
WinPrint.document.write('<html><head>');
WinPrint.document.write('<link rel="stylesheet" href="assets/css/print/normalize.css">');
WinPrint.document.write('<link rel="stylesheet" href="assets/css/print/receipt.css">');
WinPrint.document.write('</head><body onload="print();close();">');
WinPrint.document.write(prtContent.innerHTML);
WinPrint.document.write('</body></html>');
WinPrint.document.close();
WinPrint.focus();
1
hailong

La réponse est la suivante: https://stackoverflow.com/a/1072151/421243 , vous pouvez ajouter la section spécifique à un cadre masqué avec Javascript, la focaliser et l'imprimer.

0
David Cook

Dans la fonction printPageArea(), transmettez l'ID div spécifique que vous souhaitez imprimer. J'ai trouvé ce code JavaScript sur codexworld.com.

function printPageArea(areaID){
    var printContent = document.getElementById(areaID);
    var WinPrint = window.open('', '', 'width=900,height=650');
    WinPrint.document.write(printContent.innerHTML);
    WinPrint.document.close();
    WinPrint.focus();
    WinPrint.print();
    WinPrint.close();
}

Le code complet et le didacticiel peuvent être trouvés ici - Comment imprimer une zone de page en utilisant JavaScript .

0
JoyGuru

J'ai écrit un petit module JavaScript appelé PrintElements pour l'impression dynamique de parties d'une page Web.

Il fonctionne en parcourant les éléments de nœud sélectionnés et, pour chaque nœud, il parcourt l’arborescence DOM jusqu’à l’élément BODY. À chaque niveau, y compris le niveau initial (le niveau du nœud à imprimer), il associe une classe de marqueurs (pe-preserve-print) au nœud actuel. Attache ensuite une autre classe de marqueur (pe-no-print) à tous les frères et soeurs du nœud actuel, mais uniquement s'il n'y a pas de classe pe-preserve-print sur ceux-ci. En tant que troisième acte, il attache également une autre classe aux éléments ancestraux préservés pe-preserve-ancestor.

Un css supplémentaire simple à imprimer mort-simple cachera et affichera les éléments respectifs. Certains avantages de cette approche sont que tous les styles sont préservés, cela n'ouvre pas une nouvelle fenêtre, il n'est pas nécessaire de déplacer beaucoup d'éléments DOM, et généralement, cela n'est pas invasif avec votre document original.

Voir la demo , ou lisez l’article connexe pour plus de détails .

0
András Szepesházi