Как скрыть кнопку перед печатью и показать ее после завершения процесса печати?

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

Это просто, пожалуйста, просто используйте это, примените к своей кнопке класс noprint.

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

Answer 3

Проблема в том, что вы не можете знать, когда печать заканчивается с использованием JavaScript.Нет события, которое сработало бы для уведомления об этом.

По соображениям безопасности javascript выполняется в изолированной среде внутри браузера, ограничивая его доступ к любым системным ресурсам.

Answer 4

Просто сделайте это ...

$ (документ) .ready (function () {

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

     });
});

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

Диалоговое окно печати является частью операционной системы. Javascript может получить доступ только к элементам, которые являются частью веб-страницы - все остальное будет серьезным нарушением безопасности.