jQuery 打开一个新的 javascript 窗口（.open）及其 CSS 样式
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18758288/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Open a new javascript window(.open) along with its CSS styling
提问by Fariz Fakkel
I'm trying to get this function to work on the website of a project I'm working on. The purpose of this function is to only (physically) print the contents of a child div which is coincidentally referred to as selector #content.
我试图让这个功能在我正在处理的项目的网站上工作。此函数的目的是仅（物理上）打印子 div 的内容，该子 div 巧合地称为选择器 #content。
Here's the little bit I've got 'till now:
这是我到现在为止的一点点：
<script>
function printContent() {
window.open().document.write($("#content").html());
window.print();
window.close();
}
</script>
The function is fired when a person clicks on a "print" hyperlink. The new window will load the contents of the #content div which is parsed from another HTML document:
当一个人点击“打印”超链接时会触发该功能。新窗口将加载从另一个 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>
It just won't load the styling along with it. All the contents will all just be cropped up in the top left corner. I've tried linking the CSS through JS or by just putting it in the head of the page as suggested on another page. I could be doing this wrong of course. I haven't really tried figuring this out with JQuery yet, so if you have any other solutions that might help me with my problem, I'm happy and open to receive some advice about them.
它只是不会加载样式。所有的内容都会在左上角被裁剪出来。我试过通过 JS 链接 CSS，或者按照另一个页面的建议将其放在页面的头部。我当然可能做错了。我还没有真正尝试过用 JQuery 解决这个问题，所以如果你有任何其他解决方案可以帮助我解决我的问题，我很高兴并愿意接受一些关于它们的建议。
Thanks in advance!
提前致谢！
回答by Reeno
Build a complete HTML page in the opened window and reference your CSS-file there:
在打开的窗口中构建一个完整的 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();
回答by cmartin
I do something similiar to the above example but found it doesn't work in all browsers. The following was tested with all the major browsers and works for me. (Remember, some styles can be dependent on parent elements, so if your div is nested inside those elements the styles may not look exactly the same in the print window as on your parent page)
我做了一些类似于上面的例子，但发现它不适用于所有浏览器。以下内容已在所有主要浏览器上进行了测试，对我有用。（请记住，某些样式可能依赖于父元素，因此如果您的 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);
}
回答by Pere Pages
I wanted to have all the styles from the parent page and print. So I wanted to use all the csslinksin the HEAD.
我想拥有父页面和print 中的所有样式。所以我想使用HEAD中的所有css链接。
My solution uses jQuery.
我的解决方案使用jQuery。
(function print() {
// getting the tag element I want to print
// cloning the content so it doesn't get messed
// remove all the possible scripts that could be embed
var printContents = $('body').clone().find('script').remove().end().html();
// get all <links> and remove all the <script>'s from the header that could run on the new window
var allLinks = $('head').clone().find('script').remove().end().html();
// open a new window
var popupWin = window.open('', '_blank');
// ready for writing
popupWin.document.open();
// -webkit-print-color-adjust to keep colors for the printing version
var keepColors = '<style>body {-webkit-print-color-adjust: exact !important; }</style>';
// writing
// onload="window.print()" to print straigthaway
popupWin.document.write('<html><head>' + keepColors + allLinks + '</head><body onload="window.print()">' + printContents + '</body></html>');
// close for writing
popupWin.document.close();
})();
回答by Mirko
I also had the problem with CSS loading after the page rendering, so solution was to read the css file content and write it to the new document:
我在页面渲染后加载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();
});
回答by tbone78
I had the same issue. What I am finding is that it is printing before the css has time to render on the page. What I did to find this was do a setTimeout on the print call and all styling was then showing up in the printed document. If I did not do the timeout I found that the styling was not being picked up in the print call.
我遇到过同样的问题。我发现它在 css 有时间在页面上呈现之前正在打印。我所做的是在打印调用上执行 setTimeout ，然后所有样式都显示在打印文档中。如果我没有做超时，我会发现在打印调用中没有选择样式。
回答by rgantla
Just in case any one is trying to make this happen with Angular, please put your CSS file in the assets folder.
以防万一有人试图用 Angular 实现这一点，请将您的 CSS 文件放在 assets 文件夹中。
