Comment imprimer la div indiquée (sans désactiver manuellement tous les autres contenus de la page) ?
Je veux éviter une nouvelle boîte de dialogue d'aperçu, donc créer une nouvelle fenêtre avec ce contenu n'est pas utile.
La page contient deux tableaux, dont l'un contient la division que je veux imprimer. Le tableau est stylé avec des styles visuels pour le Web, qui ne doivent pas apparaître à l'impression.
Voici une solution générale, utilisant CSS uniquement dont j'ai vérifié le fonctionnement.
@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. Utilisation de 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.
Utilisation de visibility fonctionne mieux puisque vous pouvez activer la visibilité pour les descendants. Cependant, les éléments invisibles continuent d'affecter la mise en page. section-to-print en haut à gauche pour qu'il s'imprime correctement.
#section_to_print devrait mieux fonctionner avec position:static; au lieu de position:absolute;
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 -.-.
J'ai une meilleure solution avec un code minimal.
Placez votre partie imprimable dans un div avec un id 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 de la div comme je l'ai fait ci-dessus.
Maintenant, créons un javascript très 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 avez remarqué 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 n'est pas ce à quoi je fais référence) est le fait qu'elles ne seront JAMAIS traduites sur tous les navigateurs, jamais ! Si vous voulez que les styles soient différents, faites comme indiqué dans la réponse vérifiée en ajoutant l'attribut media à un lien de feuille de style (media="print").
Sans fioritures, léger, ça marche tout simplement.
@Kevin j'ai essayé ceci pour le formulaire mais il imprime un formulaire vide (sans données) et j'ai besoin d'un formulaire rempli à imprimer avant de le soumettre.
Cela fonctionne parfaitement bien dans Fierfox et Chrome. Pour certaines raisons, IE se bloque lors de l'ouverture et de l'écriture du contenu.
@Kevin : Grande solution.. Cependant, elle ne capture pas les couleurs et les styles d'arrière-plan ? Il n'imprime que du texte brut. Une modification est-elle possible pour obtenir les couleurs et les styles également ?
Toutes les réponses jusqu'à présent sont assez imparfaites - elles impliquent soit d'ajouter class="noprint" à tout ou va tout gâcher display en #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 choses dans votre HTML...
Je pense que vous avez raison, mais comment supprimer le style du tableau qui entoure le div (si c'est possible de supprimer le style - je peux imprimer le tableau et exclure le reste du contenu assez facilement).
Je préfère utiliser le 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/
L'astuce consiste à l'appeler sur un événement généré par l'utilisateur, comme un clic de souris. vous pouvez également ajouter après la première ligne : if(!w)alert('Please enable pop-ups') ;
Pourriez-vous utiliser un imprimer la feuille de style et utiliser les CSS pour organiser le contenu que vous voulez imprimer ? Lire cet article pour plus d'informations.
J'ai une feuille de style pour l'impression - j'essaie d'éviter de mettre une règle de style dans tous les autres contenus...
J'ai un tableau avec du style, contenant la division en question. Si je règle le tableau sur display:none, puis-je encore afficher la division ?
Je pense que oui, et vous pourriez essayer de marquer la règle comme !importante pour la renforcer !
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
2 votes
stackoverflow.com/questions/2255291/ ce lien fonctionne parfaitement