J'ai le CSS suivant pour mon style d'impression:Cachez tous les éléments sauf un div pour une vue d'impression
* {
display:none;
}
#printableArea {
display:block;
}
J'attendu à ce cacher tous éléments, et ne montrent que la printableArea, mais tout obtient caché. En mode d'impression, tout ce que je reçois est une page blanche.
Je l'ai inclus correctement dans la tête, avec media="print" sur cette feuille de style particulière.
Si un élément n'est pas affiché, aucun de ses enfants ne sera affiché (quelle que soit la propriété d'affichage définie).
* correspond à l'élément <html>, de sorte que le document entier est masqué.
Vous devez être plus sélectif sur ce que vous cachez.
html body * {
display:none;
}
#printableArea {
display:block;
}
En outre, vous devrez peut-être un! Important sur #printableArea, mais probablement pas.
Cela ne fonctionnera que si #printableArea est un enfant direct du corps. –
Si vous souhaitez utiliser JavaScript, vous pouvez essayer ce simple extrait qui ne nécessite même pas jQuery:
document.body.innerHTML=document.getElementById('printableArea').innerHTML;
cette action remplacera tout le HTML, pas un résultat requis –
Vous pouvez essayer sauter vers le haut au-dessus de tout. Cela a résolu 90% de mes problèmes, alors j'ai juste dû faire une classe .noprint et l'ajouter à quelques éléments épars.
.print_area{
position: fixed;
top: 0px;
left: 0px;
width: 100%;
z-index: 9999;
background-color: #ffffff;
}
Vous prenez la bonne approche générale, mais vous voulez utiliser visibility: hidden au lieu de display: none de sorte que vous pouvez définir des éléments enfants pour être visibles.
Ah, merci! Je suppose que je pourrais simplement placer printableArea en dehors de l'enveloppe de la page, puis cacher l'enveloppe, montrant le div d'impression. – FatherCarbon
@FatherCarbon - c'est ce que je viens de mettre en place et il semblerait que ça fera l'affaire bien – Michael12345