Heim  >  Artikel  >  Web-Frontend  >  So entfernen Sie Kopf- und Fußzeilen beim Drucken mit Javascript

So entfernen Sie Kopf- und Fußzeilen beim Drucken mit Javascript

PHPz
PHPzOriginal
2023-04-25 10:47:063492Durchsuche

In praktischen Anwendungen müssen wir häufig einige Informationen oder Inhalte drucken, aber beim Drucken fügt das System standardmäßig Kopf- und Fußzeilen hinzu, was häufig unseren Satz und unser Layout stört und uns große Probleme bereitet. Wie können Sie also die Kopf- und Fußzeile entfernen? Im Folgenden stellen wir Ihnen vor, wie Sie Kopf- und Fußzeilen mithilfe von JavaScript entfernen.

1. Entfernen Sie den Header

Beim Drucken der Seite können wir den Header über das Stylesheet entfernen. Der Code lautet wie folgt:

@media print{
  @page {
    size: auto; /* 使用打印纸张的大小,默认是auto*/
    margin: 0mm; /* 打印页面边缘设置为0 */
    mso-header: none; /* 去除页眉 */
  }
}

In diesem Code verwenden wir @media print, um dem Browser mitzuteilen, dass es sich um diesen Code handelt Es wird zum Drucken verwendet. Verwenden Sie @page, um den Stil der gedruckten Seite festzulegen. Dies bedeutet, dass die Ränder der gedruckten Seite auf 0 gesetzt sind, sodass der gedruckte Inhalt die gesamte Seite ausfüllen kann wird nicht zu den Systemstandardeinstellungen für weiße Kanten hinzugefügt. Am wichtigsten ist, dass wir mit mso-header:none den Header erfolgreich entfernt haben.

2. Entfernen Sie die Fußzeile

Sehen wir uns weiterhin an, wie Sie die Fußzeile entfernen. Hier können wir auch das Stylesheet anpassen, um den Effekt zu erzielen. Der Code lautet wie folgt:

@media print{
  @page {
    size: auto;
    margin: 0mm;
    mso-header: none;
    mso-footer: none; /* 去除页脚 */
  }
}

Genau wie beim Entfernen der Kopfzeile fügen wir mso-footer:none hinzu, um zu verhindern, dass das System die Fußzeile anzeigt. Hierbei ist zu beachten, dass einige Browser möglicherweise unterschiedliche Codes verwenden müssen, um den Druckeffekt zu steuern, da verschiedene Browser unterschiedliche Einstellungen haben.

Zusammenfassung

Oben erfahren Sie, wie Sie mit JavaScript Kopf- und Fußzeilen aus gedruckten Seiten entfernen. In praktischen Anwendungen können wir das Druckereignis auslösen, indem wir eine Schaltfläche auf der Seite hinzufügen, und wir können auch eine Validierungslogik hinzufügen, um ungültige Druckanforderungen zu verhindern. Durch diese Methoden können wir den Druckeffekt flexibler steuern, sodass der gedruckte Inhalt unseren Erwartungen entsprechen kann.

Das obige ist der detaillierte Inhalt vonSo entfernen Sie Kopf- und Fußzeilen beim Drucken mit Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn