webentwicklung-frage-antwort-db.com.de

Drucken Sie modalen Inhalt als vollständige A4-Seite

Ich versuche zwei Dinge:

  1. Zeigen Sie den Inhalt eines Modals so an, wie er auf einer A4-Seite erscheinen würde
  2. windows.print () das Modal auf einer A4-Seite durch die wichtigsten Browser

Folgendes ist mein 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;
    }
}

So sieht der Modal aus:  enter image description here

Aber so sieht es aus, wenn window.print() beim Klicken auf die Schaltfläche aufgerufen wird:  enter image description here

Was mache ich hier falsch? Relative CSS-Neulinge haben sich eine Menge SO - Fragen und andere Ressourcen angesehen, können dies jedoch nicht verstehen.

UPDATE: Ich habe z-index: 9999 und width: 140% verwendet, um den modalen Inhalt (d. H. Class = "page") zu erhalten, um die A4-Seitenbreite abzudecken. Ich glaube nicht, dass dies die beste Lösung ist. Außerdem kann die Höhe des gesamten 297 mm nicht gedehnt werden. Höhe noch so viel wie im zweiten Bild gezeigt. Die 140% sehen in einem durch Chrome gesicherten PDF gut aus, sind (verständlicherweise) in Firefox abgeschnitten und werden im IE als leeres PDF angezeigt. CSS aktualisiert: @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;} 

16
Reise45

Ich würde einen Kommentar schreiben, aber ich kann es nicht, also das Antwortfeld. tl; dr, Sie müssen mehr Code eingeben oder dieses Problem an einem Ort reproduzieren, an dem wir es sehen können.

Ich habe Ihren Code in eine einfache Seite mit nur einem div mit der Klasse page und einem verschachtelten div mit der Klasse subpage eingefügt, und es gibt einige Probleme mit dem Auffüllen, und die Druckansicht sieht der Webansicht nicht ähnlich.

Ihr min-height: 297mm; war nicht notwendig und fügte zusätzlichen Platz hinzu, da er nicht mit Ihrer Höheneinstellung für .subpage übereinstimmt.

Ihr position:absolute; hat Ihren .subpage in der Druckansicht gelöscht.

Mit diesen beiden Optimierungen funktioniert Ihre CSS mit einfachen Divs in HTML jedoch gut. Ich vermute, dass etwas anderes auf Ihrer Seite widersprüchliche Dimensionen hat, aber ohne Reproduktion einer Geige oder etwas können wir es nicht sehen.

PS: Ich habe diesen anderen Post vor einiger Zeit gesehen und da ist eine DEMO. Es sieht vielversprechend aus: CSS zum Einstellen des A4-Formats

2
Ognami

Bitte versuchen Sie das

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

Ich habe ein jsfiddle-Beispiel für Ihre Anforderungen aktualisiert

Hier ist CSS-Code

@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;
  }
}

Hier ist 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>

und einen Javascript-Code zum Aufrufen von print:

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

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

 enter image description here

0
flakerimi