我正在尝试让这个功能在我正在开发的项目的网站上运行。此函数的目的是仅(物理地)打印子 div 的内容,该子 div 巧合地称为选择器 #content。
这是我到目前为止所掌握的一点点:
<script>
function printContent() {
window.open().document.write($("#content").html());
window.print();
window.close();
}
</script>
当用户点击“打印”超链接时,该函数就会被触发。新窗口将加载从另一个 HTML 文档解析的 #content div 的内容:
<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();
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)