Я использую window.print() для печати страницы, но у меня заголовок и нижний колонтитул содержат заголовок страницы, путь к файлу, номер страницы и дату. Как их удалить?
Я также попробовал таблицу стилей печати.
#header, #nav, .noprint
{
display: none;
}
Пожалуйста, помогите. Спасибо.
В Chrome можно скрыть этот автоматический колонтитул, используя
@page { margin: 0; }
Поскольку содержимое будет расширяться до пределов страницы, верхний/нижний колонтитулы при печати страницы будут отсутствовать. Конечно, в этом случае вы должны установить некоторые поля/отступы в элементе body, чтобы содержимое не доходило до края страницы. Поскольку обычные принтеры просто не могут печатать без полей и, вероятно, это не то, что вам нужно, вы должны использовать что-то вроде этого:
@media print {
@page { margin: 0; }
body { margin: 1.6cm; }
}
Как указал Мартин в комментарии, если страница содержит длинный элемент, который прокручивается на одну страницу дальше (например, большая таблица), поле игнорируется, и печатная версия будет выглядеть странно.
На момент написания этого ответа (май 2013 г.) он работал только на Chrome, сейчас не уверен, больше не нужно было повторять попытку. Если вам нужна поддержка браузера, который не может работать, вы можете создать PDF файл на лету и распечатать его (вы можете создать самопечатающийся PDF файл, в который встроен JavaScript), но это очень хлопотно.
Firefox:
moznomarginboxes в <html>Пример:
<html moznomarginboxes mozdisallowselectionprint>
Я уверен, что добавление этого кода в ваш файл css решит проблему
<style type="text/css" media="print">
@page
{
size: auto; /* auto is the initial value */
margin: 0mm; /* this affects the margin in the printer settings */
}
</style>
Сегодня мой коллега наткнулся на тот же вопрос.
Так как решение "margin: 0" работает для браузеров на основе хрома, однако Internet Explorer продолжает печатать нижний колонтитул, даже если поля @page установлены на ноль.
Решение (больше взлома) заключалось в том, чтобы поместить отрицательный запас на @page.
@page {margin:0 -6cm}
html {margin:0 6cm}
Обратите внимание, что отрицательное поле не будет работать для оси Y, только для X
Надеюсь, что это поможет.
Стандарт CSS допускает некоторое расширенное форматирование. В CSS есть директива @page, которая разрешает некоторое форматирование, которое применяется только к постраничным носителям (например, к бумаге). См. Http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Print Test</title>
<style type="text/css" media="print">
@page
{
size: auto; /* auto is the current printer page size */
margin: 0mm; /* this affects the margin in the printer settings */
}
body
{
background-color:#FFFFFF;
border: solid 1px black ;
margin: 0px; /* the margin on the content before printing */
}
</style>
</head>
<body>
<div>Top line</div>
<div>Line 2</div>
</body>
</html>@media print {
.footer,
#non-printable {
display: none !important;
}
#printable {
display: block;
}
}
Это будет самое простое решение. Я попробовал большинство решений в Интернете, но только это помогло мне.
@print{
@page :footer {color: #fff }
@page :header {color: #fff}
}
вам не нужно писать код. перед вызовом window.print() в первый раз измените настройки печати вашего браузера. например, в firefox:
и еще один пример для IE (я использую IE 11 для предыдущих версий, вы можете увидеть это Запретить Firefox или Internet Explorer печатать URL на каждой странице):
1. Для Chrome и IE
<script language="javascript">
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.getElementById('header').style.display = 'none';
document.getElementById('footer').style.display = 'none';
document.body.innerHTML = printContents;
window.print();
document.body.innerHTML = originalContents;
}
</script>
<div id="div_print">
<div id="header" style="background-color:White;"></div>
<div id="footer" style="background-color:White;"></div>
</div>
Добавить атрибут moznomarginboxes в Пример:
<html moznomarginboxes mozdisallowselectionprint>
Если вам посчастливилось прокрутить страницу до этого момента, я нашел решение для Firefox. Он будет печатать содержимое из определенного div без нижнего колонтитула и заголовков. Вы можете настроить, как пожелаете.
Во-первых, загрузите и установите этот аддон: JSPrintSetup.
Во-вторых, напишите эту функцию:
<script>
function PrintElem(elem)
{
var mywindow = window.open('', 'PRINT', 'height=400,width=600');
mywindow.document.write('<html><head><title>' + document.title + '</title>');
mywindow.document.write('</head><body >');
mywindow.document.write(elem);
mywindow.document.write('</body></html>');
mywindow.document.close(); // necessary for IE >= 10
mywindow.focus(); // necessary for IE >= 10*/
//jsPrintSetup.setPrinter('PDFCreator'); //set the printer if you wish
jsPrintSetup.setSilentPrint(1);
//sent empty page header
jsPrintSetup.setOption('headerStrLeft', '');
jsPrintSetup.setOption('headerStrCenter', '');
jsPrintSetup.setOption('headerStrRight', '');
// set empty page footer
jsPrintSetup.setOption('footerStrLeft', '');
jsPrintSetup.setOption('footerStrCenter', '');
jsPrintSetup.setOption('footerStrRight', '');
// print my window silently.
jsPrintSetup.printWindow(mywindow);
jsPrintSetup.setSilentPrint(1); //change to 0 if you want print dialog
mywindow.close();
return true;
}
</script>
В-третьих, в вашем коде, где бы вы ни захотели написать код печати, сделайте это (я использовал JQuery. Вы можете использовать простой javascript):
<script>
$("#print").click(function () {
var contents = $("#yourDivToPrint").html();
PrintElem(contents);
})
</script>
Очевидно, вам нужна ссылка:
<a href="#" id="print">Print my Div</a>
И ваш div для печати:
<div id="yourDivToPrint">....</div>