打开一个新的javascript窗口(.open)及其样式
打开一个新的javascript窗口(.open)及其样式
提问于 2013-09-12 15:39:21
我正在尝试让这个功能在我正在工作的一个项目的网站上工作。此函数的目的是仅(物理地)打印子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解决这个问题，所以如果你有任何其他的解决方案可以帮助我解决我的问题，我很乐意接受他们的一些建议。
提前感谢！
回答 6
Stack Overflow用户
回答已采纳
发布于 2013-09-12 15:43:49
在打开的窗口中构建一个完整的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();Stack Overflow用户
发布于 2014-10-10 21:41:02
我做了一些与上面的例子类似的事情，但我发现它并不是在所有的浏览器中都能工作。下面的代码在所有主流浏览器上都进行了测试，对我来说是有效的。(请记住，某些样式可能依赖于父元素，因此如果div嵌套在这些元素中，则打印窗口中的样式可能与父页面中的样式不完全相同)
function printWithCss() {
//Works with Chome, Firefox, IE, Safari
//Get the HTML of div
var title = document.title;
var divElements = document.getElementById('printme').innerHTML;
var printWindow = window.open("", "_blank", "");
//open the window
printWindow.document.open();
//write the html to the new window, link to css file
printWindow.document.write('<html><head><title>' + title + '</title><link rel="stylesheet" type="text/css" href="/Css/site-print.css"></head><body>');
printWindow.document.write(divElements);
printWindow.document.write('</body></html>');
printWindow.document.close();
printWindow.focus();
//The Timeout is ONLY to make Safari work, but it still works with FF, IE & Chrome.
setTimeout(function() {
printWindow.print();
printWindow.close();
}, 100);
}Stack Overflow用户
发布于 2016-02-22 20:33:15
我在页面渲染后加载CSS也有问题，所以解决方案是读取css文件内容并将其写入新文档：
var w = window.open();
jQuery.get('/styles.css', function (data) {
w.document.write('<html><head><style>');
w.document.write(data);
w.document.write('</style></head><body>');
w.document.write($('.print-content').html());
w.document.write('</body></html>');
w.print();
w.close();
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18758288
复制相关文章
相似问题