Question

我有一个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;   
});

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

Answer 1

你错了。您不应该使用JavaScript或使用背景图像来显示和隐藏按钮。您应该使用打印样式表，以便在打印时为页面应用不同的样式。在您的情况下，您可以在此样式表中将显示设置为无[或隐藏的可见性]。

因此，您添加了一个样式表，其中包含用于打印的媒体类型

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

在print.css中，隐藏按钮

.printButtonClass{ display : none }

然而，当您在没有JavaScript的情况下进行打印时，按钮会隐藏。

Answer 2

问题是您无法知道何时使用javascript完成打印。没有任何事件会被触发通知。

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

Answer 3

这很简单，请使用此功能，将类noprint应用于按钮。

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

Answer 4

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

Answer 5

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        
}

Answer 6

只需这样做......

（文档）$。就绪（函数（）{

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

     });
});

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

6 个答案: