javascript 打开具有不同 HTML 内容的打印对话框窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26786460/
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 print dialog window with different HTML content
提问by Lior Elrom
In order to open a print dialog for the current page we do something like so:
为了打开当前页面的打印对话框，我们执行如下操作：
<a href="javascript:window.print()">Print</a>
How to make a link in the current page that will open the print dialog with different context than the actual page?
如何在当前页面中创建一个链接，以打开与实际页面不同上下文的打印对话框？
Print dialog box in Chrome:
Chrome 中的打印对话框：
回答by Lior Elrom
Print Dialog
打印对话框
After playing around (and some googling), I came out with thissolution:
在玩耍（和一些谷歌搜索）之后，我想出了这个解决方案：
I added a non-printableclass to the current view and printableclass to the printable container element. In my CSS, I used css media querieswhere @media screenand @media printstates contains the corresponding display behavior:
我向non-printable当前视图和printable可打印容器元素添加了一个类。在我的 CSS 中，我使用了css 媒体查询，其中@media screen和@media print状态包含相应的显示行为：
@media screen {
.printable { display: none; }
.non-printable { display: block; }
}
@media print {
.printable { display: block; }
.non-printable { display: none; }
}
Now, I can print new content from my current view withoutopening a new tab or changing my current view.
现在，我可以从当前视图打印新内容，而无需打开新选项卡或更改当前视图。
Check out this jsFiddleand the supported browser's list.
回答by Kevin Nelson
I'm not sure if this is actually an answer to your question since your question has very little detail about what you mean by opening a new window.
我不确定这是否真的是对您问题的回答，因为您的问题对打开新窗口的含义几乎没有详细说明。
If you are on /page/one and you want to have a link open /report/page and automatically bring up the print dialog...then that is as easy as triggering window.printon the load event, e.g.
如果你在 /page/one 并且你想要打开一个链接 /report/page 并自动打开打印对话框......那么这就像window.print在加载事件上触发一样简单，例如
<body onload='window.print()'>
If you don't want that page to always open the print dialog, then make the link to the new page /report/page?print=1or something to that effect when you want to print, and when you find that in the URL trigger the onload event.
如果您不希望该页面始终打开打印对话框，则/report/page?print=1在您想要打印时创建指向新页面或具有该效果的其他内容的链接，并且当您在 URL 中发现该链接时会触发 onload 事件。
回答by Alejandro Pablo Tkachuk
There's a nice Javascript plugin called PrintThisthat accomplishes this very easily.
有一个很好的 Javascript 插件PrintThis可以很容易地完成这个。
You just need to use a jQueryselector and call the plugin, e.g.:
您只需要使用jQuery选择器并调用插件，例如：
$('selector').printThis();
回答by BibanCS
Include printable content in a div. Like:
在 div 中包含可打印的内容。喜欢：
HTML:
HTML：
<div id='printarea'>
<p>This is a sample text for printing purpose.</p>
<input type='button' id='btn' value='Print' onclick='printFunc();'>
</div>
<p>Do not print.</p>
JQuery:
查询：
function printFunc() {
var divToPrint = document.getElementById('printarea');
var htmlToPrint = '' +
'<style type="text/css">' +
'table th, table td {' +
'border:1px solid #000;' +
'padding;0.5em;' +
'}' +
'</style>';
htmlToPrint += divToPrint.outerHTML;
newWin = window.open("");
newWin.document.write("<h3 align='center'>Print Page</h3>");
newWin.document.write(htmlToPrint);
newWin.print();
newWin.close();
}
It will just print the printable div.Thanks
它只会打印可打印的 div。谢谢
![javascript AngularJS：未捕获的错误：[$rootScope:infdig] 已达到 10 个 $digest() 迭代](/res/img/loading.gif)