打开一个新的javascript窗口（.open）及其CSS样式

高山

2023-03-14

问题内容：

我正在尝试让此功能在我正在处理的项目的网站上工作。此功能的目的是仅（物理上）打印子div的内容，该子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>

它只是不会随样式一起加载样式。所有内容都将被裁剪在左上角。我试过通过JS链接CSS或按照另一页的建议将其放在页面的开头。我当然可能做错了。我还没有真正尝试使用JQuery来解决这个问题，因此，如果您有任何其他可以帮助我解决问题的解决方案，我很高兴并愿意收到有关它们的一些建议。

提前致谢！

问题答案：

在打开的窗口中构建完整的HTML页面，并在其中引用您的CSS文件：

var win = window.open('','printwindow');
win.document.write('<html><head><title>Print it!</title><link rel="stylesheet" type="text/css" href="styles.css"></head><body>');
win.document.write($("#content").html());
win.document.write('</body></html>');
win.print();
win.close();

打开一个新的javascript窗口（.open）及其CSS样式

相关阅读

相关文章

相关问答

相关工具

相关文档