it-swarm.com.de

Kopf- und Fußzeile von window.print () entfernen

Ich verwende window.print () zum Drucken der Seite, aber Kopf- und Fußzeile enthalten Seitentitel, Dateipfad, Seitennummer und Datum. Wie entferne ich sie? 

Ich habe auch versucht, Stylesheet zu drucken.

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

Bitte helfen Vielen Dank.

82
Viralk

In Chrome können Sie diese automatische Kopf-/Fußzeile mit ausblenden

@page { margin: 0; }

Da sich der Inhalt auf die Grenzen der Seite erstreckt, fehlt die Kopf-/Fußzeile für den Seitendruck. In diesem Fall sollten Sie natürlich einige Ränder/Füllungen in Ihrem body-Element festlegen, damit der Inhalt nicht bis zum Rand der Seite reicht. Da gewöhnliche Drucker einfach nicht randlos drucken können und es wahrscheinlich nicht das ist, was Sie möchten, sollten Sie etwas wie das Folgende verwenden:

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

Wie Martin in einem Kommentar darauf hingewiesen hat, wird der Rand ignoriert, wenn die Seite ein langes Element enthält, das an einer Seite vorbeirollt (wie bei einer großen Tabelle), und die gedruckte Version sieht komisch aus.

Zum Zeitpunkt des Originals dieser Antwort (Mai 2013) funktionierte es nur in Chrome. Jetzt war es noch nicht sicher, es musste nie erneut versucht werden. Wenn Sie Unterstützung für einen Browser benötigen, der nicht gesperrt werden kann, können Sie im Handumdrehen ein PDF erstellen und dieses drucken (Sie können ein selbstdruckendes PDF erstellen, in dem JavaScript eingebettet ist), aber das ist ein riesiger Ärger.

112
diego nunes

Feuerfuchs :

  • moznomarginboxes-Attribut in <html> hinzufügen

Beispiel:

<html moznomarginboxes mozdisallowselectionprint>
20
l2aelba

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

<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

17
Rudias

Heute ist mein Kollege auf dasselbe Thema gestoßen. 

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

Die Lösung (eher ein Hack) bestand darin, die @ page mit einer negativen Marge auszustatten.

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

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

Ich hoffe es hilft.

9
Nick Panov

Der CSS-Standard ermöglicht einige erweiterte Formatierungen. Es gibt eine @page-Direktive in CSS, die einige Formatierungen zulässt, die nur für seitenorientierte Medien (wie Papier) gelten. 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>

und für Firefox verwenden Sie es

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

Ersetzen Sie in Ihrem Code <html> durch <html moznomarginboxes mozdisallowselectionprint>. .

8
hossein ghaem
@media print {
    .footer,
    #non-printable {
        display: none !important;
    }
    #printable {
        display: block;
    }
}
1
Sheak Abdulla

Dies wird die einfachste Lösung sein. Ich habe die meisten Lösungen im Internet ausprobiert, aber nur das half mir.

@print{
    @page :footer {color: #fff }
    @page :header {color: #fff}
}
0
Yasitha

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 Fußzeilen und Kopfzeilen gedruckt. Sie können nach Ihren Wünschen anpassen.

Laden Sie zuerst 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, in Ihrem Code, wo immer Sie den Druckcode schreiben möchten, tun Sie dies (ich habe JQuery verwendet. Sie können einfaches Javascript verwenden):

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

Natürlich brauchen Sie den Link, um darauf zu klicken:

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

Und dein Div zum Ausdrucken:

<div id="yourDivToPrint">....</div>
0
Josiah

sie müssen keinen Code schreiben. kurz vor dem ersten Aufruf von window.print () ändern Sie 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. URL für Leerzeichen ändern -> Bild

und ein weiteres Beispiel für IE (ich verwende IE 11 für frühere Versionen. Sie können dies sehen Verhindern, dass Firefox oder Internet Explorer die URL 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. ändern Sie im Abschnitt Kopf- und Fußzeilen die URL für leer.
0
alireza azami

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 .__ hinzu. Beispiel:

<html moznomarginboxes mozdisallowselectionprint>
0
Nikhilus