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

我有一个打印按钮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; 
});

这正确地隐藏了那个按钮，但是当打印过程完成后，按钮不会再显示！问题是什么？

来源

2010-09-18 armin etemadi

重新考虑你的答案，因为有这样做的更好的方法。使用背景图片不是一个好的解决方案 – epascarello 2010-09-18 11:28:43

你会犯这个错误。您不应该使用JavaScript显示和隐藏按钮或使用背景图像来执行此操作。您应该使用打印样式表，该样式表允许您在打印页面时向页面应用不同的样式。在你的情况下，你可以在这个样式表中将显示设置为none [或隐藏可视性]。

所以，你与媒体类型添加一个样式表打印

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

在这种print.css，你隐藏按钮

.printButtonClass{ display : none }

而且急，按钮，当你不带打印隐藏JavaScript的。

来源

2010-09-18 11:25:55 epascarello

你的权利，但我打印的是一个页面中的按钮存在的div！我的意思是印刷盒上的每个样式都会影响加载时间上的按钮！例如：如果我做你的建议，它会在早期隐藏按钮！ – 2010-09-18 11:41:38

我也不想做这么简单的事情这么复杂的工作。但是，谢谢你的朋友 – 2010-09-18 11:42:51

这不会隐藏按钮，直到页面打印或显示在打印预览。它只会影响您放置课程的按钮的样式。它不会影响页面。您将其设置为图片的解决方案还会增加更多可访问性问题，以及用户的图片是否被禁用？他们知道用那个按钮打印吗？因为我的浏览器中内置了一个，所以我发现打印按钮很傻。 – epascarello 2010-09-18 11:46:34

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

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

来源

2010-09-18 11:04:51

那么我该怎么做这个好友？ – 2010-09-18 11:07:33

你不能使用纯javascript。有ActiveX控件允许管理打印，但它们只能在IE上工作，用户应该浏览只能接受安装它们。 – 2010-09-18 11:10:56

哦！我找到了我自己的答案！如果我把这个按钮的图像作为背景 html标签，它不会自动发送到打印机！ :) – 2010-09-18 11:18:55

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

来源

2010-09-18 11:05:09 baklap

谢谢，但我该怎么做这件事？ – 2010-09-18 11:09:35

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

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

来源

2014-11-28 07:59:50

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   
}

来源

2016-08-01 10:40:49 Rahil

简单的做到这些......

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

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

    }); 
});

来源

2017-11-14 16:56:10

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

回答

相关问题