如何在打印前隱藏按鈕並在打印完成後顯示它？

我有一個打印按鈕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

如何在打印前隱藏按鈕並在打印完成後顯示它？

回答

相關問題