Javascript-Änderung vor dem Drucken

JavaScript ist eine Skriptsprache, die häufig in Webanwendungen verwendet wird. Im Webentwicklungsprozess ist die Druckfunktion unerlässlich, aber die einfache Verwendung der Druckfunktion des Browsers kann zu unbefriedigenden Ergebnissen führen. Daher wird in diesem Artikel erläutert, wie Sie den Stil und Inhalt der gedruckten Seite in JavaScript ändern, um bessere Druckeffekte zu erzielen.

1. Ändern Sie den Stil

1. Verwenden Sie @media media query.

@media media query bezieht sich auf die Verwendung von @media-Regeln im Stylesheet, sodass das Stylesheet nur auf Geräten bestimmter Medientypen wirksam wird. Vor dem Drucken können wir @media-Regeln verwenden, um den Stil der gedruckten Seite so zu ändern, dass die gedruckte Seite besser geeignet ist.

Der Beispielcode lautet wie folgt:

@media print {
  /* 在这里定义修改的样式 */
}

Im obigen Code zeigt @media print an, dass wir ihn für den vom Drucker verwendeten Medientyp ändern möchten, wobei wir verschiedene Stile hinzufügen können, z. B. das Festlegen der Hintergrundfarbe:

@media print {
  body {
    background-color: #fff;
  }
}

In diesem Beispiel stellen wir die Hintergrundfarbe der gedruckten Seite auf Weiß ein.

In der @media-Regel können wir auch andere Stile hinzufügen, z. B. das Festlegen der Seitengröße und -richtung:

@media print {
  @page {
    size: A4 portrait; /* 竖向A4页面 */
  }
}

Im obigen Code wird die @page-Regel verwendet, um die Seitengröße und -richtung sowie das Größenattribut festzulegen wird verwendet, um die Seitengröße einzustellen. Hochformat gibt an, dass die Seitenausrichtung vertikal ist.

2. Verwenden Sie ein Druck-Stylesheet

Ein Druck-Stylesheet bezieht sich auf ein spezielles Stylesheet, das speziell für den Druck vorbereitete Stile enthält. Damit können wir den Stil der gedruckten Seite vor dem Drucken ändern.

Der Beispielcode lautet wie folgt:

<link rel="stylesheet" href="print.css" media="print" />

Im obigen Code haben wir ein Stylesheet namens print.css in die HTML-Datei eingeführt und das Medienattribut des Stylesheets auf Drucken festgelegt.

Im Stylesheet print.css können wir speziell für den Druck vorbereitete Stile hinzufügen, zum Beispiel:

body {
  font-size: 12pt;
  line-height: 1.5;
}

Im obigen Code stellen wir die Schriftgröße der gedruckten Seite auf 12pt und die Zeilenhöhe auf 1,5 ein.

Durch die Verwendung von Druck-Stylesheets können Stiländerungen flexibler gestaltet werden, ohne die ursprünglichen Stile zu beeinträchtigen.

2. Ändern Sie den Inhalt

1. Verstecken Sie unnötige Elemente

Auf gedruckten Seiten müssen wir normalerweise einige Elemente wie Menüs, Anzeigen usw. nicht anzeigen, da diese Elemente Papier verschwenden und den Druckeffekt beeinträchtigen . Daher können wir JavaScript verwenden, um diese Elemente vor dem Drucken auszublenden.

Der Beispielcode lautet wie folgt:

window.onload = function() {
  var printBtn = document.getElementById('printBtn');
  printBtn.onclick = function() {
    // 隐藏不必要的元素
    document.getElementById('menu').style.display = 'none';
    document.getElementById('ad').style.display = 'none';
    
    // 执行打印操作
    window.print();
    
    // 恢复元素的显示
    document.getElementById('menu').style.display = 'block';
    document.getElementById('ad').style.display = 'block';
  }
}

Im obigen Code erhalten wir zunächst eine Schaltfläche mit der ID printBtn und binden ein Klickereignis daran. Im Event-Handler verstecken wir die beiden Elemente mit id menu und ad, indem wir deren display-Attribut per JavaScript auf „none“ setzen. Als nächstes führen wir einen Druckvorgang durch und setzen dann das Anzeigeattribut dieser Elemente nach dem Drucken auf „Blockieren“, wodurch ihre Anzeige wiederhergestellt wird.

Es ist erwähnenswert, dass das Ausblenden von Elementen vor dem Drucken den Druckeffekt sauberer machen kann. Bei der Implementierung der Funktion müssen Sie jedoch darauf achten, dass die ausgeblendeten Elemente keine Auswirkungen auf andere Funktionen der Seite haben.

2. Druckkopf- und Fußzeile hinzufügen

Druckkopf- und Fußzeile enthalten normalerweise einige wichtige Informationen, wie z. B. Druckzeit, Dateiname usw. Wir können JavaScript verwenden, um Kopf- und Fußzeilen vor dem Drucken hinzuzufügen.

Der Beispielcode lautet wie folgt:

window.onload = function() {
  var printBtn = document.getElementById('printBtn');
  printBtn.onclick = function() {
    // 添加打印页眉
    var header = '<div style="text-align:center;font-size:14pt;">打印页眉</div>';
    document.body.insertAdjacentHTML('beforebegin', header);
    
    // 添加打印页脚
    var footer = '<div style="text-align:center;font-size:12pt;">打印页脚</div>';
    document.body.insertAdjacentHTML('afterend', footer);
    
    // 执行打印操作
    window.print();
    
    // 删除打印页眉和页脚
    document.body.previousSibling.remove();
    document.body.nextSibling.remove();
  }
}

Im obigen Code erhalten wir zunächst eine Schaltfläche mit der ID printBtn und binden ein Klickereignis daran. Im Event-Handler haben wir die Druckkopf- und -fußzeile separat über JavaScript hinzugefügt. Unter anderem wird die Methode insertAdjacentHTML() verwendet, um HTML-Code an einer bestimmten Stelle im Dokument einzufügen. Beforebegin bedeutet das Einfügen vor dem aktuellen Element und Afterend bedeutet das Einfügen nach dem aktuellen Element. Wir haben hier beforebegin bzw. afterend verwendet, um die Kopf- und Fußzeile an der richtigen Stelle einzufügen.

Als nächstes führten wir den Druckvorgang durch und löschten nach Abschluss des Druckvorgangs die gedruckte Kopf- und Fußzeile über JavaScript aus dem Dokument, um andere Funktionen nicht zu beeinträchtigen.

Zusammenfassung

Das Ändern des Stils und Inhalts der gedruckten Seite über JavaScript kann den Druckeffekt idealer gestalten und das Benutzererlebnis verbessern. Bei der Implementierung von Funktionen müssen wir auf die Kompatibilität und Benutzerfreundlichkeit der Seite achten und unnötige Probleme so weit wie möglich vermeiden.

Das obige ist der detaillierte Inhalt vonJavascript-Änderung vor dem Drucken. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!