Я пытаюсь заставить эту функцию работать на веб-сайте проекта, над которым я работаю. Цель этой функции - только (физически) напечатать содержимое дочернего элемента div, который по совпадению называется селектором #content.

Вот немного, что у меня есть до сих пор:

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

Функция запускается, когда человек нажимает на «печатную» гиперссылку. Новое окно загрузит содержимое #content div, которое анализируется из другого HTML-документа:

<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>

Это просто не будет загружать стиль вместе с ним. Все содержимое будет просто обрезано в верхнем левом углу. Я пытался связать CSS через JS или просто поместил его в заголовок страницы, как это предлагается на другой странице. Я мог бы сделать это неправильно, конечно. На самом деле я еще не пытался выяснить это с помощью JQuery, поэтому, если у вас есть какие-либо другие решения, которые могут помочь мне с моей проблемой, я готов ответить на некоторые вопросы.

Заранее спасибо!