Heim > Artikel > Web-Frontend > So implementieren Sie die Druckvorschaufunktion in Javascript

So implementieren Sie die Druckvorschaufunktion in Javascript

PHPzOriginal: 2023-04-19 14:13:381891Durchsuche

Mit der rasanten Entwicklung der Netzwerktechnik verbreiten sich Internetanwendungen immer mehr, wobei auch Webanwendungen zu einem unverzichtbaren Bestandteil geworden sind. In vielen Webanwendungen ist die Druckfunktion eine sehr wichtige Funktion. In verschiedenen Browsern und Betriebssystemen kann der Druckeffekt jedoch unterschiedlich sein. Daher müssen wir eine Druckvorschau durchführen, um die Genauigkeit des Druckeffekts sicherzustellen. Auch die Methode zur Implementierung der Druckvorschau in JavaScript hat bei Entwicklern immer mehr Aufmerksamkeit erregt.

Vorkenntnisse

Bevor wir die Methode von Javascript zur Implementierung der Druckvorschau einführen, müssen wir einige Vorkenntnisse verstehen:

window.print() ist eine Methode, die mit Javascript geliefert wird. Sie wird hauptsächlich zum Implementieren der Druckfunktion verwendet Starten Sie direkt den Druck der aktuellen Seite.

In der Druckvorschau ist der CSS-Stil auch ein sehr wichtiger Teil. Wir können das Layout, Schriftarten, Farben usw. der gedruckten Seite über CSS-Stile steuern.

Unterschiedliche Geräte können unterschiedliche Druckpapiergrößen haben, daher müssen wir den Druck entsprechend der Druckpapiergröße anpassen Gerät Das Layout der Seite.

window.matchMedia() ist eine Methode, die mit Javascript geliefert wird und hauptsächlich zur Bestimmung der Anzeige verwendet wird der aktuellen Gerätegröße. Mit dieser Methode können wir die Anzeigeeffekte für verschiedene Geräte anpassen.

Implementierungsschritte

Auf der Grundlage der Vorkenntnisse können wir mit der Einführung der Methode zur Implementierung der Druckvorschau in Javascript beginnen.

Zunächst müssen wir eine Druckschaltfläche auf der Seite erstellen, damit Benutzer auf die Schaltfläche klicken können die Druckvorschaufunktion auslösen. Der Schaltflächencode lautet wie folgt:

<button onclick="printPreview()">打印预览</button>

In der Druckschaltfläche müssen wir eine Funktion namens printPreview aufrufen () Druckvorschaufunktion implementieren. Der Funktionscode lautet wie folgt:

function printPreview(){
  //创建新的窗口
  var printWindow = window.open('', 'printWindow', 'height=600, width=800');

  //将样式表和HTML代码添加到新窗口中
  printWindow.document.write('<html><head>');
  printWindow.document.write('<link href="print.css" rel="stylesheet" type="text/css" media="print"/>');
  printWindow.document.write('</head><body>');
  printWindow.document.write(document.getElementById('printContent').innerHTML);//printContent为需要打印的内容区域的ID，需要在页面中定义
  printWindow.document.write('</body></html>');

  //设置新窗口的打印样式和相关属性
  printWindow.document.close();
  printWindow.focus();
  printWindow.print();
  printWindow.close();
}

Im obigen Code erstellen wir zunächst ein neues Fenster mit dem Namen printWindow und fügen dem Fenster das Stylesheet und den HTML-Code hinzu. Beachten Sie, dass wir hier ein CSS-Stylesheet namens print.css verwenden, das nur beim Drucken wirksam wird. Anschließend legen wir den Druckstil und die Eigenschaften des neuen Fensters fest und öffnen das Fenster zur Druckvorschau auf dem Bildschirm. Schließlich schließen wir das Fenster, wenn wir mit dem Drucken fertig sind.

In der Druckvorschaufunktion haben wir ein CSS-Stylesheet zum Drucken hinzugefügt. Das Folgende ist der Code einer Beispieldatei „print.css“, die einige häufig verwendete Druckstile enthält:

/*隐藏页面中的所有元素*/
* {
  display:none;
}

/*显示需要打印的区域*/
#printContent {
  display:block;
}

/*设置打印页面的字体和颜色*/
body {
  font-family:宋体, Arial;
  font-size:16px;
  color:#000;
}

/*为打印页面进行分页*/
.my-pagebreak{
  page-break-after: always;
}

/*设置打印页面的边距*/
@media print {
  @page {
    margin:20mm 15mm !important;
  }
}

Hier verwenden wir CSS, um alle Elemente auf der Seite auszublenden und nur diejenigen anzuzeigen, die sein müssen Bereich gedruckt. Gleichzeitig legen wir die Schriftart und Farbe der gedruckten Seite sowie die Seitennummerierung und die Ränder der Seite fest.

Die Druckpapiergröße verschiedener Geräte kann unterschiedlich sein, daher müssen wir die Druckseite entsprechend dem Druck anpassen Papiergröße des Gerätelayouts. Mit der Methode window.matchMedia() können wir die Anzeigegröße des aktuellen Geräts ermitteln und das Layout der gedruckten Seite entsprechend anpassen. Der Code lautet wie folgt:

function printPreview(){
  //创建新的窗口
  var printWindow = window.open('', 'printWindow', 'height=600, width=800');

  //根据设备的显示尺寸调整页面布局
  if (window.matchMedia('print and (max-width: 768px)').matches) {
    //设备宽度小于768px，调整页面布局
    //...
  } else if (window.matchMedia('print and (max-width: 992px)').matches) {
    //设备宽度小于992px，调整页面布局
    //...
  } else {
    //设备宽度大于等于992px，调整页面布局
    //...
  }

  //将样式表和HTML代码添加到新窗口中
  printWindow.document.write('<html><head>');
  printWindow.document.write('<link href="print.css" rel="stylesheet" type="text/css" media="print"/>');
  printWindow.document.write('</head><body>');
  printWindow.document.write(document.getElementById('printContent').innerHTML);//printContent为需要打印的内容区域的ID，需要在页面中定义
  printWindow.document.write('</body></html>');

  //设置新窗口的打印样式和相关属性
  printWindow.document.close();
  printWindow.focus();
  printWindow.print();
  printWindow.close();
}

Im obigen Code verwenden wir die Methode window.matchMedia(), um die Anzeigegröße des aktuellen Geräts zu bestimmen und das Seitenlayout entsprechend verschiedenen Breitenbereichen anzupassen. Je nach tatsächlicher Situation können wir das Layout der gedruckten Seite selbst anpassen.

Zusammenfassung

Die Javascript-Implementierung der Druckvorschau kann es uns ermöglichen, den Effekt der gedruckten Seite präziser und genauer zu steuern und so unser Druckerlebnis zu verbessern. Es ist zu beachten, dass wir während des Implementierungsprozesses den Stil und das Layout an unterschiedliche Gerätegrößen und Browsereigenschaften anpassen müssen, um die Konsistenz des Druckeffekts sicherzustellen. Gleichzeitig können wir auch andere Technologien wie die @page-Regeln von CSS3 verwenden, um die Steuerung des Druckseiteneffekts weiter zu verbessern.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Druckvorschaufunktion in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript css css3 html print 样式表

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

Vorheriger Artikel：Kann ich eine Website erstellen, ohne JavaScript zu lernen?Nächster Artikel：Kann ich eine Website erstellen, ohne JavaScript zu lernen?

In Verbindung stehende Artikel

Mehr sehen