Javascript 如何在打印前隐藏按钮并在打印过程完成后显示它？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3741425/
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
How can I hide button before printing and show it when printind process has been completed?
提问by armin etemadi
I have a print button with id="print_req". I wrote some Javascript code for printing a page, which is triggered by clicking on this button, and I also want to hide this button before printing, and show it after whole printing process.i mean not to print button in my printed document. Here is my code:
我有一个打印按钮id="print_req"。我写了一些用于打印页面的 Javascript 代码，这是通过单击此按钮触发的，我也想在打印前隐藏此按钮，并在整个打印过程后显示它。我的意思是不在我打印的文档中打印按钮。这是我的代码：
$(document).ready(function(){
$("#print_req").click(function(){
$("#print_req").css("display","none");
window.print();
});
$("#print_req").css("display","block");
return false;
});
This correctly hide that button, but when the printing process get done, the button won't show again! What is the problem?
这正确隐藏了该按钮，但是当打印过程完成后，该按钮将不会再次显示！问题是什么？
回答by epascarello
You are going at this wrong. You should not be showing and hiding the button with JavaScript or using a background image to do it. You should be using a print stylesheet that will allow you to apply different styles to the page when it is printed. In your case you would set the display to none [or visibility to hidden] in this stylesheet.
你这样做是错误的。您不应该使用 JavaScript 或使用背景图像来显示和隐藏按钮。您应该使用打印样式表，它允许您在打印页面时将不同的样式应用于页面。在您的情况下，您可以在此样式表中将显示设置为无 [或可见性为隐藏]。
So you add a stylesheet with the media type for print
所以你添加了一个带有用于打印的媒体类型的样式表
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
In that print.css, you hide the button
在那个print.css中，你隐藏了按钮
.printButtonClass{ display : none }
And presto, the button hides when you print with no JavaScript.
而且，当您不使用 JavaScript 打印时，按钮会隐藏。
回答by Darin Dimitrov
The problem is that you cannot know when the printing is finished using javascript. There's no event that will be triggered to notify this.
问题是您无法知道使用 javascript 何时完成打印。不会触发任何事件来通知这一点。
For security reasons javascript is executed in a sandboxed environment inside the browser limiting its access to any system resources.
出于安全原因，javascript 在浏览器内的沙盒环境中执行，限制其对任何系统资源的访问。
回答by Young Gu
It's easy, please just use this, apply the class noprint to your button.
这很简单，请使用它，将类 noprint 应用于您的按钮。
@media print {
.noprint{
display: none !important;
}
}
回答by Rahil
function printFunction() {
var restoreoriginalpage = document.body.innerHTML;
$('#print-button').css('visibility', 'hidden'); //hiding print button before it prints
var printcontent = document.getElementById("content").innerHTML;
document.body.innerHTML = printcontent;
window.print();
document.body.innerHTML = restoreoriginalpage; //restore original page
}
回答by sai kiran
Simply Do this...
简单地做这个...
$(document).ready(function(){
$(document).ready(function(){
$('#print').on('click',function(){
$('#print').hide();
window.print();
$('#print').show();
});
});
回答by baklap
The print dialog box is part of the operating system. Javascript can only access items that are part of the web page - anything else would be a major security breach.
打印对话框是操作系统的一部分。Javascript 只能访问属于网页的项目 - 其他任何内容都将构成重大安全漏洞。
