Rand beim Drucken der HTML-Seite

141

Ich verwende ein separates Stylesheet zum Drucken. Ist es möglich, den rechten und linken Rand im Stylesheet festzulegen, die den Druckrand festlegen (dh den Rand auf Papier)?

Vielen Dank.

Kobra
quelle

Antworten:

246

Sie sollten cmoder mmals Einheit verwenden, wenn Sie zum Drucken angeben. Wenn Sie Pixel verwenden, übersetzt der Browser diese in etwas Ähnliches, wie es auf dem Bildschirm aussieht. Verwenden cmoder mmgewährleisten Sie eine gleichmäßige Papiergröße.

body
{
  margin: 25mm 25mm 25mm 25mm;
}

Verwenden Sie ptfür Schriftgrößen die Druckmedien.

Beachten Sie, dass der Marge auf dem Körper in CSS Stil Einstellung wird nicht den Marge im Druckertreiber einstellen, um den Druckbereich des Druckers definiert, oder Marge durch den Browser gesteuert (kann in Druckvorschau auf einigen Browsern einstellbar sein) ... Es Legt nur den Rand des Dokuments im druckbaren Bereich fest.

Sie sollten sich auch darüber im Klaren sein, dass IE7 ++ die Größe automatisch an die beste Anpassung anpasst und dazu führt, dass alles falsch ist, selbst wenn Sie cmoder verwenden mm. Um dieses Verhalten zu überschreiben, muss der Benutzer "Druckvorschau" auswählen und dann die Druckgröße auf 100%(Standard ist Shrink To Fit) einstellen .

Eine bessere Option für die vollständige Kontrolle über gedruckte Ränder besteht darin, mithilfe der @pageAnweisung den Papierrand festzulegen, der sich auf den Rand auf Papier außerhalb des HTML-Body-Elements auswirkt, das normalerweise vom Browser gesteuert wird. Siehe http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html .
Dies funktioniert derzeit in allen gängigen Browsern außer Safari.
Im Internet Explorer wird der Rand in den Einstellungen für diesen Druck tatsächlich auf diesen Wert festgelegt. Wenn Sie die Vorschau ausführen, wird dies standardmäßig angezeigt, der Benutzer kann ihn jedoch in der Vorschau ändern.

@page  
{ 
    size: auto;   /* auto is the initial value */ 

    /* this affects the margin in the printer settings */ 
    margin: 25mm 25mm 25mm 25mm;  
} 

body  
{ 
    /* this affects the margin on the content before sending to printer */ 
    margin: 0px;  
} 

Verwandte Antwort: Deaktivieren der Browserdruckoptionen (Kopf- und Fußzeilen, Ränder) von der Seite?

Scheu
quelle
3
Dies funktioniert jetzt in Chrome 18 und IE9 (frühere Versionen wurden nicht getestet). Funktioniert immer noch nicht in Firefox 12, aber Sie können eine serverseitige Erkennung durchführen und eine Körperklasse hinzufügen, damit <body class="firefox">Sie dies in Ihrem CSS tun können body.firefox {margin: 0mm; padding: 0.25in;}. Dies ist tatsächlich ein Rand von 0,75 Zoll, da Firefox bereits 0,5 Zoll hinzufügt. Dies sollte so lange funktionieren, wie Sie> = 0,5 Zoll Ränder benötigen.
MrFusion
7
+1 für @page! Genau das habe ich gebraucht, da ich mehrere Seiten drucke.
Luftangriff
2
Es funktioniert jetzt auch mit Firefox. Da Firefox gute Routinen für die automatische Aktualisierung hat, sollte dies kein Problem mehr sein, das wir angehen müssen. Ich habe auf IE, Opera, Chrome, Firefox und Safari getestet. Der einzige Browser, mit dem dies derzeit nicht funktioniert, ist Safari (Version 5.1.7 für Windows). Ich habe nicht auf Mac getestet.
Ehrfurcht
1
Dies fügt nur den oberen Rand auf der ersten Seite hinzu. Bessere Lösung für das Festlegen gleicher Ränder auf allen Seiten: stackoverflow.com/questions/37033766/…
einfach
@besimple: Siehe unteres Beispiel. Bei Verwendung der Direktive ´ @ page´ wird der Rand auf jeder Seite hinzugefügt.
Ehrfurcht
41

Zunächst versuche ich, alle meine Benutzer zu zwingen, Chrome beim Drucken zu verwenden, da andere Browser andere Layouts erstellen.

Eine Antwort auf diese Frage empfiehlt:

@page {
  size: 210mm 297mm; 
  /* Chrome sets own margins, we change these printer settings */
  margin: 27mm 16mm 27mm 16mm; 
}

Am Ende habe ich dieses CSS jedoch für alle zu druckenden Seiten verwendet:

@media print 
{
    @page {
      size: A4; /* DIN A4 standard, Europe */
      margin:0;
    }
    html, body {
        width: 210mm;
        /* height: 297mm; */
        height: 282mm;
        font-size: 11px;
        background: #FFF;
        overflow:visible;
    }
    body {
        padding-top:15mm;
    }
}



Sonderfall: Lange Tische

Wenn ich eine Tabelle über mehrere Seiten drucken musste, führte das margin:0mit @pagezu blutenden Kanten:

blutende Kanten

Ich könnte dies dank dieser Antwort lösen mit:

table { page-break-inside:auto }
tr    { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group; }
tfoot { display:table-footer-group; }

Stellen Sie außerdem die oberen und unteren Ränder ein für @page:

@page { 
    size: auto;
    margin: 20mm 0 10mm 0;
}
body {
    margin:0;
    padding:0;
}

Ergebnis:

gelöste Blutungskanten

Ich würde lieber eine Lösung bevorzugen, die prägnant ist und mit allen Browsern funktioniert. Im Moment hoffe ich, dass die obigen Informationen einigen Entwicklern bei ähnlichen Problemen helfen können.

Kai Noack
quelle
1
Ihre Lösung war von unschätzbarem Wert, wenn Sie mit Berichten arbeiten, die mit ERPNext gedruckt werden. Ich konnte mühelos meine eigenen Druckformate entwickeln und diese Hinweise haben mir sehr geholfen!
Tropicalrambler
10

Aktualisierte, einfache Lösung

@media print {
   body {
       display: table;
       table-layout: fixed;
       padding-top: 2.5cm;
       padding-bottom: 2.5cm;
       height: auto;
   }
}

Alte Lösung

Erstellen Sie mit jeder Seite einen Abschnitt und passen Sie mit dem folgenden Code Ränder, Höhe und Breite an.

Wenn Sie im Format A4 drucken.

Dann Benutzer

Größe: 8,27 Zoll und 11,69 Zoll

@page Section1 {
    size: 8.27in 11.69in; 
    margin: .5in .5in .5in .5in; 
    mso-header-margin: .5in; 
    mso-footer-margin: .5in; 
    mso-paper-source: 0;
}



div.Section1 {
    page: Section1;
} 

Erstellen Sie dann ein Div mit all Ihren Inhalten.

<div class="Section1"> 
    type your content here... 
</div>
Pir Abdul
quelle
Dies funktioniert bei mir in Chrome oder FF nicht. Sollte auch class=Section1sein class="Section1".
Nu Everest
Dies ist eine einfachere Lösung: stackoverflow.com/questions/37033766/…
einfach
9

Ich persönlich würde vorschlagen, eine andere Maßeinheit als zu verwenden px. Ich denke nicht, dass Pixel eine große Relevanz für den Druck haben. Idealerweise würden Sie verwenden:

  • Punkt (pt)
  • Zentimeter (cm)

Ich bin mir sicher, dass es noch andere gibt, und einen ausgezeichneten Artikel über Print-CSS finden Sie hier: Going to Print von Eric Meyer .

David sagt, Monica wieder einsetzen
quelle
1
Sie haben Recht, pxdas hat wenig Relevanz für den Druck. Aber der Browser "übersetzt" Pixeleinheiten, so dass es ähnlich aussieht wie auf dem Bildschirm. Es ist nicht die „Druckerauflösung dots“ als Pixel verwenden (Gott sei Dank ...).
Ehrfurcht
1

Ich empfehle auch pt versus cm oder mm, da es genauer ist. Außerdem kann ich @page in Chrome nicht zum Laufen bringen (Version 30.0.1599.69 m). Es ignoriert alles, was ich für die großen oder kleinen Ränder eingefügt habe. Aber Sie können es dazu bringen, mit den Körperrändern des Dokuments zu arbeiten, komisch.

Ironarm
quelle
0

Wenn Sie das Zielpapierformat kennen, können Sie Ihren Inhalt in einem DIV mit diesem bestimmten Format platzieren und diesem DIV einen Rand hinzufügen, um den Druckrand zu simulieren. Leider glaube ich nicht, dass Sie zusätzliche Kontrolle über die Druckfunktion haben, außer nur das Druckdialogfeld anzuzeigen.

jonjbar
quelle
Vielen Dank. Ist es nicht möglich, unabhängig vom Papierformat x Pixel links und rechts zu belassen? Grüße
Kobra
1
Ich denke, dies könnte möglich sein, wenn Sie die Größe Ihres übergeordneten DIV auf 100% einstellen und einen Ax-Pixel-Rand hinzufügen.
Jonjbar