Heim > Web-Frontend > js-Tutorial > Wie kann ich den Inhalt eines bestimmten DIV mit verbesserter Browserkompatibilität drucken?

Wie kann ich den Inhalt eines bestimmten DIV mit verbesserter Browserkompatibilität drucken?

Patricia Arquette
Freigeben: 2024-12-06 17:32:11
Original
695 Leute haben es durchsucht

How Can I Print a Specific DIV's Content with Enhanced Browser Compatibility?

DIV-Inhalte mit erweiterter Funktionalität drucken

In verschiedenen Webentwicklungsszenarien kann es vorkommen, dass Sie den Inhalt eines bestimmten DIV-Elements drucken müssen . Um dies zu erreichen, stehen mehrere Ansätze zur Verfügung. In diesem Artikel befassen wir uns mit einer Methode, die verbesserte Funktionalität und Kompatibilität zwischen verschiedenen Browsern, insbesondere Chrome, bietet.

Die Lösung

Die bereitgestellte Funktion PrintElem() , bietet einen umfassenden Ansatz zum Drucken des Inhalts eines DIV:

function PrintElem(elem) {
    var mywindow = window.open('', 'PRINT', 'height=400,width=600');

    mywindow.document.write('<html><head><title>' + document.title + '</title></head>');
    mywindow.document.write('<body>');
    mywindow.document.write('<h1>' + document.title + '</h1>');
    mywindow.document.write(document.getElementById(elem).innerHTML);
    mywindow.document.write('</body></html>');

    mywindow.document.close(); // necessary for IE >= 10
    mywindow.focus(); // necessary for IE >= 10*/

    mywindow.print();
    mywindow.close();

    return true;
}
Nach dem Login kopieren

Erklärung

  1. Ein neues Fenster öffnen: Die Funktion erstellt ein neues Browserfenster, mywindow, zur Anzeige der gedruckte Inhalt.
  2. Seitenelemente festlegen: Es werden wichtige HTML-Elemente hinzugefügt, z Kopf, Titel und Text zum Dokument des neuen Fensters.
  3. DIV-Inhalt hinzufügen: Der Code extrahiert den inneren HTML-Code des angegebenen DIV-Elements (elem) und schreibt ihn in den Textabschnitt des neuen Fensters.
  4. Browserspezifische Kompatibilität: Um die Kompatibilität mit verschiedenen Browsern, insbesondere IE, sicherzustellen, ist die Funktion verwendet die Methoden document.close() und document.focus().
  5. Drucken und Fensterverwaltung: Nach dem Erstellen des HTML-Dokuments wird das Dokument von mywindow geschlossen, um weitere Änderungen zu verhindern. Der Fokus des Browsers wird auf das neue Fenster gesetzt, um das Drucken zu ermöglichen. Die print()-Methode wird aufgerufen und schließlich wird das neue Fenster geschlossen.

Mit dieser Funktion können Sie den Inhalt jedes DIV-Elements mühelos mit zusätzlichen Funktionen wie einem Seitentitel drucken und so sicherstellen, dass dies gewährleistet ist Kompatibilität und Bereitstellung eines reibungslosen Druckerlebnisses für Ihre Benutzer.

Das obige ist der detaillierte Inhalt vonWie kann ich den Inhalt eines bestimmten DIV mit verbesserter Browserkompatibilität drucken?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage