Imprimer uniquement?

comment imprimer le div indiqué (sans désactiver manuellement tout autre contenu sur la page)?

je veux éviter un nouveau dialogue de prévisualisation, donc créer une nouvelle fenêtre avec ce contenu n'est pas utile.

la page contient quelques tableaux, l'un d'eux contient la div je veux imprimer - le tableau est stylisé avec des styles visuels pour le web, qui ne devrait pas apparaître dans l'imprimé.

356
demandé sur Pikamander2 2009-01-22 15:09:36

26 réponses

Voici une solution générale, en utilisant CSS seulement , que j'ai vérifié pour travailler. 

@media print {
  body * {
    visibility: hidden;
  }
  #section-to-print, #section-to-print * {
    visibility: visible;
  }
  #section-to-print {
    position: absolute;
    left: 0;
    top: 0;
  }
}

les approches alternatives ne sont pas si bonnes. Utiliser display est délicat car si un élément a display:none alors aucun de ses descendants ne s'affichera non plus. Pour l'utiliser, vous devez modifier la structure de votre page.

utiliser visibility fonctionne mieux car vous pouvez activer la visibilité pour les descendants. L'invisible les éléments affectent toujours la mise en page, donc je déplace section-to-print en haut à gauche pour qu'il imprime correctement.

617
répondu Bennett McElwee 2013-08-25 03:31:33

j'ai une meilleure solution avec un code minimal.

Placez votre partie imprimable à l'intérieur d'un div avec un id comme ceci: 

<div id="printableArea">
      <h1>Print me</h1>
</div>

<input type="button" onclick="printDiv('printableArea')" value="print a div!" />

puis Ajouter un événement comme un onclick (comme montré ci-dessus), et passer l'id du div comme je l'ai fait ci-dessus.

maintenant, créons un javascript vraiment simple: 

function printDiv(divName) {
     var printContents = document.getElementById(divName).innerHTML;
     var originalContents = document.body.innerHTML;

     document.body.innerHTML = printContents;

     window.print();

     document.body.innerHTML = originalContents;
}

vous voyez comme c'est simple? Pas de popups, pas de nouvelles fenêtres, pas de style fou, pas de bibliothèques JS comme jquery. Le problème avec les solutions vraiment compliquées (la réponse n'est pas compliquée et pas ce à quoi je fais référence) est le fait qu'il ne se traduira jamais à travers tous les navigateurs, jamais! Si vous voulez rendre les styles différents, Faites comme indiqué dans la réponse cochée en ajoutant l'attribut media à un lien de feuille de style (media="print").

Pas de peluches, léger, il fonctionne, tout simplement.

209
répondu Kevin Florida 2011-09-23 17:37:23

toutes les réponses jusqu'à présent sont plutôt imparfaites - elles impliquent soit l'ajout de class="noprint" à tout ou va gâcher display dans #printable .

je pense que la meilleure solution serait de créer une enveloppe autour de la substance non imprimable: 

<head>
    <style type="text/css">

    #printable { display: none; }

    @media print
    {
        #non-printable { display: none; }
        #printable { display: block; }
    }
    </style>
</head>
<body>
    <div id="non-printable">
        Your normal page contents
    </div>

    <div id="printable">
        Printer version
    </div>
</body>

bien sûr, ce n'est pas parfait car cela implique de déplacer les choses dans votre HTML un peu...

116
répondu Greg 2009-01-22 12:28:28

avec jQuery c'est aussi simple que ça: 

w=window.open();
w.document.write($('.report_left_inner').html());
w.print();
w.close();
102
répondu romaninsh 2009-11-06 12:57:54

pourriez-vous utiliser une feuille de style d'impression , et utiliser CSS pour organiser le contenu que vous vouliez imprimer? lisez cet article pour plus de pointeurs.

21
répondu Paul Dixon 2009-01-22 12:12:20

cela fonctionne bien: 

<style type="text/css">
@media print
{
body * { visibility: hidden; }
#printcontent * { visibility: visible; }
#printcontent { position: absolute; top: 40px; left: 30px; }
}
</style>

noter que cela ne fonctionne qu'avec la"visibilité". "affichage" de ne pas le faire. Testé en FF3.

19
répondu Christian Maioli M. 2010-01-04 19:18:34

Je n'ai vraiment aimé aucune de ces réponses dans leur ensemble. Si vous avez une classe (dites printablarea) et que vous en êtes l'enfant immédiat, alors vous pouvez faire quelque chose comme ça dans votre CSS d'impression: 

body > *:not(.printableArea) {
    display: none;
}

//Not needed if already showing
body > .printableArea {
    display: block;
}

L'utilisation de la visibilité peut causer beaucoup de problèmes d'espacement et de pages vierges. C'est parce que la visibilité maintient l'espace des éléments, le rend simplement caché, où comme l'affichage le supprime et permet à d'autres éléments de prendre son espace.

la raison pour laquelle cette solution fonctionne est que vous n'attrapez pas tous les éléments, juste les enfants immédiats du corps et de les cacher. Les autres solutions ci-dessous avec display css, masquent tous les éléments, ce qui affecte tout à l'intérieur du contenu printablea.

Je ne suggérerais pas javascript car vous auriez besoin d'un bouton d'impression que l'utilisateur clique et les boutons d'impression standard du navigateur n'auraient pas le même effet. Si vous avez vraiment besoin de faire cela, ce que je ferait est de stocker le html du corps, supprimer tous les éléments indésirables, imprimer, puis ajouter le retour html. Comme mentionné cependant, je l'éviterais si vous pouvez et utilisez une option CSS comme ci-dessus.

NOTE: Vous pouvez ajouter n'importe quel CSS dans le CSS d'impression en utilisant les styles inline: 

<style type="text/css">
@media print {
   //styles here
}
</style>

ou comme je l'utilise habituellement est une étiquette de lien: 

<link rel="stylesheet" type="text/css" media="print" href="print.css" />
12
répondu fanfavorite 2017-09-25 18:00:39

  1. donnez n'importe quel élément que vous voulez imprimer l'id printMe .

  2. incluez ce script dans votre tête: 

    <script language="javascript">
    var gAutoPrint = true;

    function processPrint(){

    if (document.getElementById != null){
    var html = '<HTML>\n<HEAD>\n';
    if (document.getElementsByTagName != null){
    var headTags = document.getElementsByTagName("head");
    if (headTags.length > 0) html += headTags[0].innerHTML;
    }

    html += '\n</HE' + 'AD>\n<BODY>\n';
    var printReadyElem = document.getElementById("printMe");

    if (printReadyElem != null) html += printReadyElem.innerHTML;
    else{
    alert("Error, no contents.");
    return;
    }

    html += '\n</BO' + 'DY>\n</HT' + 'ML>';
    var printWin = window.open("","processPrint");
    printWin.document.open();
    printWin.document.write(html);
    printWin.document.close();

    if (gAutoPrint) printWin.print();
    } else alert("Browser not supported.");

    }
</script>

  3. Appeler la fonction 

    <a href="javascript:void(processPrint());">Print</a>
7
répondu Jason Plank 2011-11-14 16:06:40

hm ... utilisez le type de feuille de style pour l'impression ... par exemple: 

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

impression.css: 

div { display: none; }
#yourdiv { display: block; }
6
répondu Andreas Niedermair 2009-01-22 12:13:15 
<script type="text/javascript">
   function printDiv(divId) {
       var printContents = document.getElementById(divId).innerHTML;
       var originalContents = document.body.innerHTML;
       document.body.innerHTML = "<html><head><title></title></head><body>" + printContents + "</body>";
       window.print();
       document.body.innerHTML = originalContents;
   }
</script>

6
répondu Singh 2015-10-07 16:28:22

Étape 1: Écrivez le javascript suivant à l'intérieur de votre tête étiquette 

<script language="javascript">
function PrintMe(DivID) {
var disp_setting="toolbar=yes,location=no,";
disp_setting+="directories=yes,menubar=yes,";
disp_setting+="scrollbars=yes,width=650, height=600, left=100, top=25";
   var content_vlue = document.getElementById(DivID).innerHTML;
   var docprint=window.open("","",disp_setting);
   docprint.document.open();
   docprint.document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"');
   docprint.document.write('"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">');
   docprint.document.write('<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">');
   docprint.document.write('<head><title>My Title</title>');
   docprint.document.write('<style type="text/css">body{ margin:0px;');
   docprint.document.write('font-family:verdana,Arial;color:#000;');
   docprint.document.write('font-family:Verdana, Geneva, sans-serif; font-size:12px;}');
   docprint.document.write('a{color:#000;text-decoration:none;} </style>');
   docprint.document.write('</head><body onLoad="self.print()"><center>');
   docprint.document.write(content_vlue);
   docprint.document.write('</center></body></html>');
   docprint.document.close();
   docprint.focus();
}
</script>

Étape 2: appeler la fonction PrintMe('DivID') par un événement onclick. 

<input type="button" name="btnprint" value="Print" onclick="PrintMe('divid')"/>
<div id="divid">
here is some text to print inside this div with an id 'divid'
</div>
6
répondu Hardik Thaker 2017-09-22 16:49:36

avec CSS 3 vous pouvez utiliser ce qui suit: 

body *:not(#printarea) {
    display: none;
}
2
répondu Gumbo 2009-01-22 12:14:31

j'ai récupéré le contenu en utilisant JavaScript et j'ai créé une fenêtre que je pouvais imprimer à la place...

2
répondu noesgard 2009-02-03 13:06:46

la méthode de Sandro fonctionne très bien.

Je l'ai modifié pour permettre l'utilisation de plusieurs liens printMe, en particulier dans les pages tabulées et les textes en expansion.

function processPrint(printMe){ <-- appel pour une variable ici

var printReadyElem = document.getElementById(printMe); <-- supprimé les guillemets autour de printMe de demander une variable

<a href="javascript:void(processPrint('divID'));">Print</a> < -- passer le div ID à imprimer sur la fonction pour transformer la variable printMe en la div ID.

2
répondu 2009-06-19 19:58:57

printDiv(divId) : une solution généralisée pour imprimer n'importe quelle div sur n'importe quelle page.

j'ai eu un problème similaire, mais je voulais (a) pouvoir imprimer la page entière, ou (B) Imprimer l'un ou l'autre de plusieurs domaines spécifiques. Ma solution, grâce à une grande partie de ce qui précède, vous permet de spécifier n'importe quel objet div à imprimer.

la clé de cette solution est d'ajouter une règle appropriée à la feuille de style pour les médias imprimés de sorte que le div (et son contenu) sera imprimé.

tout d'abord, créez les CSS d'impression nécessaires pour supprimer tout (mais sans la règle spécifique pour permettre l'élément que vous voulez imprimer). 

<style type="text/css" media="print">
   body {visibility:hidden; }
   .noprintarea {visibility:hidden; display:none}
   .noprintcontent { visibility:hidden; }
   .print { visibility:visible; display:block; }
</style>

Notez que j'ai ajouté de nouvelles règles de classe:

  • "noprintarea vous permet de supprimer l'impression d'éléments dans votre div - à la fois le contenu et le bloc.
  • noprintcontent vous permet de supprimer l'impression d'éléments dans votre div - le contenu est supprimé mais et la zone allouée est laissée vide.
  • imprimer vous permet d'avoir des éléments qui apparaissent dans la version imprimée, mais pas sur l'écran de la page. Ces normalement "display:none" pour le style d'écran.

insérez trois fonctions JavaScript. Les premiers ne font que basculer la feuille de style pour les médias imprimés. 

function disableSheet(thisSheet,setDisabled)
{ document.styleSheets[thisSheet].disabled=setDisabled; }

le second fait le vrai travail et le troisième nettoie ensuite. Le second (printDiv) active la feuille de style de la presse écrite, puis ajoute une nouvelle règle pour permettre au div désiré d'imprimer, publie l'impression, puis ajoute un délai avant le ménage final (autrement les styles peuvent être réinitialisés avant que l'impression est faite.) 

function printDiv(divId)
{
  //  Enable the print CSS: (this temporarily disables being able to print the whole page)
  disableSheet(0,false);
  //  Get the print style sheet and add a new rule for this div
  var sheetObj=document.styleSheets[0];  
  var showDivCSS="visibility:visible;display:block;position:absolute;top:30px;left:30px;";
  if (sheetObj.rules) { sheetObj.addRule("#"+divId,showDivCSS); }
  else                { sheetObj.insertRule("#"+divId+"{"+showDivCSS+"}",sheetObj.cssRules.length); }
  print();
  //  need a brief delay or the whole page will print
  setTimeout("printDivRestore()",100);  
}

les fonctions finales suppriment la règle ajoutée et remet le style d'impression en mode désactivé pour que toute la page puisse être imprimée. 

function printDivRestore()
{
  // remove the div-specific rule
  var sheetObj=document.styleSheets[0];  
  if (sheetObj.rules) { sheetObj.removeRule(sheetObj.rules.length-1); }
  else                { sheetObj.deleteRule(sheetObj.cssRules.length-1); }
  //  and re-enable whole page printing
  disableSheet(0,true);
}

la seule autre chose à faire est d'ajouter une ligne à votre processus de chargement afin que le style d'impression soit initialement désactivé, permettant ainsi l'impression de page entière. 

<body onLoad='disableSheet(0,true)'>

alors, de n'importe où dans votre document, vous pouvez imprimer un div. Il suffit de publier printDiv ("thedivid") à partir d'un bouton ou autre.

un grand plus pour cette approche il fournit une solution générale à l'impression du contenu sélectionné dans une page. Il permet également l'utilisation de styles existants pour les éléments qui sont imprimés - y compris le contenant div.

NOTE: dans ma mise en œuvre, ce doit être la première feuille de style. Changer les références de feuille (0) au numéro de feuille approprié si vous avez besoin de le faire plus tard dans la séquence de feuille.

2
répondu DrDave 2011-01-23 03:41:24

@Kevin Florida Si vous avez plusieurs divs avec la même classe, vous pouvez l'utiliser comme ceci: 

 <div style="display:none">
   <div id="modal-2" class="printableArea">
     <input type="button" class="printdiv-btn" value="print a div!" />
   </div>
 </div>

j'utilisais le type de contenu interne Colorbox 

$(document).on('click', '.printdiv-btn', function(e) {
    e.preventDefault();

    var $this = $(this);
    var originalContent = $('body').html();
    var printArea = $this.parents('.printableArea').html();

    $('body').html(printArea);
    window.print();
    $('body').html(originalContent);
});
2
répondu Stefan 2015-09-15 08:19:09

dans mon cas, j'ai dû imprimer une image à l'intérieur d'une page. Lorsque j'ai utilisé la solution voté, j'ai eu 1 page blanche et l'autre montrant l'image. J'espère que ça aidera quelqu'un.

voici le css que j'ai utilisé: 

@media print {
  body * {
    visibility: hidden;
  }

  #not-print * {
    display: none;
  }

  #to-print, #to-print * {
    visibility: visible;
  }

  #to-print {
    display: block !important;
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    height: 99%;
  }
}

mon html est: 

<div id="not-print" >
  <header class="row wrapper page-heading">

  </header>

  <div class="wrapper wrapper-content">
    <%= image_tag @qrcode.image_url,  size: "250x250" , alt: "#{@qrcode.name}" %>
  </div>
</div>

<div id="to-print" style="display: none;">
  <%= image_tag @qrcode.image_url,  size: "300x300" , alt: "#{@qrcode.name}" %>
</div>
2
répondu Raphael Monteiro 2016-06-17 14:18:10

utiliser une feuille de style spéciale pour l'impression 

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

et ensuite ajouter une classe i.e." noprint " à chaque étiquette qui est du contenu que vous ne voulez pas imprimer.

dans l'utilisation CSS 

.noprint {
  display: none;
}
1
répondu Xn0vv3r 2009-01-22 12:14:11

si vous voulez seulement imprimer cette div, vous devez utiliser l'instruction: 

@media print{
    *{display:none;}
    #mydiv{display:block;}
}
1
répondu Jason Plank 2011-11-14 16:05:21

la fonction printDiv() est sortie plusieurs fois, mais dans ce cas, vous perdez tous vos éléments de liaison et vos valeurs d'entrée. Donc, ma solution est de créer un div pour tout ce qu'on appelle "body_allin" et un autre en dehors du premier appelé "body_print".

alors vous appelez cette fonction: 

function printDiv(divName){

    var printContents = document.getElementById(divName).innerHTML;

    document.getElementById("body_print").innerHTML = printContents;

    document.getElementById("body_allin").style.display = "none";
    document.getElementById("body_print").style.display = "";

    window.print();

    document.getElementById("body_print").innerHTML = "";
    document.getElementById("body_allin").style.display = "";
    document.getElementById("body_print").style.display = "none";

}
1
répondu pmrotule 2014-02-27 17:47:42

vous pouvez utiliser un style CSS séparé qui désactive tous les autres contenus sauf celui avec l'id"printarea".

Voir CSS Design: Impression pour plus d'explications et d'exemples.

1
répondu Kosi2801 2014-09-23 05:20:41

j'ai eu plusieurs images chacune avec un bouton et ai dû cliquer sur un bouton pour imprimer chaque div avec une image. Cette solution fonctionne si j'ai désactivé cache dans mon navigateur, et la taille de l'image ne change pas dans Chrome: 

        function printDiv(divName) {

        var printContents = document.getElementById(divName).innerHTML;
        w = window.open();

        w.document.write(printContents);
        w.document.write('<scr' + 'ipt type="text/javascript">' + 'window.onload = function() { window.print(); window.close(); };' + '</sc' + 'ript>');

        w.document.close(); // necessary for IE >= 10
        w.focus(); // necessary for IE >= 10

        return true;
    }

<div id="printableArea">
      <h1>Print me</h1>
</div>

<input type="button" onclick="printDiv('printableArea')" value="print a div!" />
1
répondu live-love 2016-11-02 21:36:13

une approche de plus sans affecter la page courante et il persiste aussi la css pendant l'impression. Ici le sélecteur doit être le sélecteur de div spécifique quel contenu nous devons imprimer. 

printWindow(selector, title) {
   var divContents = $(selector).html();
   var $cssLink = $('link');
   var printWindow = window.open('', '', 'height=' + window.outerHeight * 0.6 + ', width=' + window.outerWidth  * 0.6);
   printWindow.document.write('<html><head><h2><b><title>' + title + '</title></b></h2>');
   for(var i = 0; i<$cssLink.length; i++) {
    printWindow.document.write($cssLink[i].outerHTML);
   }
   printWindow.document.write('</head><body >');
   printWindow.document.write(divContents);
   printWindow.document.write('</body></html>');
   printWindow.document.close();
   printWindow.onload = function () {
            printWindow.focus();
            setTimeout( function () {
                printWindow.print();
                printWindow.close();
            }, 100);  
        }
}

ici fourni un certain temps de montrer que CSS externes obtenir appliqué à elle.

1
répondu Mukesh Kumar Suman 2018-02-15 05:22:13

j'ai essayé plusieurs des solutions fournies.Aucun d'eux n'a fonctionné parfaitement. Ils perdent soit les fixations CSS ou JavaScript. J'ai trouvé une solution parfaite et facile qui ne perde ni les fixations CSS ni JavaScript.

HTML: 

<div id='printarea'>
    <p>This is a sample text for printing purpose.</p>
    <input type='button' id='btn' value='Print' onclick='printFunc();'>
</div>
<p>Do not print.</p>

Javascript: 

function printFunc() {
    var divToPrint = document.getElementById('printarea');
    var htmlToPrint = '' +
        '<style type="text/css">' +
        'table th, table td {' +
        'border:1px solid #000;' +
        'padding;0.5em;' +
        '}' +
        '</style>';
    htmlToPrint += divToPrint.outerHTML;
    newWin = window.open("");
    newWin.document.write("<h3 align='center'>Print Page</h3>");
    newWin.document.write(htmlToPrint);
    newWin.print();
    newWin.close();
    }
1
répondu BibanCS 2018-08-08 11:38:43

vous pouvez utiliser ce: http://vikku.info/codesnippets/javascript/print-div-content-print-only-the-content-of-an-html-element-and-not-the-whole-document /

Ou utiliser visibility:visible et visibility:hidden propriété css avec @media print{}

'display: none 'masquera tout'display:block' imbriqué. Ce n'est pas la solution.

0
répondu 0xC0DEGURU 2013-04-05 13:21:42

Best css pour l'adapter à l'espace vide de la hauteur: 

@media print {
  body * {
    visibility: hidden;
    height:0;
  }
  #section-to-print, #section-to-print * {
    visibility: visible;
    height:auto;
  }
  #section-to-print {
    position: absolute;
    left: 0;
    top: 0;
  }
}
0
répondu TRI ÂN 2018-04-19 08:20:53