Entfernen Sie Kopf- und Fußzeile aus window.print ()

109

Ich verwende window.print () zum Drucken von Seiten, aber ich habe Kopf- und Fußzeilen mit Seitentitel, Dateipfad, Seitenzahl und Datum. Wie entferne ich sie?

Ich habe auch versucht, Stylesheet zu drucken.

#header, #nav, .noprint
{
display: none;
}

Bitte helfen Sie. Vielen Dank.

css  printing 
— Viralk
quelle
7
Diese Elemente sind spezifisch für die Browsereinstellungen des Benutzers. Ich glaube nicht, dass Sie sie über CSS oder JavaScript entfernen können.
— Michael Berkowski
Ich denke, diese Frage muss geklärt werden: Versuchen Sie, die Kopf- und Fußzeilenelemente des auf dem Bildschirm angezeigten HTML-Codes zu entfernen, oder möchten Sie die Kopf- und Fußzeilen entfernen, die durch die Druckfunktion hinzugefügt werden?
— AlanObject

Antworten:

149

In Chrome ist es möglich, diese automatische Kopf- / Fußzeile mit auszublenden

@page { margin: 0; }

Da der Inhalt bis an die Seitengrenzen reicht, fehlt die Kopf- / Fußzeile des Seitendrucks. In diesem Fall sollten Sie natürlich einige Ränder / Auffüllungen in Ihrem Körperelement festlegen, damit der Inhalt nicht bis zum Rand der Seite reicht. Da herkömmliche Drucker keinen Druck ohne Ränder erhalten können und es wahrscheinlich nicht das ist, was Sie wollen, sollten Sie Folgendes verwenden:

@media print {
  @page { margin: 0; }
  body { margin: 1.6cm; }
}

Wie Martin in einem Kommentar betonte, wird der Rand ignoriert und die gedruckte Version sieht seltsam aus, wenn die Seite ein langes Element hat, das über eine Seite hinausläuft (wie eine große Tabelle).

Zum Zeitpunkt des Originals dieser Antwort (Mai 2013) funktionierte sie nur in Chrome, war sich jetzt nicht sicher und musste nie wieder versucht werden. Wenn Sie Unterstützung für einen Browser benötigen, der nicht funktioniert, können Sie ein PDF im laufenden Betrieb erstellen und drucken (Sie können ein selbstdruckendes PDF erstellen, in das JavaScript eingebettet ist), aber das ist ein großer Aufwand.

— Diego Nonnen
quelle
2
Aus irgendeinem Grund habe body { margin: 1.6cm; }ich den richtigen Rand für mich ignoriert (vielleicht weil ich ihn verwendet habe text-align:right), also habe ich stattdessen einen <div class="container">für meinen Inhalt erstellt und .container { margin: 1.6cm; }stattdessen verwendet.
— Rybo111
8
Ich versuche dies mit Chrome 33. Es funktioniert hervorragend, aber seien Sie vorsichtig, da body { margin: 1.6cm; }- da es sich um einen Rand für das gesamte Dokument handelt - die vertikalen Ränder für mehrseitige Dokumente außer dem allerersten und dem letzten nicht berücksichtigt werden. Leider fällt mir keine Problemumgehung ein.
— pau.moreno
Hey @Diego, ich bin mit Ihrem Vorschlag zufrieden und meine Kopfzeile wurde entfernt, aber meine Druckseite wurde vergrößert. "body {margin: 1.6cm;}" ändere einfach 1.6cm auf 1.0cm und es funktioniert .. :) Happy Codding
— Vishal Kiri
3
Es gibt eine ausführlichere Antwort hier: stackoverflow.com/questions/1960939/…
— jedison
Das Entfernen des Seitenrandes und das Hinzufügen des Körperrandes erzeugte für mich eine leere Seite. Ich habe den Körperrand auf Polsterung geändert und es hat funktioniert.
— André Guimarães Sakata
21

Ich bin sicher, dass das Hinzufügen dieses Codes zu Ihrer CSS-Datei das Problem lösen wird

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

Sie können dies besuchen, um mehr darüber zu erfahren

— Rudias
quelle
3
Nein, es funktioniert nicht. Es setzt den Spielraum, der es ist. Es zeigt immer noch URL und Datum und Uhrzeit in Kopf- und Fußzeile an
— Learner
Funktioniert für Chrome und Firefox, aber nicht für IE 11.
— Sammi
21

Feuerfuchs :

  • moznomarginboxesAttribut hinzufügen in<html>

Beispiel:

<html moznomarginboxes mozdisallowselectionprint>
— l2aelba
quelle
6
Dies wird nach der Veröffentlichung von Firefox 48 (August 2016) nicht mehr funktionieren: bugzilla.mozilla.org/show_bug.cgi?id=1260480
— Aljullu
es funktioniert nicht bei mir, FF 61, aber die @page {margin: 0; } Die Lösung scheint auch in FF zu funktionieren.
— Kiko
11

Heute ist mein Kollege auf das gleiche Problem gestoßen.

Da die "margin: 0" -Lösung für chrombasierte Browser funktioniert, jedoch Internet Explorer chrombasierte , druckt die Fußzeile auch dann weiter, wenn die @ page-Ränder auf Null gesetzt sind.

Die Lösung (eher ein Hack) bestand darin, einen negativen Rand auf die @ Seite zu setzen.

@page {margin:0 -6cm}
html {margin:0 6cm}

Bitte beachten Sie, dass der negative Rand nicht für die Y-Achse funktioniert, sondern nur für die X.

Ich hoffe es hilft.

— Nick Panov
quelle
8

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

<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 current printer page size */
            margin: 0mm;  /* this affects the margin in the printer settings */
        }

        body 
        {
            background-color:#FFFFFF; 
            border: solid 1px black ;
            margin: 0px;  /* the margin on the content before printing */
       }
    </style>
</head>
<body>
  <div>Top line</div>
  <div>Line 2</div>
</body>
</html>
Erweitern Sie das Snippet

und für Firefox verwenden Sie es

In Firefox https://bug743252.bugzilla.mozilla.org/attachment.cgi?id=714383 ( anzeigen :: Tag HTML anzeigen).

In Ihrem Code ersetzen <html>mit<html moznomarginboxes mozdisallowselectionprint>.

— Hossein Ghaem
quelle
4 
@media print {
    .footer,
    #non-printable {
        display: none !important;
    }
    #printable {
        display: block;
    }
}
— Schreien Sie Abdulla
quelle
Dies scheint der richtige Weg zu sein. Selbst in meinem Fall in einem Iframe-Kontext funktioniert es großartig.
— TwystO
2

Dies ist die einfachste Lösung. Ich habe die meisten Lösungen im Internet ausprobiert, aber nur das hat mir geholfen.

@print{
    @page :footer {color: #fff }
    @page :header {color: #fff}
}
— Yasitha
quelle
11
Das macht nichts.
— Nächte
1

@page { margin: 0; }funktioniert gut in Chrome und Firefox. Ich habe keine Möglichkeit gefunden, den IE über CSS zu reparieren. Sie können jedoch im IE auf Ihrem eigenen Computer unter in die Seite einrichten und die Ränder auf 0 setzen. Drücken Sie die Alt-Taste und dann das Dateimenü in der oberen linken Ecke, um die Seite einzurichten. Dies funktioniert jeweils nur für eine Maschine ...

— Sammi
quelle
0

1. Für Chrome & IE

<script language="javascript">
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.getElementById('header').style.display = 'none';
document.getElementById('footer').style.display = 'none';
document.body.innerHTML = printContents;

window.print();


document.body.innerHTML = originalContents;
}

</script>
<div id="div_print">
<div id="header" style="background-color:White;"></div>
<div id="footer" style="background-color:White;"></div>
</div>
  1. Für FireFox, wie l2aelba sagte ,

Fügen Sie das Attribut moznomarginboxes in Beispiel hinzu:

<html moznomarginboxes mozdisallowselectionprint>
— Nikhilus
quelle
Im obigen Code sind die <div id = "header" style = "background-color: White;"> </ div> <div id = "footer" style = "background-color: White;"> </ div> optional .
— Nikhilus
0

Ich habe versucht, die Kopf- und Fußzeile einer HTML-Seite zu entfernen, die ich manuell gedruckt habe.

Keine Lösung auf dieser Seite hat für mich funktioniert, aber einfach durch Definieren meiner eigenen Fußzeile, wie hier erläutert , würde Firefox keine eigene Kopf- und Fußzeile hinzufügen.

Dies funktioniert unter Chrome leider nicht.

In CSS:

@media screen {
  div.divFooter {
    display: none;
  }
}
@media print {
  div.divFooter {
    position: fixed;
    bottom: 0;
  }
}

Fügen Sie dies Ihrem HTML hinzu:

<div class="divFooter">
<p>UNCLASSIFIED</p>
</div>
``
— lwinkler
quelle
-1

Wenn Sie bis zu diesem Punkt nach unten scrollen, habe ich eine Lösung für Firefox gefunden. Es werden Inhalte aus einem bestimmten Div ohne die Fuß- und Kopfzeilen gedruckt. Sie können nach Ihren Wünschen anpassen.

Laden Sie zunächst dieses Addon herunter und installieren Sie es: JSPrintSetup .

Zweitens schreiben Sie diese Funktion: 

<script>
function PrintElem(elem)
{
    var mywindow = window.open('', 'PRINT', 'height=400,width=600');
    mywindow.document.write('<html><head><title>' + document.title  + '</title>');
    mywindow.document.write('</head><body >');
    mywindow.document.write(elem);
    mywindow.document.write('</body></html>');
    mywindow.document.close(); // necessary for IE >= 10
    mywindow.focus(); // necessary for IE >= 10*/

   //jsPrintSetup.setPrinter('PDFCreator'); //set the printer if you wish
   jsPrintSetup.setSilentPrint(1);

   //sent empty page header
   jsPrintSetup.setOption('headerStrLeft', '');
   jsPrintSetup.setOption('headerStrCenter', '');
   jsPrintSetup.setOption('headerStrRight', '');

   // set empty page footer
   jsPrintSetup.setOption('footerStrLeft', '');
   jsPrintSetup.setOption('footerStrCenter', '');
   jsPrintSetup.setOption('footerStrRight', '');

   // print my window silently. 
   jsPrintSetup.printWindow(mywindow);
   jsPrintSetup.setSilentPrint(1); //change to 0 if you want print dialog

    mywindow.close();

    return true;
}
</script>

Drittens tun Sie dies in Ihrem Code, wo immer Sie den Druckcode schreiben möchten (ich habe JQuery verwendet. Sie können einfaches Javascript verwenden):

<script>
$("#print").click(function () {
    var contents = $("#yourDivToPrint").html();
    PrintElem(contents);
})
</script>

Natürlich benötigen Sie den Link zum Klicken:

<a href="#" id="print">Print my Div</a>

Und dein Div zum Drucken:

<div id="yourDivToPrint">....</div>
— Josiah
quelle
-3

Sie müssen keinen Code schreiben. Ändern Sie kurz vor dem ersten Aufruf von window.print () die Druckeinstellungen Ihres Browsers. zum Beispiel in Firefox:

  1. Drücken Sie Alt oder F10, um die Menüleiste anzuzeigen
  2. Klicken Sie auf Datei und dann auf Seite einrichten
  3. Wählen Sie die Registerkarte Ränder & Kopf- / Fußzeilen
  4. Ändern Sie die URL für ein leeres -> Bild

und ein weiteres Beispiel für IE (ich verwende IE 11 für frühere Versionen. Sie können sehen, dass Firefox oder Internet Explorer die URL nicht auf jeder Seite drucken ):

  1. Drücken Sie Alt oder F10, um die Menüleiste anzuzeigen
  2. Klicken Sie auf Datei und dann auf Seite einrichten
  3. im Abschnitt Kopf- und Fußzeilen URL für leer ändern.
— Alireza Azami
quelle
Während dieser Link die Frage beantworten kann, ist es besser, die wesentlichen Teile der Antwort hier aufzunehmen und den Link als Referenz bereitzustellen. Nur-Link-Antworten können ungültig werden, wenn sich die verknüpfte Seite ändert. - Von Review
— SurvivalMachine
Danke für den Vorschlag SurvivalMachine. Ich habe meine Antwort vor einigen Minuten bearbeitet :)
— Alireza Azami
Hmmm ... Ich möchte nicht alle meine Benutzer herumlaufen und ihre Browser aktualisieren (wie viele sie auch verwenden), um diese eine App zu berücksichtigen, insbesondere wenn sie auf der anderen Seite des Planeten leben. Was ist auch, wenn sie die Einstellungen für eine andere App zurück benötigen? Dies ist keine Antwort.
— Paul
Diesem Ansatz fehlt die browserübergreifende Funktionalität, die eine in die Seite / App eingebaute Funktion bieten würde.
— Killscreen
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.