Imprimer <div id = "printarea"> </ div> uniquement?
Comment imprimer le div indiqué (sans désactiver manuellement tout autre contenu de 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 le div que je veux imprimer - le tableau est stylé avec des styles visuels pour le Web, qui ne doivent pas apparaître sous forme imprimée.
Voici une solution générale, en utilisant CSS seulement, 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. Utiliser display est délicat, car si un élément possède display:none, aucun de ses descendants ne l'affichera. Pour l'utiliser, vous devez changer la structure de votre page.
Utiliser visibility fonctionne mieux car vous pouvez activer la visibilité pour les descendants. Les éléments invisibles affectent toujours la mise en page, je déplace donc section-to-print en haut à gauche pour que la copie s’effectue correctement.
J'ai une meilleure solution avec un code minimal.
Placez votre partie imprimable dans une 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!" />
Ajoutez ensuite un événement comme un onclick (comme indiqué ci-dessus) et transmettez l'identifiant de la 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 librairies JS comme jquery. Le problème avec les solutions vraiment compliquées (la réponse n'est pas compliquée et ce n'est pas ce dont je parle) est le fait que cela ne se traduira JAMAIS sur tous les navigateurs! Si vous souhaitez différencier les styles, procédez comme indiqué dans la réponse cochée en ajoutant l'attribut média à un lien de feuille de style (media = "print").
Pas de peluches, léger, ça marche.
Jusqu'à présent, toutes les réponses sont assez imparfaites - elles impliquent soit d'ajouter class="noprint" à tout, soit de gâcher display dans #printable.
Je pense que la meilleure solution serait de créer une enveloppe autour des éléments 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 éléments de votre code HTML ...
Avec jQuery, c'est aussi simple que cela:
w=window.open();
w.document.write($('.report_left_inner').html());
w.print();
w.close();
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.
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.
Je n'ai pas vraiment aimé aucune de ces réponses dans son ensemble. Si vous avez une classe (par exemple printableArea) et que vous en avez un enfant immédiat, 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;
}
L'utilisation de la visibilité peut entraîner de nombreux problèmes d'espacement et de pages vierges. En effet, la visibilité maintient l'espace des éléments, le rend simplement masqué, 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, mais uniquement les enfants immédiats du corps et que vous les cachez. Les autres solutions ci-dessous, avec display css, masquent tous les éléments, ce qui affecte tout le contenu du contenu de printableArea.
Je ne recommanderais pas javascript, car l'utilisateur aurait 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 code HTML du corps, de supprimer tous les éléments indésirables, d’imprimer, puis de rajouter le code HTML. Comme mentionné, j’éviterais cela si vous le pouviez et utilisez une option CSS comme ci-dessus.
REMARQUE: vous pouvez ajouter n'importe quel CSS dans le CSS d'impression à l'aide de styles en ligne:
<style type="text/css">
@media print {
//styles here
}
</style>
Ou comme je l’utilise habituellement est une balise de lien:
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
Indiquez quel que soit l'élément sur lequel vous souhaitez imprimer l'identifiant
printMe.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>Appelle la fonction
<a href="javascript:void(processPrint());">Print</a>
hm ... utilisez le type d'une 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; }
Étape 1: écrivez le code 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>
<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>
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 une page blanche et une autre montrant l'image. J'espère que ça va aider 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>
J'ai récupéré le contenu en utilisant JavaScript et créé une fenêtre que je pouvais imprimer à la place ...
La méthode de Sandro fonctionne très bien.
Je l'ai modifié pour permettre l'utilisation de plusieurs liens printMe, en particulier pour être utilisés dans des pages à onglets et pour développer du texte.
function processPrint(printMe){ <- appelle ici une variable
var printReadyElem = document.getElementById(printMe); <- a supprimé les guillemets autour de printMe pour demander une variable
<a href="javascript:void(processPrint('divID'));">Print</a> <- en transmettant l'identifiant div à imprimer à la fonction permettant de transformer la variable printMe en identifiant div. les guillemets simples sont nécessaires
Avec CSS 3, vous pouvez utiliser les éléments suivants:
body *:not(#printarea) {
display: none;
}
@ Kevin Florida Si vous avez plusieurs divs avec la même classe, vous pouvez les 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);
});
printDiv (divId): Une solution généralisée pour imprimer n’importe quel div sur n’importe quelle page.
J'avais un problème similaire mais je voulais (a) pouvoir imprimer la page entière ou (b) imprimer l'un des plusieurs domaines spécifiques. Ma solution, grâce à une grande partie de ce qui précède, vous permet de spécifier tout objet div à imprimer.
La solution pour cette solution consiste à ajouter une règle appropriée à la feuille de style du support d'impression afin que la div demandée (et son contenu) soit imprimée.
Tout d’abord, créez le css d’impression nécessaire pour tout supprimer (mais sans la règle spécifique autorisant l’élément à 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 la zone allouée est laissée vide.
- print vous permet d’avoir des éléments qui apparaissent dans la version imprimée mais pas sur la page d’écran. Celles-ci auront normalement "display: none" pour le style d'écran.
Ensuite, insérez trois fonctions JavaScript. Le premier bascule simplement sur la feuille de style du support d'impression.
function disableSheet(thisSheet,setDisabled)
{ document.styleSheets[thisSheet].disabled=setDisabled; }
La seconde fait le vrai travail et la troisième nettoie ensuite. La seconde (printDiv) active la feuille de style du support d'impression, puis ajoute une nouvelle règle pour permettre à la division souhaitée de s'imprimer, imprime l'impression, puis ajoute un délai avant l'entretien final (sinon, les styles peuvent être réinitialisés avant l'impression réelle). 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);
}
La dernière fonction supprime la règle ajoutée et redéfinit le style d'impression sur Désactivé afin 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 consiste à ajouter une ligne à votre traitement onload afin que le style d'impression soit initialement désactivé, permettant ainsi l'impression de pages entières.
<body onLoad='disableSheet(0,true)'>
Ensuite, à partir de n’importe où dans votre document, vous pouvez imprimer une div. Il suffit d'émettre printDiv ("thedivid") à partir d'un bouton ou autre.
Un gros plus pour cette approche, c'est une solution générale pour imprimer le contenu sélectionné à partir d'une page. Il permet également d'utiliser les styles existants pour les éléments imprimés, y compris le div qui les contient.
REMARQUE: dans ma mise en œuvre, il doit s'agir de 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 définir ultérieurement dans la séquence de feuilles.
J'ai essayé plusieurs des solutions fournies. Aucune d'entre elles ne fonctionnait parfaitement. Ils perdent soit 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();
}
Je suis très en retard pour cette soirée, mais j'aimerais ajouter une autre approche. 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 noeud à imprimer), il associe une classe de marqueurs (pe-preserve-print) au noeud actuel. Attache ensuite une autre classe de marqueurs (pe-no-print) à tous les frères du nœud actuel, mais uniquement s'il n'y a pas de classe pe-preserve-print. En tant que troisième acte, il associe également une autre classe aux éléments d'ancêtre 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, il est non invasif avec votre document original.
Voir le démo , ou lisez l'article connexe pour plus de détails .
Une autre approche sans affecter la page en cours et elle conserve également le css lors de l’impression. Ici, sélecteur doit être un sélecteur de division spécifique du contenu à 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 peu de temps montrer que css externe est appliqué à elle.
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, à savoir "noprint" à chaque balise dont vous ne voulez pas imprimer le contenu.
Dans le CSS utiliser
.noprint {
display: none;
}
Vous pouvez utiliser un style CSS distinct qui désactive tous les autres contenus, à l'exception de celui portant l'identifiant "printarea".
Voir Conception CSS: impression pour plus d'explications et des exemples.
La fonction printDiv () est apparue 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 une div pour tout ce qui s'appelle "body_allin" et une 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";
}
J'avais plusieurs images chacune avec un bouton et j'avais besoin de cliquer sur un bouton pour imprimer chaque image div avec une image. Cette solution fonctionne si j'ai désactivé le cache dans mon navigateur et si 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!" />
Meilleur css pour s'adapter à l'espace hauteur 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;
}
}
Vous pouvez utiliser ceci: http://vikku.info/codesnippets/javascript/print-div-content-print-only-the-content-of-an-html-element-and- pas-le-tout-document/
Ou utilisez visibility:visible et visibility:hidden propriété css avec @media print{}
'display: none' cachera tous les 'display: block' imbriqués. Ce n'est pas une solution.