Heim  >  Artikel  >  Web-Frontend  >  ✨ Einfacher Trick zum Drucken eines Div

✨ Einfacher Trick zum Drucken eines Div

WBOY
WBOYOriginal
2024-08-02 04:25:02740Durchsuche

✨ Simple trick for printing a div

Vorteile

  • Ihre Seite bleibt auch nach dem Drucken interaktiv
  • Spielt gut mit Frameworks
  • Sie müssen Ihre Benutzeroberfläche nicht zum Drucken duplizieren

Schritte

  1. Im Druckmodus jeden Inhalt der Seite ausblenden
  2. Machen Sie Ihr Zielelement im Druckmodus sichtbar

Schritt 1

@media print {
  body {
    visibility: hidden;
  }
}

Schritt 2

@media print {
  #section-to-print {
    top: 0;
    left: 0;
    position: absolute;
    visibility: visible;
  }
}

Dann ausdrucken

const button = document.querySelector('print-page');

button.addEventListener('click', () => window.print());

Diese Methode vermeidet die Gefahr, dass die Interaktivität verloren geht. Andere Methoden ersetzen den gesamten Seiteninhalt durch den statischen HTML-Code und verlieren dadurch die Interaktivität.

const printContents = document.getElementById(divId).innerHTML;
const originalContents = document.body.innerHTML;

document.body.innerHTML = printContents;

window.print();

document.body.innerHTML = originalContents;

Das obige ist der detaillierte Inhalt von✨ Einfacher Trick zum Drucken eines Div. 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
Vorheriger Artikel:Glamup Cricket-WebsiteNächster Artikel:Glamup Cricket-Website