Imprimer partie spécifique de la page web

Je suis en train d'imprimer une partie de mon application.

L'application dispose d'une liste d'utilisateurs, l'affichage de leur nom et prénom. Lorsque je clique sur un utilisateur, j'obtiens une fenêtre avec des informations plus détaillées à leur sujet.

Comment pourrais-je aller sur l'impression que le popup pour un utilisateur, j'ai cliqué?
Le pop-up ressemble à ceci:

 <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 bien.

InformationsquelleAutor ItsGreg | 2012-10-21
  1. 127

    Vous pouvez utiliser JavaScript simple pour imprimer un spécifique div 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();
    • Attention, si la div que vous avez l'impression avec ce code nécessite une feuille CSS pour le rendu de la façon que vous voulez. Si elle ne vous devrez assurez-vous que vous l'ajouter à la page, aussi bien à l'aide de WinPrint.document.write(cssLinkTag).
    • Que faire si je veux changer l'orientation?
    • faute de frappe sur le code letf -> left
    • Cela ne fonctionne pas pour imprimer une div lorsque la div qui contient des données obtenues à partir du côté serveur:stackoverflow.com/questions/34206638/...
    • Un violon basé sur cette réponse: jsfiddle.net/jdavidzapatab/6sctvg2z
    • merci man

    InformationsquelleAutor pmtamal
  2. 9

    Vous devez ouvrir une nouvelle fenêtre(ou accédez à une nouvelle page) contenant uniquement les informations que vous souhaitez à l'utilisateur d'être en mesure d'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

    • C'est génial! Bien sûr, si vous ne voulez pas le lien imprimer après votre article, ou vous souhaitez qu'il soit un peu plus joli, vous avez quelques difficultés. J'ai résolu le défi en donnant le href d'un ID, l'évolution de l'Impression à la non rupture de l'espace, et faisant référence à l'événement click() ailleurs avec getElementById. Merci!!!!!
    • pas - il suffit d'utiliser les CSS media="print"
    InformationsquelleAutor SReject
  3. 8

    J'ai fait 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;
    }
});

    De les voir en action ici.

    • Ne fonctionne pas pour moi avec google Chrome. En outre, vous devriez essayer de poster ici votre code dans la réponse.
    • Je pense que, au lieu de sauvagement downvoting quelqu'un qui a posté facilement récupérable de réponse, nous en tant que communauté peut en effet essayer de pas effrayer par de commentaire et d'une simple copie de la putain de code sur nous-mêmes v_v Ne vous attendez pas à chacun d'être familier avec les subtilités de StackOverflow l'étiquette...
    • Merci mais pourquoi les fichiers css ne peut pas être ajouté?
    • Au moins à partir de la version 71 ceci fonctionne dans Chrome.
    InformationsquelleAutor Alessandro Lettieri
  4. 8

    Au lieu de tous les complexes de JavaScript, vous pouvez y arriver avec de simples CSS: il suffit d'utiliser deux fichiers CSS, un pour normal de votre écran, et un autre pour l'affichage de SEULEMENT le contenu que vous souhaitez imprimer. Dans ce dernier cas, cacher tout ce que vous ne voulez pas imprimer, afficher uniquement les pop up.

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

    <link rel="stylesheet" href="screen-css.css" media="all" />
<link rel="stylesheet" href="print-css.css" media="print" />
    • Je fais le complexe JavaScript car j'ai plus que 1 bouton pour sélectionner la zone à imprimer. J'utilise le css "@media print {" afin de cacher les boutons.
    InformationsquelleAutor che-azeh
  5. 5

    Suffit d'utiliser CSS pour cacher le contenu que vous ne souhaitez pas imprimer.
    Lorsque l'utilisateur sélectionne l'impression de voir la page du " media="print" CSS pour obtenir des instructions sur la mise en page de la page.

    La media="print" CSS a des instructions pour masquer le contenu que nous ne voulons pas imprimé.

    <!-- 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>
    • Cela fonctionne bien et c'est tellement facile et clair merci ! 🙂
    InformationsquelleAutor Stnfordly
  6. 3

    Voici ma version améliorée que lorsque l'on veut charger des fichiers css ou il y a des références sur l'image dans la partie à imprimer.

    Dans ces cas, nous devons attendre jusqu'à ce que les fichiers css ou les images sont entièrement chargé avant d'appeler la fonction print (). À cet effet, nous ferions mieux de déplacer le print() et close() des appels de fonction 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  href="assets/css/print/normalize.css">');
WinPrint.document.write('<link  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();
    InformationsquelleAutor hailong
  7. 1

    J'ai Eu une meilleure option,

    D'abord séparer les imprimable et non imprimable article par le nom de classe ou l'id

    JS:

    window.onafterprint = onAfterPrint;

function print(){
  //hide the nonPrintable div  
}

function onAfterPrint(){
  //Visible the nonPrintable div
}

    HTML:

    <input type="button" onclick="print()" value="Print"/>

    C'est tout

    • Je ne dirais pas mieux, et vous devriez définitivement partager un petit exemple. Mais cela ressemble à une très belle façon de faire. Il pourrait y avoir un .printable de classe par exemple. Cependant, cela ne plaisante pas avec le CSS (position fixe par exemple).
    InformationsquelleAutor Arul Mani
  8. 0

    Que la réponse ici: https://stackoverflow.com/a/1072151/421243, vous pouvez ajouter la section spécifique à un cadre masqué avec du Javascript, l'accent, et de l'imprimer.

    • C'est avec javascript
    InformationsquelleAutor David Cook
  9. 0

    Dans printPageArea() fonction, passer le spécifique div ID de laquelle vous souhaitez imprimer. J'ai trouvé ce code JavaScript à partir de 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 tutoriel peut être trouvé à partir d'ici - Comment Imprimer la Page de la Zone à l'aide de JavaScript.

    InformationsquelleAutor JoyGuru
  10. 0

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

    Il fonctionne en parcourant nœud sélectionné éléments, et pour chaque nœud, elle parcourt l'arborescence DOM jusqu'à ce que l'élément de CORPS. À chaque niveau, y compris la première (qui est à être imprimé nœud de niveau), il s'attache un marqueur de classe (pe-preserve-print) du nœud actuel. Puis l'attache à un autre marqueur de classe (pe-no-print) à tous les frères et sœurs du nœud actuel, mais seulement si il n'existe pas de pe-preserve-print classe sur eux. En tant que troisième acte, il s'attache également une autre classe préservé ancêtre éléments pe-preserve-ancestor.

    Un mort-simple supplémentaire à l'impression css se cacher et de montrer leurs éléments respectifs. Certains des avantages de cette approche est que tous les styles soient conservées, il n'ouvre pas une nouvelle fenêtre, il n'est pas nécessaire de se déplacer autour d'un lot d'éléments du DOM, et en général, il est non-invasive, avec l'original de votre document.

    Voir le démo, ou de lire un article pour plus de détails.

    InformationsquelleAutor András Szepesházi