it-swarm.com.de

Browser-Druckoptionen (Kopfzeilen, Fußzeilen, Ränder) von der Seite aus deaktivieren?

Ich habe diese Frage auf verschiedene Weise auf SO und auf mehreren anderen Websites gestellt, aber die meisten von ihnen sind entweder zu spezifisch oder veraltet. Ich hoffe, dass jemand hier eine endgültige Antwort geben kann, ohne an Spekulationen zu denken.

Gibt es eine Möglichkeit, entweder mit CSS oder mit Javascript, die Standarddruckereinstellungen zu ändern, wenn jemand in seinem Browser druckt? Und natürlich meine ich mit "Drucke von ihrem Browser" eine Form von HTML, nicht PDF oder einen anderen Plug-In-abhängigen Mime-Typ.

Bitte beachten Sie:

Wenn einige Browser dies bieten und andere nicht (oder wenn Sie nur wissen, wie dies bei einigen Browsern geschieht), freue ich mich über browserspezifische Lösungen.

Wenn Sie wissen, dass ein Mainstream-Browser bestimmte Einschränkungen gegen EVER hat, ist dies ebenfalls hilfreich. Es wäre jedoch eine recht aktuelle Dokumentation wünschenswert. (Einfach gesagt: "Das verstößt gegen die Sicherheitspolitik von XYZ") ist nicht sehr überzeugend, wenn XYZ in den letzten drei Jahren wesentliche Änderungen an dieser Richtlinie vorgenommen hat.

Wenn ich schließlich "Standarddruckeinstellungen ändern" sage, meine ich nicht immer nur für meine Seite, und ich beziehe mich speziell auf das Drucken von Rändern, Kopfzeilen und Fußzeilen.

Mir ist sehr bewusst, dass CSS die Möglichkeit bietet, die Seitenausrichtung sowie die Seitenränder zu ändern. Einer der vielen Kämpfe ist mit Firefox. Wenn ich die Seitenränder auf 1 Zoll setze, ADDIERT dies den halben Zoll, den es bereits platziert.

Ich möchte sehr gerne die Verwendung von PDFs auf der Website meines Kunden reduzieren, aber die Verletzung bei der Präsentation (sowie die mangelnde Zuverlässigkeit) sind ihre Hauptsorge.

166
Anthony

Der CSS-Standard ermöglicht einige erweiterte Formatierungen. Es gibt eine @page-Direktive in CSS, mit der einige Formatierungen möglich sind, die nur für seitenorientierte Medien (wie Papier) gelten. Siehe http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html .

Nachteil ist, dass das Verhalten in verschiedenen Browsern nicht konsistent ist. Das Festlegen der Seitenränder für Druckerseiten wird von Safari noch immer nicht unterstützt, aber alle anderen gängigen Browser unterstützen es jetzt.

Mit der Direktive @page können Sie den Druckerrand der Seite angeben (der nicht dem normalen CSS-Rand eines HTML-Elements entspricht):

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Print Test</title>
    <style type="text/css" media="print">
    @page 
    {
        size:  auto;   /* auto is the initial value */
        margin: 0mm;  /* this affects the margin in the printer settings */
    }

    html
    {
        background-color: #FFFFFF; 
        margin: 0px;  /* this affects the margin on the html before sending to printer */
    }

    body
    {
        border: solid 1px blue ;
        margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */
    }
    </style>
</head>
<body>
  <div>Top line</div>
  <div>Line 2</div>
</body>
</html>

Beachten Sie, dass hier grundsätzlich die seitenabhängigen Ränder deaktiviert werden, um den Effekt des Entfernens der Kopf- und Fußzeile zu erzielen. Der für den Hauptteil festgelegte Rand wird daher nicht für Seitenumbrüche verwendet (als kommentiert von Konrad ) bedeutet, dass es nur dann richtig funktioniert, wenn der gedruckte Inhalt nur eine Seite enthält.

Dies funktioniert nicht in Firefox 3.6, IE 7, Safari 5.1.7 oder Google Chrome 4.1.

Das Festlegen des Randes @page wirkt sich in IE 8, Opera 10, Google Chrome 21 und Firefox 19 aus.
Obwohl die Seitenränder für Ihren Inhalt in diesen Browsern richtig festgelegt sind, ist das Verhalten nicht ideal, wenn versucht wird, das Ausblenden der Kopf-/Fußzeile zu beheben. 

So verhält es sich in verschiedenen Browsern:

  • In Internet Explorer ist der Rand in den Einstellungen für diesen Druck auf 0 mm gesetzt. Wenn Sie eine Vorschau erstellen, erhalten Sie standardmäßig 0 mm. Der Benutzer kann sie jedoch in der Vorschau ändern.
    Sie werden sehen, dass der Seiteninhalt tatsächlich positioniert ist, die Kopf- und Fußzeile des Browsers jedoch mit nicht transparentem Hintergrund angezeigt wird, sodass der Seiteninhalt an dieser Position effektiv ausgeblendet wird. 

  • In Firefox neueren Versionen ist es positioniert, aber sowohl der Kopfzeilen-/Fußzeilentext als auch der Inhaltstext werden angezeigt. Es sieht also aus wie eine schlechte Mischung aus Browserkopftext und Ihrem Seiteninhalt.

  • In Opera blendet der Seiteninhalt den Header aus, wenn ein nicht transparenter Hintergrund in der Standard-CSS verwendet wird, und die Kopf-/Fußzeilenposition steht in Konflikt mit dem Inhalt. Ganz gut, sieht aber seltsam aus, wenn der Rand auf einen kleinen Wert gesetzt wird, der dazu führt, dass die Kopfzeile teilweise sichtbar ist. Auch der Seitenrand ist nicht richtig eingestellt.

  • In Chrome neueren Versionen werden die Kopf- und Fußzeile des Browsers ausgeblendet, wenn der @ page-Rand so klein eingestellt ist, dass die Kopf-/Fußzeile mit dem Inhalt in Konflikt steht. Meiner Meinung nach sollte dies genau so sein.

Die Schlussfolgerung ist also, dass Chrome die beste Implementierung in Bezug auf das Ausblenden der Kopf-/Fußzeile hat. 

181
awe

Jede neuere Version von Chrome und Opera sowie Firefox 48 Alpha 1 und höher

Sie können den Seitenrand auf eine Größe einstellen, die zu klein ist, um den Text zu enthalten, um dies zu deaktivieren (leihen Sie sich die Antwort von awe ):

@page {
  size: auto;  /* auto is the initial value */
  margin: 0mm; /* this affects the margin in the printer settings */
}
html {
  background-color: #FFFFFF;
  margin: 0px; /* this affects the margin on the HTML before sending to printer */
}
body {
  border: solid 1px blue;
  margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */
}
<ol>
  <li>
    <a href="data:,No Javascript :-(" target="_blank">Middle-click to open in new tab</a>
  </li>
  <li>
    <a href="javascript:print()">Print</a>
  </li>
</ol><!-- Hack to work around stack snippet restrictions --><script type=application/javascript>document.links[0].href="data:text/html;charset=utf-8,"+encodeURIComponent('<!doctype html>'+document.documentElement.outerHTML)</script>

Für Firefox-Versionen bis zu 48 alpha 1

Sie können dem Tag <html> ein Attribut mozNoMarginBoxes hinzufügen, um zu verhindern, dass URL, Seitennummern und andere Elemente gedruckt werden, die Firefox am Seitenrand hinzufügt.

Es arbeitet ab Firefox 29. Sie können einen Screenshot des Unterschieds hier sehen oder sehen Sie hier ein Live-Beispiel.

Beachten Sie, dass das Attribut mozDisallowSelectionPrint im Beispiel not ist, um den Text von den Rändern zu entfernen. Siehe Was bewirkt das Attribut mozdisallowselectionprint in PDF.js?.

Andere Browser

Leider scheint es keine Möglichkeit zu geben, dieses Problem in Internet Explorer zu beheben. Sie müssen also auf PDF zurückgreifen oder die Benutzer bitten, Randtexte zu deaktivieren.

Gleiches gilt für Safari. Laut einem Kommentar von @Luiz Perez unterstützen die neuesten Versionen von Safari (8, 9.1 und 10) @page immer noch nicht zur Unterdrückung von Randtexten.

Ich kann nichts auf Edge finden und ich habe keine Windows 10-Installation zum Testen.

85
user2428118

Wie @Awe oben gesagt hatte, ist dies die Lösung, die in Chrome funktioniert!

Stellen Sie nur sicher, dass dies in den Head-Tags INSIDE ist:

<head>
<style type="text/css" media="print">
    @page 
    {
        size: auto;   /* auto is the initial value */
        margin: 0mm;  /* this affects the margin in the printer settings */
    }

    body 
    {
        background-color:#FFFFFF; 
        border: solid 1px black ;
        margin: 0px;  /* this affects the margin on the content before sending to printer */
   }
</style>
</head>
20
Works

Ich habe eine ähnliche Anfrage von einem Client, der den Header, die Seitenzahlen und die HTML-Fußzeile entfernen möchte. In diesem Fall präsentiert der Client eine HTML-Seite, die als formales Zertifikat verwendet werden kann. Die hinzugefügte URL, Seite und Header sind irrelevant und führen zu einem weniger zufriedenstellenden Endprodukt. In mancher Hinsicht sieht es einfach billig aus. 

Media = Print konnte diese Browser-Standardeinstellungen nicht deaktivieren. Die einzige Problemumgehung besteht darin, den Benutzer anzuweisen, auf die Schaltfläche "Gear" zu klicken und diese Elemente ein- oder auszuschalten. Im Ernst, ich hatte keine Ahnung, dass ich das seit 20 Jahren tun könnte (und wir glauben, dass der typische Benutzer eine Ahnung haben wird, auf den Umschaltknopf zu klicken?).

Wenn CSS Media = Print unterstützt, sollte es die Möglichkeit unterstützen, das gesamte Druckerlebnis für Endbenutzer zu steuern. Ich weiß es zu schätzen, dass die Browser die hinzugefügten Felder bereitstellen, aber warum sollte man nicht zulassen, dass CSS das Druckergebnis insgesamt steuert, wenn dies gewünscht ist? Eine 90% ige Lösung könnte mit drei weiteren Feldern 100% sein! Eine einfache: 

#BrowserPrintDefaults{display:none} 

würde genügen. 

Auch hier ist es keine Frage, ob der Endbenutzer es ausdrucken möchte oder nicht (möglicherweise ist Ihr Kunde sehr privat und möchte keine gedruckten URLs. Ich bin froh, den Endbenutzer zu verteidigen, aber wenn jemand eine Antwort sucht, antworten Sie nicht darauf, dass es das Recht des Endbenutzers ist, ein- oder auszublenden. Manchmal ist es das Recht des Kunden, die Rechnungen zu bezahlen.

16
CAL

Es ist nicht möglich, die Druckereinstellungen, Ränder oder andere Browsereinstellungen vorübergehend oder dauerhaft über CSS oder JavaScript zu ändern.

Dies ist zwar ungünstig für Ihre echte Anforderung, aber diese Einschränkungen sind der Grund, warum 95% der Internetbenutzer JavaScript in ihren Browsern aktiviert lassen. ( Browserstatistik )

6
Daniel Vassallo

Probieren Sie diesen Code aus, funktioniert für mich 100%: 
F&UUML;R Landschaft:

<head>
<style type="text/css">

@page{
  size: auto A4 landscape;
  margin: 3mm;
}

</style>
</head>

F&UUML;R Portait:

<head>
<style type="text/css">

@page{
  size: auto;
  margin: 3mm;
}

</style>
</head>
5
Iyes boy

Da Sie "in ihrem Browser" und Firefox erwähnt haben, können Sie bei Verwendung von Internet Explorer die Kopf-/Fußzeile der Seite deaktivieren, indem Sie den Wert vorübergehend in der Registrierung festlegen. Ein Beispiel finden Sie in here . AFAIK Ich habe in anderen Browsern keine Möglichkeit dafür gefunden. Sowohl Daniels als auch Mickels Antworten scheinen miteinander zu kollidieren. Ich denke, es könnte eine ähnliche Einstellung in der Registrierung für Firefox geben, um Kopf-/Fußzeilen zu entfernen oder sie anzupassen. Hast du es überprüft?

Ich hoffe, das hilft und frohe Feiertage.... Viele Grüße.... Tom.

0
t0mm13b

Das funktionierte für mich mit ca. 1cm Rand

@page 
{
    size:  auto;   /* auto is the initial value */
    margin: 0mm;  /* this affects the margin in the printer settings */
}
html
{
    background-color: #FFFFFF; 
    margin: 0mm;  /* this affects the margin on the html before sending to printer */
}
body
{
    padding:30px; /* margin you want for the content */
}
0
afshin

@page margin: 0mm funktioniert jetzt in Firefox 19.0a2 (2012-12-07).

0
thinsoldier

Ich habe mein Problem mit einigen CSS in der Webseite gelöst.

<style media="print">
   @page {
      size: auto;
      margin: 0;
  }
</style>
0
Kabir Hossain