Ich versuche, diese Funktion auf die Website eines Projekts zu bringen, an dem ich arbeite. Der Zweck dieser Funktion besteht darin, nur den Inhalt eines untergeordneten div (physisch) zu drucken, der zufällig als Selector #content bezeichnet wird.

Hier ist das kleine bisschen, das ich bis jetzt habe:

<script>
    function printContent() {
        window.open().document.write($("#content").html());
        window.print();
        window.close();
    }
</script>

Die Funktion wird ausgelöst, wenn eine Person auf einen Hyperlink "Drucken" klickt. Das neue Fenster lädt den Inhalt des #content div, der aus einem anderen HTML-Dokument analysiert wird:

<div id="content">
    <br/>
    <div id="Algemeen">
        <h3>Algemene informatie</h3>
        <fieldset id="profile">
            <img id="male" src="./images/Pixers/male_icon.jpg"></img>
            <img id="female" src="./images/Pixers/female_icon1.jpg"></img>
        </fieldset>
    </div>
    <div id ="leftbox">   
        <div id ="veldbox"><label>BSN:</label>$!person.bsn</div>
        <div id ="veldbox"><label>Voornaam: </label>$!person.first_name</div>
        <div id ="veldbox"><label>Achternaam:</label>$!person.name_prefix $!person.last_name</div>
        <div id ="veldbox"><label>Geslacht:</label>$!person.gender</div>  
        <div id ="veldbox"><label>Woonadres:</label>$!person.address</div>
        <div id ="veldbox"><label>Plaatsnaam:</label>$!person.location</div>
        <div id ="veldbox"><label>Provincie:</label>$!person.province</div>
        <div id ="veldbox"><label>Postcode:</label>$!person.zipcode</div>
        <div id ="veldbox"><label>Tel. nummer thuis:</label>$!person.h_number</div>
        <div id ="veldbox"><label>Mobiel nummer:</label>$!person.mobile_nr</div>
        <div id ="veldbox"><label>Burgerlijke Stand:</label>$!person.m_status</div>
        <div id ="veldbox"><label>land van herkomst:</label>$!person.origin</div>
    </div>
    <div id="rightbox">
        <div id ="veldbox"><label>Naam instantie:</label></div>
        <div id ="veldbox"><label>Adres instantie:</label></div>
        <div id ="veldbox"><label>Postcode instantie:</label></div>
        <div id ="veldbox"><label>Tel. instantie:</label></div>
        <div id ="veldbox"><label>Fax instantie:</label></div>
        <div id ="veldbox"><label>E-mail instantie:</label></div>
        <div id ="veldbox"><label>Website instantie:</label></div>
        <div id ="veldbox"><label>-:</label></div>
        <div id ="veldbox"><label>-:</label></div>
        <div id ="veldbox"><label>-:</label></div>  
    </div>
</div>

Das Styling wird einfach nicht mit geladen. Der gesamte Inhalt wird einfach in der oberen linken Ecke angezeigt. Ich habe versucht, das CSS über JS zu verlinken oder es einfach in den Kopf der Seite zu setzen, wie auf einer anderen Seite vorgeschlagen. Ich könnte das natürlich falsch machen. Ich habe noch nicht wirklich versucht, dies mit JQuery herauszufinden. Wenn Sie also andere Lösungen haben, die mir bei meinem Problem helfen könnten, freue ich mich und bin offen für Ratschläge.

Danke im Voraus!