181

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

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

Bitte beachten Sie:

Wenn einige Browser dies anbieten und andere nicht (oder wenn Sie nur wissen, wie es für einige Browser geht), begrüße ich browserspezifische Lösungen.

Wenn Sie einen Mainstream-Browser kennen, der bestimmte Einschränkungen hat, ist dies ebenfalls hilfreich, aber eine ziemlich aktuelle Dokumentation wäre wünschenswert. (Nur zu sagen, "das verstößt gegen die Sicherheitsrichtlinie 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 für immer, nur für meine Seite, und ich beziehe mich speziell auf Druckränder, Kopf- und Fußzeilen.

Mir ist sehr bewusst, dass CSS die Möglichkeit bietet, die Seitenausrichtung sowie die Seitenränder zu ändern. Einer der vielen Probleme ist mit Firefox. Wenn ich die Seitenränder auf 1 Zoll einstelle, wird dies dem halben Zoll hinzugefügt, den es bereits eingerichtet hat.

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

javascript html css browser printing Anthony
quelle

Gibt es einen bestimmten Grund, warum Sie dies tun möchten? Wenn Sie die Anforderung sagen, dann könnte es vielleicht eine andere mögliche Lösung geben ... Für mich sieht das Ändern der Benutzereinstellungen nicht nach einer guten Lösung aus ...

Nivas

1

Genau. Ich möchte die Benutzereinstellungen nicht ändern. Ich möchte die Standardeinstellungen des Browsers überschreiben. Der Grund dafür ist, dass die Alternative die Verwendung eines PDF-Dokuments ist, was unnötig erscheint, wenn alles andere über CSS druckerfreundlich gestaltet werden kann.

Anthony

Ich sehe, Sie haben die Antwort als Lösung überprüft, aber sie funktioniert NUR in Chrom. Konnten Sie eine richtige Lösung für alle Browser finden? oder zumindest in ein paar Browsern? weil ich das gleiche Problem habe

mavili

@mavili Eine stapelübergreifende Lösung finden Sie unter stackoverflow.com/a/23778125/453605 .

Marcello Nuccio

199

Der CSS-Standard ermöglicht einige erweiterte Formatierungen. @pageIn CSS gibt es eine Direktive, die eine Formatierung ermöglicht, die nur für ausgelagerte Medien (wie Papier) gilt. Sehen http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html .

Nachteil ist, dass das Verhalten in verschiedenen Browsern nicht konsistent ist. Safari unterstützt das Festlegen des Druckerseitenrandes immer noch nicht, aber alle anderen gängigen Browser unterstützen ihn jetzt.

Mit der @pageDirektive können Sie den Druckerrand der Seite angeben (der nicht mit dem normalen CSS-Rand eines HTML-Elements identisch ist):

<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 wir die seitenspezifischen Ränder hier grundsätzlich deaktivieren, um den Effekt des Entfernens der Kopf- und Fußzeile zu erzielen. Daher wird der am Körper festgelegte Rand nicht für Seitenumbrüche verwendet (wie von Konrad kommentiert ). Dies bedeutet, dass dies nur funktioniert richtig, wenn der gedruckte Inhalt nur eine Seite ist.

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

Das Festlegen des @ Seitenrandes 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 korrekt eingestellt sind, ist das Verhalten nicht ideal, um das Ausblenden der Kopf- / Fußzeile zu lösen.

So verhält es sich in verschiedenen Browsern:

In Internet Explorer wird der Rand in den Einstellungen für diesen Druck tatsächlich auf 0 mm festgelegt. Wenn Sie die Vorschau ausführen, wird standardmäßig 0 mm angezeigt, der Benutzer kann ihn jedoch in der Vorschau ändern.
Sie werden sehen, dass der Seiteninhalt tatsächlich korrekt positioniert ist , aber die Kopf- und Fußzeile des Browserdrucks wird mit nicht transparentem Hintergrund angezeigt, sodass der Seiteninhalt an dieser Position effektiv ausgeblendet wird.
In neueren Versionen von Firefox ist es korrekt positioniert , aber sowohl der Kopf- / Fußzeilentext als auch der Inhaltstext werden angezeigt, sodass es wie eine schlechte Mischung aus Browser-Kopfzeilentext und Seiteninhalt aussieht.
In Opera verbirgt der Seiteninhalt die Kopfzeile, wenn im Standard-CSS ein nicht transparenter Hintergrund verwendet wird und die Position der Kopf- / Fußzeile mit dem Inhalt in Konflikt steht. Ziemlich gut, sieht aber seltsam aus, wenn der Rand auf einen kleinen Wert eingestellt ist, wodurch der Header teilweise sichtbar wird. Auch der Seitenrand ist nicht richtig eingestellt.
In neueren Chrome- Versionen werden die Kopf- und Fußzeile des Browsers ausgeblendet, wenn der @ page-Rand so klein eingestellt ist, dass die Position der Kopf- / Fußzeile mit dem Inhalt in Konflikt steht. Meiner Meinung nach sollte sich das genau so verhalten.

Die Schlussfolgerung ist also, dass Chrome die beste Implementierung hat, um die Kopf- / Fußzeile auszublenden.

Scheu
quelle

1

Zur Verdeutlichung scheint dies die Header mit Firefox 21 oder IE10 nicht zu entfernen, obwohl ich vermute, dass die Header / Fußzeile keinen Platz beanspruchen. Es funktioniert mit Chrome 28.

amh15

2

Ich habe aktualisiert, um neuere Browserversionen wiederzugeben. Chrome hat jetzt die beste Implementierung davon.

Ehrfurcht

@SearchForKnowledge: Ja, es ist wie gesagt - wenn Sie meine Antwort unter der Beschreibung des Verhaltens im IE lesen: "Sie werden sehen, dass der Seiteninhalt tatsächlich korrekt positioniert ist, aber die Kopf- und Fußzeile des Browserdrucks verbirgt die Seite Inhalt an dieser Position. " Ich sage, dass es in IE 8 "Wirkung hat", nicht, dass es so funktioniert, wie wir es wollen ... Ich werde meine Antwort bearbeiten, um dies klarer zu machen.

Ehrfurcht

Entfernt Header, aber auch die linke Marign. Mein gesamter Text befindet sich jetzt am Rand der Seite.

Mittchel

7

Diese Lösung funktioniert einfach nicht an allen , weil die @pageMargen und die bodyMargen sind grundsätzlich verschiedene Dinge: die bodyMarge gilt nur für den ganzen Körper , dh die oben auf der ersten Seite und der Unterseite der letzten Seite. Für alle Zwischenseiten hat die Ober- / Unterseite immer noch einen Rand von Null.

Konrad Rudolph

86

Alle neueren Versionen 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 (Ausleihen aus der 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>

Erweitern Sie das Snippet

Für Versionen von Firefox bis zu 48 Alpha 1

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

Es funktioniert in Firefox 29 und höher. Sie können hier einen Screenshot des Unterschieds sehen oder hier ein Live-Beispiel.

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

Andere Browser

Leider scheint es in Internet Explorer keine Möglichkeit zu geben, dieses Problem zu beheben. Sie müssen daher auf PDF zurückgreifen oder 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) die @pageUnterdrückung von Randtexten immer noch nicht .

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

user2428118
quelle

5

Ehrlich gesagt stimme ich dem zu. Es funktioniert sogar in Chrome, wenn Sie im "Systemdialog" drucken. Stellen Sie einfach sicher, dass dies <!DOCTYPE html> <html moznomarginboxes mozdisallowselectionprint>eingestellt ist. Quelle:https://bug743252.bugzilla.mozilla.org/attachment.cgi?id=714383

Peter

3

Funktioniert hervorragend unter Firefox. Zusammen mit @page{ size: auto; margin: 3mm; } der Unterstützung von Chrome und Safari war dies eine browserübergreifende Lösung für mich.

Clain Dsilva

Diese Lösung eignet sich sehr gut zum Entfernen unerwünschter Informationen / Inhalte in gedruckten Materialien in FF. Vielen Dank!

Varvara Jones

Das ist großartig, aber was ist mit IE?

Santosh

1

Ich habe dieses Snippet auf Safari 8, 9.1 und 10 getestet und es entfernt weder die Kopf- noch die Fußzeile in diesen Versionen von Safari.

Luis Perez

21

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

Stellen Sie einfach sicher, dass dies IN den Kopfmarken ist:

<head>
<style 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>

Funktioniert
quelle

3

Dies ist eine sehr gute Lösung! Entfernt die Ränder und entfernt die Kopf- und Fußzeile. Meine einzige Änderung bestand darin, padding: 0.25in 0.5in;die Körperstile zu ergänzen, damit ich genau die Ränder habe, die ich für einen schönen, sauberen Druck benötige. Wenn wir in Chrome v25 arbeiten und zum Glück für dieses spezielle Projekt, können wir die Endbenutzer bitten, aus einigen modernen Browsern auszuwählen.

Charlie Schliesser

2

Leider führt dies zu Problemen mit mehrseitigen Ausdrucken. Text am unteren Rand der Seite wird abgeschnitten.

Jonathan

Funktioniert perfekt unter Chrome 67.0.3396.99 und Firefox 62.0b5 mit Einzelseitenausgabe.

Killscreen

16

Ich habe eine ähnliche Anfrage von einem Client, der möchte, dass die Kopfzeile, die Seitenzahlen und die HTML-Fußzeile entfernt werden. In diesem Fall präsentiert der Client eine HTML-Seite, die als formales Zertifikat fungieren kann. Die hinzugefügte URL, Seite und Überschrift sind irrelevant und führen zu einem weniger ansprechenden Endprodukt. In gewisser Weise 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 "Zahnrad" zu klicken und diese Elemente ein- und auszuschalten. Im Ernst, ich hatte 20 Jahre lang keine Ahnung, dass ich das tun könnte (und wir glauben, dass der typische Benutzer eine Ahnung hat, auf die Umschalttaste zu klicken?).

Wenn CSS Media = Print unterstützt, sollte es die Möglichkeit unterstützen, die gesamte Druckerfahrung des Endbenutzers zu steuern. Ich weiß zu schätzen, dass die Browser die hinzugefügten Felder bereitstellen, aber warum nicht CSS erlauben, das gesamte Druckerlebnis zu steuern - wenn dies gewünscht wird. Eine 90% ige Lösung könnte 100% mit drei weiteren Feldern sein! Eine einfache:

#BrowserPrintDefaults{display:none}

würde genügen.

Auch hier spielt es keine Rolle, ob der Endbenutzer es ausdrucken möchte oder nicht (möglicherweise ist Ihr Kunde sehr privat und möchte nicht, dass gedruckte URLs im Umlauf sind. Oder verwendet ein Führungsteam private Websites für die Zusammenarbeit?). Ich bin froh, den Endbenutzer zu verteidigen, aber wenn jemand eine Antwort sucht, antworten Sie nicht und sagen Sie, dass es das Recht des Endbenutzers ist, sich zu zeigen oder zu verstecken. Manchmal ist es das Recht des Kunden, die Rechnungen zu bezahlen.

CAL
quelle

Ich gab schließlich auf, so viel ich nicht wollte. Ich stimme definitiv zu, dass dies in CSS verfügbar gemacht werden sollte, da alle Browser diese Einstellungen haben und es sich um ein Präsentationselement handelt. Stattdessen handelt es sich um eine Szene als Präferenz auf Anwendungsebene, z. B. das Deaktivieren von Cookies.

Anthony

1

Es ist ein offizieller CSS-Standard, der die @PageDirektive zum Festlegen des Druckerrandes verwendet (der nicht mit dem Textrand der HTML-Seite identisch ist). Derzeit wird dies von allen gängigen Browsern außer Safari unterstützt, aber wie sich dies auf die Kopf- / Fußzeile auswirkt, ist unterschiedlich. Die besten Implementierungen sind in Opera und Chrome.

Ehrfurcht

6

Versuchen Sie diesen Code, funktioniert 100% für mich:
FÜR Landschaft:

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

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

</style>
</head>

FÜR Portait:

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

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

</style>
</head>

Iyes Junge
quelle

1

CSS-Seitenregeln legen die Ränder fest, entfernen jedoch nicht die vom Kopf (Kopf-URL, Seitenzahl usw.) eingebauten Kopf- und Fußzeilen

Anthony

0

Da Sie erwähnt „in ihrem Browser“ und firefox, wenn Sie den Internet Explorer verwenden, können Sie die Seite Kopf- / Fußzeilen durch zeitweiliges Einstellen des Wertes in der Registrierung finden Sie deaktivieren hier für ein Beispiel. AFAIK Ich habe noch keine Möglichkeit gehört, dies in anderen Browsern zu tun. Die Antworten von Daniel und Mickel scheinen miteinander zu kollidieren. Ich denke, dass es irgendwo in der Registrierung eine ähnliche Einstellung für Firefox geben könnte, um Kopf- / Fußzeilen zu entfernen oder sie anzupassen. Hast du es ausgecheckt?

Hoffe das hilft und schöne Ferien, Mit freundlichen Grüßen, Tom.

t0mm13b
quelle

1

In IE7 + können Sie die Kopf- / Fußzeile durch einfaches Klicken in der Seitenansicht deaktivieren. Keine Notwendigkeit, es in der Registrierung zu tun!

Ehrfurcht

0

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

dünner
quelle

0

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

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

Kabir Hossain
quelle

0

Dies funktionierte bei mir 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 */
}

afshin
quelle

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

Antworten:

So verhält es sich in verschiedenen Browsern:

Alle neueren Versionen von Chrome und Opera sowie Firefox 48 Alpha 1 und höher

Für Versionen von Firefox bis zu 48 Alpha 1

Andere Browser