Удалить верхний и нижний колонтитулы из window.print()
Я использую window.print() для печати страницы, но у меня есть верхний и нижний колонтитулы, содержащие заголовок страницы, путь к файлу, номер страницы и дату. Как их убрать?
Я попробовал также распечатать таблицу стилей.
#header, #nav, .noprint
{
display: none;
}
Пожалуйста помоги. Благодарю.
16 ответов
В Chrome можно скрыть этот автоматический колонтитул, используя
@page { margin: 0; }
Поскольку содержимое будет расширяться до пределов страницы, верхний / нижний колонтитулы при печати страницы будут отсутствовать. Конечно, в этом случае вы должны установить некоторые поля / отступы в элементе body, чтобы содержимое не доходило до края страницы. Поскольку обычные принтеры просто не могут печатать без полей и, вероятно, это не то, что вам нужно, вы должны использовать что-то вроде этого:
@media print {
@page { margin: 0; }
body { margin: 1.6cm; }
}
Как отметил Мартин в комментарии, если страница содержит длинный элемент, который прокручивается на одну страницу дальше (например, большая таблица), поле игнорируется, и печатная версия будет выглядеть странно.
На момент написания этого ответа (май 2013 г.) он работал только на Chrome, сейчас не уверен, больше не нужно было повторять попытку. Если вам нужна поддержка браузера, который не может работать, вы можете создать PDF-файл на лету и распечатать его (вы можете создать самопечатающийся PDF-файл со встроенным JavaScript-кодом), но это огромная проблема.
Я уверен, что добавление этого кода в файл 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>
Fire Fox:
- добавлять
moznomarginboxesприписывать<html>
Пример:
<html moznomarginboxes mozdisallowselectionprint>
избегание верхнего и нижнего поля решит вашу проблему
@media print {
@page {
margin-left: 0.5in;
margin-right: 0.5in;
margin-top: 0;
margin-bottom: 0;
}
}
Сегодня мой коллега наткнулся на ту же проблему.
Так как решение "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>и для Firefox используйте его
В Firefox https://bug743252.bugzilla.mozilla.org/attachment.cgi?id=714383 (просмотреть страницу-источник:: тег HTML).
В вашем коде замените <html> с <html moznomarginboxes mozdisallowselectionprint>.
@media print {
.footer,
#non-printable {
display: none !important;
}
#printable {
display: block;
}
}
Лучшее решение, которое у меня есть, которое также сохраняет приятный вид страницы:
@media print {
@page {
margin: 0.3in 1in 0.3in 1in !important
}
}
Это будет самое простое решение. Я попробовал большинство решений в Интернете, но только это помогло мне.
@print{
@page :footer {color: #fff }
@page :header {color: #fff}
}
@page { margin: 0; }отлично работает в Chrome и Firefox. Я не нашел способа исправить IE через css. Но вы можете войти в Параметры страницы в IE на своем компьютере и установить поля равными 0. Нажмите alt, а затем меню файла в верхнем левом углу, и вы найдете Параметры страницы. Это работает только для одной машины за раз...
Итак, основная идея состоит в том, чтобы иметь div (без отображения), содержащий элементы для печати. Теперь при нажатии кнопки печатать не на все тело, а только на этот конкретный элемент div. Столкнулся с множеством проблем при печати div (часть HTML) с помощью window.print(). Используемый ниже метод, и он без проблем работает в Edge, Chrome и Mozilla для меня, посмотрим, поможет ли он и вам.
function printDiv(id) {
var contents = document.getElementById(id).innerHTML;
var frame1 = document.createElement('iframe');
frame1.name = "frame1";
frame1.style.position = "absolute";
frame1.style.top = "-1000000px";
document.body.appendChild(frame1);
var frameDoc = frame1.contentWindow ? frame1.contentWindow : frame1.contentDocument.document ? frame1.contentDocument.document : frame1.contentDocument;
frameDoc.document.open();
frameDoc.document.write("<html><head>\n\n " +
"<style type=\"text/css\" media=\"print\">\n " +
"@@page\n {\n " +
"size: auto; /* auto is the initial value */\n " +
"margin: 10mm; /* this affects the margin in the printer settings */\n " +
" }\n\n html\n {\n " +
" background-color: #FFFFFF;\n " +
" }\n\n body\n " +
" { font-family:\"Times New Roman\", Times, serif;\n " +
" border: none ;\n " +
" margin: 0; /* margin you want for the content */\n " +
" }\n .table {\n width: 100%;\n " +
" max-width: 100%;\n margin-bottom: 20px;\n " +
" border-collapse: collapse;\n " +
" background-color: transparent;\n display: table;\n " +
" }\n .table-bordered {\n " +
" border: 1px solid #ccc;\n }\n tr {\n " +
" display: table-row;\n vertical-align: inherit;\n " +
" border-color: inherit;\n padding:15px;\n }\n " +
" .table-bordered tr td {border: 1px solid #ccc!important; padding:15px!important;}\n " +
" </style><title></title></head><body>".concat(contents, "</body>"));
frameDoc.document.close();
setTimeout(function () {
window.frames["frame1"].focus();
window.frames["frame1"].print();
document.body.removeChild(frame1);
}, 500);
return false;
}
Назовите это как
<a href="#" onclick="javascript:printDiv('divwithcontenttoprint')"> Print </a>
Я пытался удалить верхний и нижний колонтитулы html-страницы, которую распечатал вручную.
Никакое решение на этой странице не помогло мне, я просто определил свой собственный нижний колонтитул, как описано здесь, Firefox не добавлял бы свой собственный верхний и нижний колонтитулы.
К сожалению, это не работает в Chrome.
В CSS:
@media screen {
div.divFooter {
display: none;
}
}
@media print {
div.divFooter {
position: fixed;
bottom: 0;
}
}
Добавьте это в свой HTML:
<div class="divFooter">
<p>UNCLASSIFIED</p>
</div>
``
Вам не нужно писать код. Непосредственно перед вызовом window.print() в первый раз измените настройки печати вашего браузера. например в Firefox:
- Нажмите Alt или F10, чтобы увидеть строку меню
- Нажмите Файл, затем Параметры страницы
- Выберите вкладку Margins & Header/Footers
- Изменить URL на пустое -> изображение
и еще один пример для IE (я использую IE 11 для предыдущих версий, вы можете увидеть это, чтобы Firefox или Internet Explorer не печатали URL на каждой странице):
- Нажмите Alt или F10, чтобы увидеть строку меню
- Нажмите Файл, затем Параметры страницы
- в разделе "Верхние и нижние колонтитулы" измените URL на пустой.
Если вам доведется пролистать до этой точки, я нашел решение для 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>
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>
- Для FireFox, как сказал l2aelba,
Добавьте атрибут moznomarginboxes в Пример:
<html moznomarginboxes mozdisallowselectionprint>
<html>
<head>
<title>Print</title>
<script type="text/javascript">
window.print();
document.margin='none';
</script>
</head>
<body>
<p>hello</p>
<p>hi</p>
</body>
</html>
// поместите его в файл скрипта или в тег скрипта.
Это удалит все поля, и вы не сможете видеть верхние и нижние колонтитулы.