Javascript 如何在打印前隐藏按钮，并在printind过程完成后显示？

我有一个带有

id=“print\u req”

的打印按钮。我写了一些Javascript代码来打印一个页面，点击这个按钮会触发这个页面，我还想在打印之前隐藏这个按钮，并在整个打印过程后显示它。我的意思是不在打印的文档中打印这个按钮。这是我的密码：

$(document).ready(function(){
    $("#print_req").click(function(){
        $("#print_req").css("display","none");
        window.print();  
    });

    $("#print_req").css("display","block");
    return false;   
});

---

这将正确隐藏该按钮，但当打印过程完成时，该按钮将不再显示！问题是什么？

问题是您无法知道何时使用javascript完成打印。不会触发任何事件来通知此情况

---

出于安全原因，javascript在浏览器内部的沙盒环境中执行，限制其对任何系统资源的访问。

打印对话框是操作系统的一部分。Javascript只能访问属于网页一部分的项目-任何其他内容都将是一个重大的安全漏洞。

您的做法是错误的。您不应该使用JavaScript显示和隐藏按钮，也不应该使用背景图像来显示和隐藏按钮。您应该使用打印样式表，它允许您在打印页面时对页面应用不同的样式。在本例中，您可以在此样式表中将显示设置为无[或将可见性设置为隐藏]

因此，您添加了一个带有打印介质类型的样式表

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

---

而且，当您不使用JavaScript打印时，按钮会隐藏

很简单，请使用这个，将noprint类应用到您的按钮上

 @media print {
   .noprint{
      display: none !important;
   }
}

只要这样做

$（文档）.ready（函数（）{

---

你不能使用纯javascript。有ActiveX控件允许管理打印，但它们只在IE上工作，用户应该明确接受安装它们。哦！！我找到了自己的答案！！！如果我将此按钮的图像作为html标记的背景，它将不会自动发送到打印机！：）@armin，这很好，对其他有同样问题的人也很有用。你应该在你的问题中解释一下，你需要的是在打印页面时排除打印按钮。我知道，我也这么做了，伙计。如果我的问题模棱两可，请告诉我：）如果有更好的方法，这是一个糟糕的答案。背景会显示出来如果用户允许他们在浏览器设置中打印。ActiveX很糟糕。：）请重新考虑您的答案，因为有更好的方法。使用背景图像不是一个好的解决方案。您是对的，但我打印的div位于按钮存在的页面中！我的意思是打印框上的每个样式都会影响按钮的加载时间！例如：如果我执行你的建议，它会在早期隐藏按钮！而且我也不想做这么复杂的工作来做这么简单的事情。但是，谢谢你，兄弟，在打印页面或在打印预览中显示之前，它不会隐藏按钮。它只会影响你放置类的按钮的样式。无论如何，它不会影响页面。你可以r将其设置为图像的解决方案还增加了更多的可访问性问题，如果用户的图像被禁用怎么办？他们会知道使用该按钮打印吗？我觉得打印按钮很傻，因为我的浏览器中内置了一个按钮。@armin否，请注意

media=“print”

在上面的示例中。这意味着这些样式将仅用于页面的打印版本，它们将被忽略（按钮将可见）当页面在屏幕上时哦，太好了：）我从你的解释中学到了很多。非常感谢你，伙计，它真的帮助了我。是的，你的答案比我的好，我会做你的提议：）这个答案比公认的答案好得多，因为它不需要额外的样式表。

 @media print {
   .noprint{
      display: none !important;
   }
}

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        
}

$('#print').on('click',function(){
  $('#print').hide();
  window.print();
  $('#print').show();

     });
});