Удалить кнопку печати из печатной копии
Со ссылкой на эту ссылку и на эту, я распечатал отчет, используя JavaScript как
<!DOCTYPE html>
<html>
<head>
<script>
function printpage()
{
var data = 'Sample Report<br />Sample Report<br />Sample Report<br />';
var data = data+'<br/><button onclick="window.print()">Print the Report</button>';
myWindow=window.open('','','width=800,height=600');
myWindow.innerWidth = screen.width;
myWindow.innerHeight = screen.height;
myWindow.screenX = 0;
myWindow.screenY = 0;
myWindow.document.write(data);
myWindow.focus();
}
</script>
</head>
<body>
<input type="button" value="Print Preview" onclick="printpage()" />
</body>
</html>
Но после печати кнопка печати все еще остается на бумажном носителе. Так как же скрыть кнопку печати в печатном виде при печати с помощью вышеуказанной функции?
2 ответа
Решение
Дайте вашей кнопке класс, например class="noprint"
, Затем добавьте таблицу стилей для печатных СМИ в ваш CSS:
@media print {
/* style sheet for print goes here */
.noprint {
visibility: hidden;
}
}
Подробности: http://www.w3.org/TR/CSS2/media.html
Я только что решил это с помощью следующего CSS после назначения идентификатора для кнопки печати.
<style type="text/css">
@media print {
#myPrntbtn {
display : none;
}
}
</style>
И моя кнопка выглядит следующим образом.
<input id ="myPrntbtn" type="button" value="Print" onclick="window.print();" >
Кроме того, вы можете запустить функцию JavaScript с помощью следующих действий...
- Скрыть кнопку
- Распечатать страницу с помощью window.print();
- Снова Показать назад кнопку
Кусок кода...
<script type="text/javascript">
function printMyPage() {
//Get the print button
var printButton = document.getElementById("myPrntbtn");
//Hide the print button
printButton.style.visibility = 'hidden';
//Print the page content
window.print()
//Show back the print button on web page
printButton.style.visibility = 'visible';
}
</script>