Imprimer <div id = "printarea"> </div> uniquement?

444

Comment imprimer le div indiqué (sans désactiver manuellement tous les autres contenus de la page)?

Je veux éviter une nouvelle boîte de dialogue d'aperçu, donc la création d'une nouvelle fenêtre avec ce contenu n'est pas utile.

La page contient quelques tableaux, l'un d'eux contient le div que je veux imprimer - le tableau est conçu avec des styles visuels pour le Web, qui ne devraient pas s'afficher en version imprimée.

javascript  css  printing  dhtml 
— noesgard
source
1
stackoverflow.com/questions/2255291/… ce lien fonctionne parfaitement
— Jinna Balu

Réponses:

793

Voici une solution générale, utilisant uniquement CSS , que j'ai vérifié pour fonctionner.

@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. L'utilisation displayest délicate car si un élément a display:nonealors aucun de ses descendants ne s'affichera non plus. Pour l'utiliser, vous devez changer la structure de votre page.

L'utilisation visibilityfonctionne mieux car vous pouvez activer la visibilité pour les descendants. Les éléments invisibles affectent toujours la mise en page, donc je me déplace section-to-printen haut à gauche pour qu'il s'imprime correctement.

— Bennett McElwee
source
21
c'est de loin le moyen le plus rapide et le plus propre, je me demande pourquoi cette réponse n'a pas obtenu le plus de votes -.-
— Dany Khalife
34
Un problème à surveiller avec cette solution est que vous pouvez finir par imprimer des milliers de pages vierges dans certains cas. Dans mon cas, j'ai pu résoudre ce problème en utilisant un affichage supplémentaire: aucun style pour les éléments sélectionnés, mais une solution plus générale est peut-être possible en combinant des hauteurs de forçage, un débordement: aucun et un positionnement absolu pour toutes les divisions ou quelque chose.
— Malcolm MacLeod
5
C'est un bon début, mais j'ai eu deux problèmes: pour l'un des parents de l'élément, s'il a établi son propre positionnement relatif / absolu, le contenu sera toujours compensé, sauf si je l'utilise à la position:fixedplace. Cependant, Chrome et Safari tronqueraient également le contenu, surtout après la première page. Donc , ma solution finale était de définir à la fois la cible et tous ses parents , àoverflow:visible; position:absolute !important; top:0;left:0
— natevw
1
@ dudeNumber4 #section-to-printcorrespond à la section elle-même; #section-to-print *correspond à chaque sous-élément de la section. Cette règle rend donc la section et tout son contenu visibles.
— Bennett McElwee
3
Vous pouvez essayer une solution JavaScript, mais cela ne fonctionnera pas si votre utilisateur utilise la commande Imprimer du navigateur.
— Bennett McElwee
243

J'ai une meilleure solution avec un code minimal.

Placez votre partie imprimable à l'intérieur d'un div avec un identifiant comme celui-ci:

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

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

Ensuite, ajoutez un événement comme un onclick (comme indiqué ci-dessus) et passez l'id du div comme je l'ai fait ci-dessus.

Créons maintenant 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;
}

Remarquez à quel point 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'elle ne se traduira JAMAIS sur tous les navigateurs, jamais! Si vous souhaitez 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, ça marche.

— Kevin Florida
source
@Kevin j'essaie ceci pour le formulaire mais il imprime un formulaire vide (sans données) et j'ai besoin d'un formulaire rempli pour être imprimé avant de soumettre
— Arif
98
@asprin warning! Ce n'est pas un code sans gâchis. L'utilisation de innerHTML pour effacer puis recréer tout le corps convient aux pages simples, mais avec des personnalisations plus avancées (menus, diaporamas, etc.), cela pourrait effacer certains comportements dynamiques ajoutés par d'autres scripts.
— Christophe
17
Cette solution ne fonctionnera pas dans une page complexe où les éléments de la zone imprimable dépendent des styles et / ou de la position des éléments parents. Si vous extrayez le div imprimable, il peut sembler totalement différent car tous les parents sont maintenant manquants.
— Andrei Volgin
1
Malheureusement, cela ne fonctionne pas bien dans Chrome si vous fermez la fenêtre d'aperçu avant impression, puis essayez de faire une jQuery .click. C'est dommage, car le code est si léger.
— rybo111
3
@BorisGappov un exemple très simple avec un seul événement de clic pour prouver mon point: jsfiddle.net/dc7voLzt Je le répète: ce n'est pas du code sans gâchis! Le problème n'est pas avec l'impression elle-même, il s'agit de restaurer la page d'origine!
— Christophe
121

Jusqu'à présent, toutes les réponses sont assez erronées - elles impliquent soit d'ajouter class="noprint"à tout, soit de gâcher l' displayintérieur #printable.

Je pense que la meilleure solution serait de créer un wrapper autour des trucs non imprimables:

<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 un peu les choses dans votre HTML ...

— Greg
source
Je pense que vous avez raison, mais comment puis-je tuer le style de la table entourant le div (si cela est possible de supprimer le style - je peux imprimer le tableau et exclure le reste du contenu assez facilement
— noesgard
J'utilise Javascript pour récupérer le contenu nécessaire et le CSS comme ci
— noesgard
9
Je préfère utiliser du HTML sémantique. Le formatage de l'impression devrait idéalement être géré par CSS. Voir ma réponse pour savoir comment faire: stackoverflow.com/questions/468881/…
— Bennett McElwee
D'accord avec Bennett, utiliser la visibilité au lieu de l'affichage est une solution beaucoup plus propre
— guigouz
J'ai fait une solution vraiment simple à un niveau inférieur sur ce fil qui, je pense, conviendra mieux aux besoins du demandeur. Il ne repose pas sur une feuille de style d'impression, peut être recyclé sur tout votre site Web et est incroyablement léger.
— Kevin Florida
108

Avec jQuery, c'est aussi simple que cela:

w=window.open();
w.document.write($('.report_left_inner').html());
w.print();
w.close();
— romaninsh
source
3
C'est plutôt cool, bien qu'il apparaisse dans Chrome comme une fenêtre contextuelle bloquée.
— Rafi Jacoby
8
l'astuce consiste à l'appeler lors d'un événement généré par l'utilisateur tel qu'un clic de souris. vous pouvez également ajouter après la première ligne: if (! w) alert ('Please enable pop-ups');
— romaninsh
1
Quelqu'un at-il ce travail sur IE11? Il ouvre simplement une fenêtre puis la ferme immédiatement. Fonctionne dans Chrome, FF et safari.
— greatwitenorth
3
J'ai perdu le CSS lors de l'impression avec ceci, existe-t-il un moyen de maintenir le CSS?
— Moxet Khan
2
@MoxetKhan, ce message a une solution avec css vevlo.com/how-to-print-div-content-using-javascript
— lacsare
22

Pourriez-vous utiliser une feuille de style d'impression et utiliser CSS pour organiser le contenu que vous souhaitez imprimer? Lisez cet article pour plus de pointeurs.

— Paul Dixon
source
J'ai une feuille de style d'impression - essayant d'éviter de mettre une règle de style dans tous les autres contenus ...
— noesgard
J'ai une table avec un style, contenant le div en question, si je configure la table pour qu'elle s'affiche: aucune - puis-je toujours afficher le div?
— noesgard
Je pense que oui, et vous pourriez essayer de marquer la règle comme! Important pour la renforcer!
— Paul Dixon
si le tableau n'est pas affiché, cela n'aura pas d'importance même si le div est réglé sur 'display: awesome;'. Le parent est caché, tout comme les enfants. Est-ce une situation où vous avez besoin d'un tableau ou est-ce juste pour la mise en page?
— roborourke
"Boom, headshot!" par des dispositions de table. = |
— ANeves
19

Cela fonctionne bien:

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

Notez que cela ne fonctionne qu'avec la "visibilité". "display" ne le fera pas. Testé en FF3.

— Christian Maioli M.
source
15

Je n'ai pas vraiment aimé ces réponses dans leur ensemble. Si vous avez une classe (disons printableArea) et que vous l'avez comme enfant immédiat du corps, vous pouvez faire quelque chose comme ceci dans votre CSS d'impression:

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

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

Pour ceux qui recherchent printableArea dans un autre endroit, vous devez vous assurer que les parents de printableArea sont affichés:

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

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

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

La raison pour laquelle cette solution fonctionne est que vous ne saisissez pas tous les éléments, seulement les enfants immédiats du corps et que vous les cachez. Les autres solutions ci-dessous avec affichage css, masquent tous les éléments, ce qui affecte tout à l'intérieur du contenu printableArea.

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

REMARQUE: vous pouvez ajouter n'importe quel CSS dans le CSS d'impression en utilisant des styles en ligne:

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

Ou comme j'utilise habituellement est une balise de lien:

<link rel="stylesheet" type="text/css" media="print" href="print.css" />
— fanfavorite
source
Et si le div que vous voulez imprimer n'est pas "un enfant immédiat du corps"? J'essaye de faire ceci dans vue.js .. Mais j'obtiens beaucoup de pages blanches en utilisant la réponse acceptée.
— svenema
@svenema, vous pouvez utiliser n'importe quel CSS de votre choix. Ce n'était qu'un exemple.
— fanfavorite
hmm, quand même, quand j'essaye, il n'y a en effet pas de pages vierges supplémentaires, mais le div printableArea ne s'affiche pas non plus; J'ai juste 1 page vierge vide lorsque j'utilise ce code.
— svenema
J'ai découvert que c'est en effet parce que le div printableArea n'est pas un enfant direct de la balise body, quand je fais un enfant direct que votre solution fonctionne; cependant, dans mon cas, je ne peux pas faire de la zone imprimable un enfant direct. Y a-t-il un moyen de contourner ceci?
— svenema
@svenema, veuillez consulter ma modification ci-dessus.
— fanfavorite
8

  1. Indiquez l'élément que vous souhaitez imprimer printMe.

  2. Incluez ce script dans votre balise head:

    <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. Appelez la fonction

    <a href="javascript:void(processPrint());">Print</a>
— Jason Plank
source
C’est un bon travail. Mais beaucoup trop compliqué et ne fonctionnera pas correctement entre les navigateurs (en particulier les anciens navigateurs). Je vous suggère de jeter un œil à ma solution ci-dessous.
— Kevin Florida
6

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

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

print.css:

div { display: none; }
#yourdiv { display: block; }
— Andreas Niedermair
source
Cela ne fonctionnera pas si le document n'est pas basé sur DIV ou #yourdiv comprend également d'autres DIV.
— Gumbo
#yourdiv * {display: ...} si vous placez ceci en haut de la page et que vous avez un navigateur à jour, vous pouvez alors travailler avec plus de sélecteurs pour cacher les non divs
— Andreas Niedermair
"#yourdiv * {display: ...}" - que devrait être le ... sans casser la disposition?
— Greg
Cela afficherait également les éléments en ligne en tant qu'éléments de bloc. Mais "#yourdiv, #yourdiv div {display: block}" le fera.
— Gumbo
@dittodhole - pensez-y une minute. Que pourriez-vous y mettre qui ne brisera pas la mise en page dans #yourdiv?
— Greg
6 
<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>

— Dilip Kr Singh
source
6
regardez bien mais vous perdez toutes les liaisons javascript et autres après impression
— Julien
1
Il imprime sans CSS.
— Moxet Khan
6

Étape 1: Écrivez le javascript suivant dans votre balise head

<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: appelez 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>
— Hardik Thaker
source
C'est la bonne! Utilisé pour un modal et des galeries. Aucune erreur Javascript après la fermeture. Vraiment utile, surtout lorsque vous utilisez des modaux qui dépassent une page. Enroule joliment. Parfait pour les personnes qui souhaitent imprimer pour stocker.
— TheWeeezel
2

Avec CSS 3, vous pouvez utiliser les éléments suivants:

body *:not(#printarea) {
    display: none;
}
— Gombo
source
Je ne peux pas utiliser ça, j'ai peur ... (corrigez-moi si je me trompe) la page sur laquelle je travaille est asp.net 1.1 / DHTML
— noesgard
Cela dépend du navigateur si le sélecteur: not () est déjà disponible ou non.
— Gumbo
Eh bien, ma proposition n'est qu'un regard sur l'avenir… Non, sérieusement. Je viens de le mentionner par souci d'exhaustivité. Je sais que ce n'est pas possible en ce moment. Malheureusement.
— Gumbo
Vous pouvez utiliser jQuery et ce sélecteur qui (je pense) fonctionnerait dans IE6 - $ ('body *: not (#printarea)'). Style ('display', 'none');
— David Heggie
2
cela masquera tous les descendants de #printarea, car ils correspondent à *: not (#printarea). Donc, fondamentalement, vous vous retrouvez avec un conteneur vide.
— cytofu
2

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

— noesgard
source
Pouvez-vous partager le code, il a un problème d'adoption de css
— Moxet Khan
2

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

Je l'ai modifié pour permettre d'autoriser plusieurs liens printMe, en particulier à utiliser dans les pages à onglets et à développer le texte.

function processPrint(printMe){ <- appeler une variable ici

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

<a href="javascript:void(processPrint('divID'));">Print</a><- en passant l'ID div à imprimer à la fonction pour transformer la variable printMe en ID div. des guillemets simples sont nécessaires

2

printDiv (divId) : Une solution généralisée pour imprimer n'importe quel 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 n'importe laquelle de plusieurs zones 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 du support d'impression afin que le div demandé (et son contenu) soit imprimé.

Tout d'abord, créez le css d'impression requis pour tout supprimer (mais sans la règle spécifique pour autoriser l'élément que vous souhaitez 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 des éléments de votre div, à la fois le contenu et le bloc.
  • noprintcontent vous permet de supprimer l'impression des éléments dans votre div- le contenu est supprimé mais et la zone allouée est laissée vide.
  • impression vous permet d'avoir des éléments qui apparaissent dans la version imprimée mais pas sur la page d'écran. Ceux-ci auront normalement "display: none" pour le style d'écran.

Insérez ensuite trois fonctions JavaScript. Le premier active et désactive simplement la feuille de style de support d'impression.

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 support d'impression, puis ajoute une nouvelle règle pour permettre au div souhaité d'imprimer, émet l'impression, puis ajoute un délai avant le nettoyage final (sinon les styles peuvent être réinitialisés avant que l'impression ne soit réellement terminé.) 

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 redéfinissent le style d'impression sur désactivé pour que la page entière 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 traitement de chargement afin que le style d'impression soit initialement désactivé, permettant ainsi l'impression de la page entière. 

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

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

Un gros plus pour cette approche, il fournit une solution générale pour imprimer le contenu sélectionné à partir d'une page. Il permet également d'utiliser des styles existants pour les éléments imprimés - y compris le div contenant.

REMARQUE: dans mon implémentation, ce doit être la première feuille de style. Remplacez les références de feuille (0) par le numéro de feuille approprié si vous devez le faire plus tard dans la séquence de feuilles.

— DrDave
source
2

@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);
});
— Stefan
source
2

Dans mon cas, j'ai dû imprimer une image à l'intérieur d'une page. Lorsque j'ai utilisé la solution votée, j'avais 1 page vierge et l'autre montrant l'image. J'espère que cela 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>
— Raphael Monteiro
source
2

Meilleur CSS pour s'adapter à la hauteur de l'espace vide:

@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;
  }
}
— TRI ÂN
source
2

La meilleure façon d'imprimer un Div particulier ou n'importe quel élément

printDiv("myDiv");

function printDiv(id){
        var printContents = document.getElementById(id).innerHTML;
        var originalContents = document.body.innerHTML;
        document.body.innerHTML = printContents;
        window.print();
        document.body.innerHTML = originalContents;
}
— Mahetab
source
1

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

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

puis ajoutez une classe, c'est-à-dire "noprint" à chaque balise dont vous ne souhaitez pas imprimer le contenu.

Dans l'utilisation CSS 

.noprint {
  display: none;
}
— Xn0vv3r
source
1

Si vous souhaitez uniquement imprimer cette div, vous devez utiliser l'instruction:

@media print{
    *{display:none;}
    #mydiv{display:block;}
}
— Jason Plank
source
1

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

Ensuite, 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";

}
— pmrotule
source
Cette ligne peut être utile si vous voulez un identifiant unique: printContents = printContents.replace (/ id = ("| ') (. *?) (" |') / G, 'id = $ 1 $ 2_2 $ 3');
— pmrotule
1

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

Voir CSS Design: Going to Print pour plus d'explications et d'exemples.

— Kosi2801
source
Mise à jour du lien vers le nouvel emplacement. Un commentaire au lieu d'un downvote aurait été bien.
— Kosi2801
1

J'avais plusieurs images chacune avec un bouton et je devais cliquer sur un bouton pour imprimer chaque div avec une image. Cette solution fonctionne si j'ai désactivé le cache dans mon navigateur et que 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!" />
— l'amour en direct
source
1

Une approche de plus sans affecter la page en cours et il persiste également le CSS lors de l'impression. Ici, le sélecteur doit être un sélecteur de div spécifique dont le contenu doit être imprimé.

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, le temps imparti montre que les CSS externes y sont appliqués.

— Mukesh Kumar Suman
source
CSS prend parfois du temps à charger, cette approche est ce que je cherchais pour recharger la page avant l'impression. Merci
— Arpit Shrivastava
1

J'ai essayé bon nombre des solutions proposées, aucune d'entre elles ne fonctionnait parfaitement. Ils perdent les liaisons CSS ou JavaScript. J'ai trouvé une solution parfaite et facile qui ne perd ni les liaisons 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();
    }
— BibanCS
source
Cette ouverture et création d'une autre fenêtre qui ne fonctionne pas sur Android. Seul window.print () direct fonctionne.
— Merv
1

Je suis très en retard à cette fête, mais j'aimerais proposer une autre approche. J'ai écrit un petit module JavaScript appelé PrintElements pour imprimer dynamiquement des parties d'une page Web.

Il fonctionne en itérant à travers les éléments de noeud sélectionnés, et pour chaque noeud, il parcourt l'arborescence DOM jusqu'à l'élément BODY. À chaque niveau, y compris le niveau initial (qui est le niveau du nœud à imprimer), il attache une classe de marqueur ( pe-preserve-print) au nœud actuel. Attache ensuite une autre classe marqueur ( pe-no-print) à tous les frères et sœurs du nœud actuel, mais uniquement s'il n'y a pas de pe-preserve-printclasse dessus. En tant que troisième acte, il attache également une autre classe aux éléments d'ancêtre préservés pe-preserve-ancestor.

Un css supplémentaire en impression morte simple masquera et affichera les éléments respectifs. Certains avantages de cette approche sont que tous les styles sont conservés, cela n'ouvre pas une nouvelle fenêtre, il n'est pas nécessaire de se déplacer sur de nombreux éléments DOM, et généralement il n'est pas invasif avec votre document d'origine.

Voir la démo ou lire l'article correspondant pour plus de détails .

— András Szepesházi
source
0

J'ai trouvé la solution.

@media print {
    .print-area {
        background-color: white;
        height: 100%;
        width: auto;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index:1500;
        visibility: visible;
    }
    @page{
        size: portrait;
        margin: 1cm;
    }
/*IF print-area parent element is position:absolute*/
    .ui-dialog,
    .ui-dialog .ui-dialog-content{
        position:unset !important;
        visibility: hidden;
    }
}
— user2573099
source
0

Sur la base de la réponse de @Kevin Florida, j'ai fait en sorte d'éviter que le script de la page actuelle ne soit désactivé à cause du contenu écrasé. J'utilise un autre fichier appelé "printScreen.php" (ou .html). Enveloppez tout ce que vous voulez imprimer dans une div "printSource". Et avec javascript, ouvrez une nouvelle fenêtre que vous avez créée auparavant ("printScreen.php") puis récupérez le contenu dans "printSource" de la fenêtre supérieure.

Voici le code.

Fenêtre principale : 

echo "<div id='printSource'>";
//everything you want to print here
echo "</div>";

//add button or link to print
echo "<button id='btnPrint'>Print</button>";

<script>
  $("#btnPrint").click(function(){
    printDiv("printSource");
  });

  function printDiv(divName) {
   var printContents = document.getElementById(divName).innerHTML;
   var originalContents = document.body.innerHTML;
   w=window.open("printScreen.php", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=50,left=50,width=900,height=400");
   }
</script>

Ceci est "printScreen.php" - un autre fichier pour récupérer le contenu à imprimer 

<head>
// write everything about style/script here (.css, .js)

</head>
<body id='mainBody'></body>
</html>


<script>
    //get everything you want to print from top window
    src = window.opener.document.getElementById("printSource").innerHTML;

    //paste to "mainBody"
    $("#mainBody").html(src);
    window.print();
    window.close();
</script>
— QeiNui
source
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.