Drucke modaler Inhalt als Voll A4 Seite

Question

Ich versuche, zwei Dinge:

1. Inhalt anzeigen auf einem modalen als, wie es auf einer A4-Seite
2. windows.print() die modalen auf einer A4-Seite erscheinen würde durch gängige Browser

Es folgt 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; 
    } 
} 

Hier ist, wie die modale aussieht:

Aber das ist, wie es beim Aufruf window.print() auf den Knopf klicken aussieht:

Was mache ich falsch hier? Relative CSS-Neulinge, haben sich eine Reihe von SO-Fragen und andere Ressourcen angeschaut, können dies aber nicht herausfinden.

AKTUALISIERUNG: Ich verwendete Z-Index: 9999 und Breite: 140%, um den modalen Inhalt (d. H. Klasse = "Seite") zu erhalten, um die A4-Seitenbreite abzudecken. Denken Sie nicht, dass es die beste Lösung ist, kann auch Höhe nicht erreichen, um das ganze 297mm zu dehnen; Höhe immer noch so viel wie im zweiten Bild gezeigt. Die 140% sehen gut aus auf einem PDF, das über Chrome gespeichert wurde, ist (verständlicherweise) in Firefox deaktiviert und erscheint als leeres PDF in IE. Aktualisiertes CSS: @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;}

Answer 1

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

Ich habe Ihren Code in einfache Seite mit nur einem div mit Klasse page und verschachtelt ein div mit Klasse subpage und es gibt einige Polsterung Probleme und die Druckansicht sieht nicht wie die Web-Ansicht.

Ihre min-height: 297mm; wurde nicht benötigt und fügte zusätzlichen Platz hinzu, da sie nicht mit Ihrer Höheneinstellung für .subpage übereinstimmt.

Ihre position:absolute; zerquetscht Ihre .subpage in Druckansicht.

Aber mit diesen zwei Tweaks funktioniert Ihr CSS, mit nur einfachen divs in HTML, in Ordnung. Ich vermute, dass etwas anderes auf deiner Seite widersprüchliche Dimensionen hat, aber wieder, ohne eine Reproduktion auf Geige oder etwas, können wir es nicht sehen.

PS: Ich sah diesen anderen Beitrag von vor einiger Zeit und da ist eine DEMO drin.Es sieht vielversprechend aus: CSS to set A4 paper size

Answer 2

Bitte versuchen Sie diese

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

Answer 3

ich ein jsfiddle Beispiel aktualisiert haben Ihre Bedürfnisse

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 html passen:

<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 ein JavaScript-Code drucken nennen:

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

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