✨ Einfacher Trick zum Drucken eines 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!