window.print ()에서 머리글 및 바닥 글 제거

109

페이지 인쇄에 window.print ()를 사용하고 있지만 머리글과 바닥 글에 페이지 제목, 파일 경로, 페이지 번호 및 날짜가 포함되어 있습니다. 그들을 제거하는 방법?

인쇄 스타일 시트도 시도했습니다.

#header, #nav, .noprint
{
display: none;
}

도와주세요. 감사.

css printing

— Viralk
소스

7

이러한 요소는 사용자의 브라우저 설정에 따라 다릅니다. CSS 나 JavaScript를 통해 제거 할 수 없을 것 같습니다.

— Michael Berkowski 2011

이 질문에 대한 설명이 필요하다고 생각합니다. 화면에 표시되는 HTML의 머리글 및 바닥 글 요소를 제거하려고합니까? 아니면 인쇄 기능에 의해 추가 된 머리글 및 바닥 글을 제거 하시겠습니까?

— AlanObject

149

Chrome에서는 다음을 사용하여이 자동 머리글 / 바닥 글을 숨길 수 있습니다.

@page { margin: 0; }

내용이 페이지의 한계까지 확장되므로 페이지 인쇄 머리글 / 바닥 글이 없습니다. 물론이 경우 본문 요소에 여백 / 패딩을 설정하여 콘텐츠가 페이지 가장자리까지 확장되지 않도록해야합니다. 일반 프린터는 여백없는 인쇄를 얻을 수없고 원하는 것이 아닐 수 있으므로 다음과 같이 사용해야합니다.

@media print {
  @page { margin: 0; }
  body { margin: 1.6cm; }
}

으로 마틴 의견에서 지적, 페이지 경우 (큰 테이블 등의) 한 페이지 과거 스크롤, 여백이 무시됩니다 긴 요소를 가지고 인쇄 된 버전은 이상하게 보일 것이다.

이 답변의 원본 (2013 년 5 월) 당시에는 Chrome에서만 작동했으며 지금은 확실하지 않으며 다시 시도 할 필요가 없습니다. 할 수없는 브라우저에 대한 지원이 필요한 경우 즉시 PDF를 만들어 인쇄 할 수 있지만 (자바 스크립트가 포함 된 자체 인쇄 PDF를 만들 수 있음) 이는 매우 번거 롭습니다.

— 디에고 누네스
소스

2

어떤 이유로 body { margin: 1.6cm; }나에게 올바른 여백을 무시하고 있었기 때문에 (아마도를 사용했기 때문에 text-align:right) 대신 <div class="container">내 콘텐츠에 대해를 만들고 .container { margin: 1.6cm; }대신 사용 했습니다.

— rybo111

8

Chrome 33에서이 작업을 시도하고 있습니다. 잘 작동하지만 body { margin: 1.6cm; }전체 문서의 여백이므로 처음과 마지막을 제외하고는 다중 페이지 문서의 세로 여백을 존중하지 않기 때문에주의 해야합니다. 슬프게도 해결 방법을 생각할 수 없습니다.

— pau.moreno

안녕하세요 @Diego, 귀하의 제안에 만족하며 머리글 바닥 글은 제거되었지만 인쇄 페이지는 증가했습니다. "몸 {마진 : 1.6cm;}"가 작동하고 1.0cm에 불과 변경 1.6cm .. :) 행복 codding

— 이씨 키리

3

여기에 더 광범위한 답변이 있습니다 : stackoverflow.com/questions/1960939/…

— jedison

페이지 여백을 제거하고 본문 여백을 추가하면 빈 페이지가 생성되었습니다. 나는 신체 여백을 패딩으로 변경했고 작동했습니다.

— André Guimarães Sakata 2011

21

이 코드를 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>

이것에 대해 더 알고 싶다면 이것을 방문하십시오.

— Rudias
소스

3

아니요. 작동하지 않습니다. 여백을 설정하는 것입니다. 여전히 머리글과 바닥 글에 URL과 날짜 시간이 표시됩니다

— 학습자

Chrome 및 Firefox에서는 작동하지만 IE 11에서는 작동하지 않습니다.

— Sammi

21

Firefox :

moznomarginboxes속성 추가<html>

예 :

<html moznomarginboxes mozdisallowselectionprint>

— l2aelba
소스

6

Firefox 48이 출시 된 후 (2016 년 8 월) 더 이상 작동하지 않습니다. bugzilla.mozilla.org/show_bug.cgi?id=1260480

— Aljullu

저에게는 작동하지 않습니다. FF 61이지만 @page {margin : 0; } 솔루션은 FF에서도 작동하는 것 같습니다.

— Kiko

11

오늘 제 동료도 같은 문제를 우연히 발견했습니다.

그러나 "margin : 0"솔루션은 크롬 기반 브라우저에서 작동하므로 Internet Explorer 는 @page 여백이 0으로 설정되어 있어도 바닥 글을 계속 인쇄합니다.

해결책은 (더 많은 해킹) @page에 마이너스 마진을 두는 것이 었습니다.

@page {margin:0 -6cm}
html {margin:0 6cm}

음의 여백은 Y 축에서는 작동하지 않으며 X에서만 작동합니다.

도움이되기를 바랍니다.

— 닉 파노
소스

8

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에서 https://bug743252.bugzilla.mozilla.org/attachment.cgi?id=714383 (페이지 소스보기 :: 태그 HTML).

당신의 코드에서 교체 <html>로<html moznomarginboxes mozdisallowselectionprint>.

— Hossein Ghaem
소스

4

@media print {
    .footer,
    #non-printable {
        display: none !important;
    }
    #printable {
        display: block;
    }
}

— 쉬크 압둘라
소스

이것이 적절한 방법 인 것 같습니다. 내 경우에도 iframe 컨텍스트로도 잘 작동합니다.

— TwystO

2

이것이 가장 간단한 해결책이 될 것입니다. 나는 인터넷에서 대부분의 솔루션을 시도했지만 이것이 도움이되었습니다.

@print{
    @page :footer {color: #fff }
    @page :header {color: #fff}
}

— 야 시타
소스

11

이것은 아무것도하지 않습니다.

— 밤

1

@page { margin: 0; }Chrome 및 Firefox에서 잘 작동합니다. CSS를 통해 IE를 수정하는 방법을 찾지 못했습니다. 그러나 자신의 컴퓨터에서 IE의 페이지 설정으로 이동하여 여백을 0으로 설정할 수 있습니다. alt를 누른 다음 왼쪽 상단의 파일 메뉴를 누르면 페이지 설정을 찾을 수 있습니다. 이것은 한 번에 하나의 컴퓨터에서만 작동합니다 ...

— 삼미
소스

0

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>

l2aelba가 말했듯이 FireFox의 경우 ,

예에서 moznomarginboxes 속성을 추가합니다.

<html moznomarginboxes mozdisallowselectionprint>

— 니힐 루스
소스

위 코드에서 <div id = "header"style = "background-color : White;"> </ div> <div id = "footer"style = "background-color : White;"> </ div>는 선택 사항입니다. .

— Nikhilus

0

수동으로 인쇄 한 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>
``

— Linkler
소스

-1

이 지점까지 아래로 스크롤하면 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를 사용했습니다. 일반 자바 스크립트를 사용할 수 있음).

<script>
$("#print").click(function () {
    var contents = $("#yourDivToPrint").html();
    PrintElem(contents);
})
</script>

분명히 클릭하려면 링크가 필요합니다.

<a href="#" id="print">Print my Div</a>

인쇄 할 div :

<div id="yourDivToPrint">....</div>

— 요시아
소스

-3

코드를 작성할 필요가 없습니다. window.print ()를 처음 호출하기 직전에 브라우저의 인쇄 설정을 변경하십시오. 예를 들어 firefox에서 :

Alt 또는 F10을 눌러 메뉴 표시 줄을 확인합니다.
파일을 클릭 한 다음 페이지 설정을 클릭합니다.
여백 및 머리글 / 바닥 글 탭을 선택합니다.
공백-> 이미지의 URL 변경

IE에 대한 또 다른 예 (이전 버전에 IE 11을 사용하고 있습니다. Firefox 또는 Internet Explorer에서 모든 페이지에 URL 인쇄 방지를 볼 수 있음 ) :

Alt 또는 F10을 눌러 메뉴 표시 줄을 확인합니다.
파일을 클릭 한 다음 페이지 설정을 클릭합니다.
머리글 및 바닥 글 섹션에서 비어있는 URL을 변경합니다.

— 알리레자 아자미
소스

이 링크가 질문에 답할 수 있지만 여기에 답변의 필수 부분을 포함하고 참조 용 링크를 제공하는 것이 좋습니다. 링크 된 페이지가 변경되면 링크 전용 답변이 무효화 될 수 있습니다. - 검토에서

— SurvivalMachine

SurvivalMachine 제안에 감사드립니다. 나는 :) 몇 분 전 내 대답을 편집

— 알리레자 azami

흠 ... 저는이 앱을 고려하기 위해 모든 사용자를 돌아 다니며 브라우저를 업데이트하는 것을 좋아하지 않습니다 (특히 지구 반대편에 거주하는 경우). 또한 다른 앱에 대한 설정이 필요한 경우 어떻게해야합니까? 이것은 대답이 아닙니다.

— Paul

이 접근 방식에는 페이지 / 앱에 구워진 기능이 제공하는 브라우저 간 기능이 없습니다.

— killscreen