web-dev-qa-db-fra.com

Imprimer le contenu modal sur une page A4 complète

J'essaie deux choses:

  1. Afficher le contenu sur un modal comme son apparence sur une page A4
  2. windows.print () le modal sur une page A4 via les principaux navigateurs

Voici mon CSS:

.page {
    width: 210mm;
    min-height: 297mm;
    padding: 20mm;
    margin: 10mm auto;
    border: 1px #D3D3D3 solid;
    border-radius: 5px;
    background: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.subpage {
    padding: 1cm;
    border: 5px black solid;
    height: 257mm;
    outline: 2cm #FFEAEA solid;
}

@page {
    size: A4;
    margin: 0;
}

@media print {
    html, body {
        margin:0 !important;
        padding:0 !important;
        height:100% !important;
        visibility: hidden;
    }

    .page .subpage .col-md-12,.col-lg-12{
        float:left;
        width:100%;
    }
    .page .subpage {
        padding: 1cm;
        border: 5px black solid;
        height: 257mm;
        outline: 2cm #FFEAEA solid;
        position:absolute;
    }
    .page {
        visibility: visible;
    }
}

Voici à quoi ressemble le modal:  enter image description here

Mais voici à quoi ça ressemble en appelant window.print() lors d’un clic sur le bouton:  enter image description here

Qu'est-ce que je fais mal ici? Débutant en CSS relatif, nous avons examiné un ensemble de SO questions et d’autres ressources, mais ne parvenons pas à comprendre.

UPDATE: J'ai utilisé z-index: 9999 et width: 140% pour obtenir le contenu modal (c'est-à-dire class = "page") afin de couvrir la largeur de la page A4. Ne pensez pas que c'est la meilleure solution, vous ne pouvez pas obtenir la hauteur nécessaire pour étirer la totalité des 297 mm; hauteur toujours autant que celle montrée dans la deuxième image. 140% semble correct sur un fichier PDF enregistré via Chrome, est coupé (naturellement) dans Firefox et s’affiche sous forme de fichier PDF vierge dans IE. CSS mis à jour: @media print .page {z-index: 9999;padding: 20mm;margin: 10mm auto;width: 140%;height:100%;position: fixed;top: 15mm;bottom:0;left: 20mm;visibility:visible;} 

javascripthtmlcsstwitter-bootstrapprinting
16
Reise45

J'écrirais un commentaire mais je ne peux pas, alors répondez à la question. tl; dr, vous devez fournir plus de code ou reproduire ce problème à un endroit où nous pouvons le voir.

J'ai mis votre code dans une page simple avec juste un div de classe page et imbriqué un div de classe subpage. Il y a quelques problèmes de remplissage et la vue d'impression ne ressemble en rien à la vue Web.

Votre min-height: 297mm; n'était pas nécessaire et ajoutait de l'espace supplémentaire, car il ne correspond pas à votre réglage de hauteur pour .subpage.

Votre position:absolute; a écrasé votre .subpage en vue d'impression.

Mais avec ces deux modifications, votre css, avec de simples divs au format HTML, fonctionne très bien. Je soupçonne que quelque chose d'autre sur votre page a des dimensions contradictoires, mais encore une fois, sans reproduction sur du violon ou quelque chose, nous ne pouvons pas le voir.

PS: J'ai vu cet autre billet d'il y a quelque temps et il y a une DEMO dedans. Cela semble prometteur: CSS pour définir le format de papier A4

2
Ognami

S'il vous plaît essayez ceci

@media print{
  body * {
    visibility: hidden;
  }
  #page, #page * {
    visibility: visible;
  }
  #page {
    position: absolute;
    top: 0;
    left: 0;
  }
}
1
Adeeb basheer

J'ai mis à jour un exemple jsfiddle pour répondre à vos besoins

Voici le code css

@media screen {
  #printSection {
      display: none;
  }
}

@media print {
  body * {
    visibility:hidden;
  }
  #printSection, #printSection * {
    visibility:visible;
  }
  #printSection {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background: yellow;
  }
}

Voici le HTML:

<div>
  <button id="btnPrint">Print (this button should also be NOT be printed)!</button>
</div>

<hr />
<div id="printSection">
  <div id="printThis">
    This should BE printed!
  </div>

  <div id="printThisToo">
    This should BE printed, too!
  </div>

</div>

et un code javascript pour appeler print:

document.getElementById("btnPrint").onclick = function() {
  window.print();
}

http://jsfiddle.net/95ezN/1459/

 enter image description here

0
flakerimi