web-dev-qa-db-fra.com

Disposition d'impression CSS - Impression sur une seule page

Je suis gravement coincé et les archives SO ne m'aident pas. Peut-être que je cherche au mauvais endroit. Voici la petite histoire:

  • J'ai une vue que je dois imprimer sur une seule page entière. Je ne peux pas avoir une deuxième page et j'ai besoin qu'elle soit aussi grande que possible sur la page.
  • La solution doit être raisonnablement compatible avec tous les navigateurs (IE9 +, Safari, Chrome, FF).
  • J'ai déjà une solution PDF PDF, mais j'ai également besoin d'une solution d'impression Vanilla standard.
  • La page est construite avec Bootstrap, mais j'ai remplacé la plupart des classes pour Print.

La structure de la page HTML est la suivante. J'ai déposé quelques CSS en ligne afin de personnaliser certaines de ces informations.

<div class="container">
  <div class="row">
    <div class="span16">

      <style type="text/css" media="all">
        @media print {
          html, body {
            margin: 0;
            padding: 0;
            background: #FFF; 
            font-size: 9.5pt;
          }
          .container, .container div {
            width: 100%;
            margin: 0;
            padding: 0;
          }
          .template { overflow: hidden; }
          img { width: 100%; }
        }
      </style>

      <div class="template_holder">
        <div class="template">
          <img src="some_big_image">
          <div>
            [PLAIN TEXT IN HERE, POSITION:ABSOLUTE OVER THE IMAGE]
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Je me rends compte que c'est une forme quelque peu médiocre d'inclure du CSS en ligne ici, mais il doit remplacer un tas d'autres CSS qui l'ont précédé pour diverses raisons. Je pourrais le retirer, mais l'essentiel est le suivant. Lorsque j'imprime, j'obtiens quelque chose qui me semble correct, plus une deuxième page supplémentaire. Quand je rétrécis l'image, tout va bien, mais j'ai besoin de l'image pour remplir le DIV.

Je pensais que régler la largeur à 100% était le problème, mais je me suis assuré que le rapport d'aspect de l'image était plus petit que la page (même avec des marges). Fondamentalement, l'image en pleine largeur ne doit pas provoquer de saut de page. Qu'est-ce que je fais mal et que dois-je changer? Toute aide est appréciée ...

htmlcssprintingcss3stylesheet
24
Nuby

Je pense que la frustration avec ce détail de CSS est que la réponse doit être adaptée à mon propre projet. Merci à @blahdiblah et aux autres pour leurs suggestions. Un mélange de solutions a conduit à des résultats presque parfaits, bien sûr IE me pose toujours des problèmes ...

Cela avait à voir avec une réinitialisation matérielle de tous les styles de remplissage/marge, puis avec beaucoup de !important marqueurs pour le rembourrage, la largeur, la hauteur, etc. Fondamentalement, j'ai rempli la page de hauteur, puis j'ai déposé des objets 100% larges. Le résultat est une couverture maximale sur une page 8,5 x 11 avec aucun débordement sur une deuxième page.

@media print {
  * { margin: 0 !important; padding: 0 !important; }
  #controls, .footer, .footerarea{ display: none; }
  html, body {
    /*changing width to 100% causes huge overflow and wrap*/
    height:100%; 
    overflow: hidden;
    background: #FFF; 
    font-size: 9.5pt;
  }

  .template { width: auto; left:0; top:0; }
  img { width:100%; }
  li { margin: 0 0 10px 20px !important;}
}
19
Nuby

Il semble que votre image soit tout simplement trop grande. Puisque l'image est de taille personnalisée, pourquoi ne pas la définir

img { height: 100%; }

au lieu de width? Cela garantirait au moins qu'il ne déborderait pas sur une deuxième page.

Gardez également à l'esprit que les imprimantes sont plus variables que les navigateurs. Vous pouvez peut-être éliminer chaque dernier centimètre d'espace sur votre imprimante, mais quelqu'un d'autre peut avoir des marges d'impression considérablement différentes et ruiner tout votre travail acharné.

2
blahdiblah