source

페이지에서 브라우저 인쇄 옵션(헤더, 바닥글, 여백)을 비활성화하시겠습니까?

ittop 2023. 7. 31. 21:54
반응형

페이지에서 브라우저 인쇄 옵션(헤더, 바닥글, 여백)을 비활성화하시겠습니까?

SO와 다른 여러 웹 사이트에서 이 질문이 몇 가지 다른 방식으로 제기되는 것을 보았지만, 대부분은 너무 구체적이거나 구식입니다.저는 누군가가 여기서 추측에 구애받지 않고 확실한 답을 제시할 수 있기를 바랍니다.

누군가 브라우저 내에서 인쇄할 때 CSS나 자바스크립트를 사용하여 기본 프린터 설정을 변경할 수 있는 방법이 있습니까?물론 "브라우저에서 인쇄"라는 말은 PDF나 다른 플러그인에 의존하는 마임 유형이 아닌 HTML의 어떤 형태를 의미합니다.

참고:

일부 브라우저에서 이 기능을 제공하고 다른 브라우저에서는 제공하지 않는 경우(또는 일부 브라우저에서만 제공하는 방법을 알고 있는 경우) 브라우저별 솔루션을 환영합니다.

마찬가지로 EVER에 특정한 제한이 있는 메인스트림 브라우저를 알고 있다면 도움이 될 수도 있지만, 상당히 최신의 문서를 작성해 주시면 감사하겠습니다.(단순히 "XYZ의 보안 정책에 위배된다"고 말하는 것은 XYZ가 지난 3년 동안 해당 정책을 크게 변경한 경우에는 그다지 설득력이 없습니다.)

마지막으로, "기본 인쇄 설정 변경"은 페이지에만 해당하는 것이 아니라 인쇄 여백, 머리글 및 바닥글을 의미합니다.

저는 CSS가 페이지 여백뿐만 아니라 페이지 방향을 변경할 수 있는 옵션을 제공한다는 것을 잘 알고 있습니다.많은 어려움 중 하나는 파이어폭스입니다.페이지 여백을 1인치로 설정하면 이미 배치된 반인치에 추가됩니다.

저는 제 고객의 사이트에서 PDF 사용을 줄이고 싶지만, 프레젠테이션에 대한 침해와 신뢰성 부족이 그들의 주요 관심사입니다.

CSS 표준은 고급 포맷을 가능하게 합니다.있습니다.@pageCSS의 지시문은 페이지가 있는 미디어(종이와 같은)에만 적용되는 일부 서식을 활성화합니다.http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html 을 참조하십시오.

단점은 다른 브라우저에서 동작이 일관되지 않는다는 것입니다.Safari는 여전히 프린터 페이지 여백 설정을 전혀 지원하지 않지만, 이제 다른 모든 주요 브라우저가 이를 지원합니다.

과 @page디렉티브, 페이지의 프린터 여백을 지정할 수 있습니다(HTML 요소의 일반 CSS 여백과 동일하지 않음).

<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 initial value */
        margin: 0mm;  /* this affects the margin in the printer settings */
    }

    html
    {
        background-color: #FFFFFF; 
        margin: 0px;  /* this affects the margin on the html before sending to printer */
    }

    body
    {
        border: solid 1px blue ;
        margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */
    }
    </style>
</head>
<body>
  <div>Top line</div>
  <div>Line 2</div>
</body>
</html>

여기서는 기본적으로 페이지별 여백을 비활성화하여 머리글과 바닥글을 제거하므로 본문에 설정한 여백은 페이지 구분에 사용되지 않습니다(Konrad가 설명한 대로).즉, 인쇄된 내용이 한 페이지일 경우에만 제대로 작동합니다.

Firefox 3.6, IE 7, Safari 5.1.7 또는 Google Chrome 4.1에서는 작동하지 않습니다.

@page 여백을 설정하면 IE 8, Opera 10, Google Chrome 21 및 Firefox 19에 적용됩니다.
이러한 브라우저에서 페이지 여백이 내용에 대해 올바르게 설정되어 있지만, 헤더/푸터 숨기기를 해결하는 데는 적합하지 않습니다.

여러 브라우저에서 동작하는 방식은 다음과 같습니다.

  • Internet Explorer(인터넷 익스플로러)에서는 인쇄 설정에서 여백이 실제로 0mm로 설정되어 있으며, 미리 보기를 수행하면 기본값으로 0mm가 나오지만 사용자가 미리 보기에서 여백을 변경할 수 있습니다.
    페이지 내용이 실제로 올바른 위치에 있지만 브라우저 인쇄 머리글과 바닥글은 투명하지 않은 배경으로 표시되므로 해당 위치에서 페이지 내용을 효과적으로 숨깁니다.

  • Firefox 최신 버전에서는 올바르게 배치되지만 머리글/바닥글 텍스트와 내용 텍스트가 모두 표시되므로 브라우저 머리글 텍스트와 페이지 내용이 잘못 혼합된 것처럼 보입니다.

  • Opera에서 페이지 내용은 표준 CSS에서 투명하지 않은 배경을 사용할 때 머리글을 숨기고 머리글/바닥글 위치가 내용과 충돌합니다.상당히 좋지만 마진이 작은 값으로 설정되어 헤더를 부분적으로 볼 수 있으면 이상하게 보입니다.또한 페이지 여백이 제대로 설정되지 않았습니다.

  • Chrome 최신 버전에서 @페이지 여백이 너무 작게 설정되어 머리글/바닥글 위치가 내용과 충돌하면 브라우저 머리글 및 바닥글이 숨겨집니다.제 생각에는, 이것이 정확히 이렇게 행동해야 합니다.

결론적으로 Chrome은 헤더/푸터를 숨기는 것과 관련하여 이를 가장 잘 구현했습니다.

최신 버전의 Chrome 및 Opera, Firefox 48 alpha 1 이상

페이지 여백을 너무 작아서 텍스트를 포함할 수 없는 크기로 설정하여 사용하지 않도록 설정할 수 있습니다(Awear의 답변에서 차용).

@page {
  size: auto;  /* auto is the initial value */
  margin: 0mm; /* this affects the margin in the printer settings */
}
html {
  background-color: #FFFFFF;
  margin: 0px; /* this affects the margin on the HTML before sending to printer */
}
body {
  border: solid 1px blue;
  margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */
}
<ol>
  <li>
    <a href="data:,No Javascript :-(" target="_blank">Middle-click to open in new tab</a>
  </li>
  <li>
    <a href="javascript:print()">Print</a>
  </li>
</ol><!-- Hack to work around stack snippet restrictions --><script type=application/javascript>document.links[0].href="data:text/html;charset=utf-8,"+encodeURIComponent('<!doctype html>'+document.documentElement.outerHTML)</script>

최대 48개의 Firefox 버전의 경우 알파 1

에 속성을 추가할 수 있습니다.<html>페이지 여백에 Firefox가 추가하는 URL, 페이지 번호 및 기타 항목이 인쇄되지 않도록 태그를 지정합니다.

파이어폭스 29 이상에서 작동합니다.여기에서 차이를 보여주는 스크린샷을 볼 수 있고, 여기에서 실시간 예제를 볼 수 있습니다.

로 고는 다음과 .mozDisallowSelectionPrint예제의 속성은 텍스트를 여백에서 제거하는 데 필요하지 않습니다. 자세한 내용은 PDF.js의 mozdisdisallow selectionprint 속성은 무엇을 합니까?를 참조하십시오.

기타 브라우저

안타깝게도 Internet Explorer에서는 이 문제를 해결할 방법이 없는 것 같습니다. 따라서 PDF에 의존하거나 사용자에게 여백 텍스트를 비활성화하도록 요청해야 합니다.

Safari도 마찬가지입니다. @Luiz Perez의 코멘트에 따르면 최신 버전의 Safari(8, 9.1 및 10)는 여전히 지원하지 않습니다.@page여백 텍스트를 억제하기 위해.

Edge에서 아무것도 찾을 수 없고 테스트할 수 있는 Windows 10 설치가 없습니다.

@A 우리가 위에서 말했듯이, 이것은 크롬에서 작동하는 것으로 확인된 해결책입니다!!

이것이 헤드 태그 안에 있는지 확인하십시오.

<head>
<style media="print">
    @page 
    {
        size: auto;   /* auto is the initial value */
        margin: 0mm;  /* this affects the margin in the printer settings */
    }

    body 
    {
        background-color:#FFFFFF; 
        border: solid 1px black ;
        margin: 0px;  /* this affects the margin on the content before sending to printer */
   }
</style>
</head>

헤더, 페이지 번호, html 바닥글을 제거하고 싶은 고객으로부터 비슷한 요청이 있습니다.이 경우, 클라이언트는 공식 인증서로 두 배가 될 수 있는 HTML 페이지를 표시합니다.추가된 URL, 페이지 및 헤더는 관련이 없으며 최종 제품이 만족스럽지 못합니다.어떤 면에서는, 그것은 그저 저렴해 보입니다.

Media=Print는 이러한 브라우저 기본값을 비활성화할 수 없습니다.유일한 해결 방법은 사용자에게 "기어" 버튼을 클릭하고 해당 항목을 켜거나 끄도록 지시하는 것입니다.진심으로, 저는 20년 동안 제가 그렇게 할 수 있다는 것을 전혀 몰랐습니다(그리고 우리는 일반적인 사용자가 토글 버튼을 클릭할 수 있는 단서를 얻을 것이라고 생각합니다).

CSS가 Media=Print를 지원하는 경우, 전체 최종 사용자 인쇄 환경을 제어할 수 있는 기능을 지원해야 합니다.브라우저가 추가된 필드를 제공하는 것은 감사하지만, CSS가 전체 인쇄 환경을 제어하도록 허용하는 것이 좋습니다.90% 솔루션은 세 개의 필드가 더 있으면 100%가 될 수 있습니다!단순:

#BrowserPrintDefaults{display:none}

그것으로 충분할 것입니다.

또한 최종 사용자가 인쇄를 원하는지 여부는 중요하지 않습니다(아마도 고객은 매우 개인적이고 인쇄된 URL이 돌아다니는 것을 원하지 않을 것입니다).또는 경영진이 개인 협업 사이트를 사용할 수도 있습니다.최종 사용자를 변호하게 되어 기쁘지만, 누군가가 답을 찾고 있다면, 최종 사용자가 보여주거나 숨길 권리가 있다고 말하지 마십시오.때때로 그것은 고객이 청구서를 지불할 권리입니다.

저에게 가 있습니다: 이코드사보십시오용해를▁try. 저를 위해 100% 작동합니다.
위해서가로:

<head>
<style type="text/css">

@page{
  size: auto A4 landscape;
  margin: 3mm;
}

</style>
</head>

위해서 Portait:

<head>
<style type="text/css">

@page{
  size: auto;
  margin: 3mm;
}

</style>
</head>

@page 마진:0mm는 이제 Firefox 19.0a2(2012-12-07)에서 작동합니다.

"브라우저 내" 및 Firefox에 대해 언급했으므로 Internet Explorer를 사용하는 경우 레지스트리에서 값을 일시적으로 설정하여 페이지 머리글/바닥글을 비활성화할 수 있습니다. 예를 보려면 여기를 참조하십시오.AFAIK 다른 브라우저에서 이를 수행하는 방법에 대해 들어본 적이 없습니다.다니엘과 미켈의 답변이 서로 충돌하는 것 같은데, 파이어폭스가 헤더/푸터를 제거하거나 커스터마이즈할 수 있는 비슷한 설정이 레지스트리 어딘가에 있을 수 있다고 생각합니다.확인해 보셨습니까?

저는 웹 페이지에 CSS를 몇 개 사용하여 문제를 해결했습니다.

<style media="print">
   @page {
      size: auto;
      margin: 0;
  }
</style>

이것은 약 1cm의 마진으로 저에게 효과가 있었습니다.

@page 
{
    size:  auto;   /* auto is the initial value */
    margin: 0mm;  /* this affects the margin in the printer settings */
}
html
{
    background-color: #FFFFFF; 
    margin: 0mm;  /* this affects the margin on the html before sending to printer */
}
body
{
    padding:30px; /* margin you want for the content */
}

언급URL : https://stackoverflow.com/questions/1960939/disabling-browser-print-options-headers-footers-margins-from-page

반응형

'source' 카테고리의 다른 글

PHP의 텍스트 문자열에서 여러 항목을 대체하는 방법은 무엇입니까?  (0) 2023.07.31
Appdomain 재활용이란 무엇입니까?  (0) 2023.07.31
참조로 새 반환 값을 할당하는 것은 더 이상 권장되지 않습니다.  (0) 2023.07.31
버튼에서 png 색상 변경 - ios  (0) 2023.07.31
코어 php 코드로 워드프레스 데이터베이스에 액세스할 수 있는 방법이 있습니까?  (0) 2023.07.31

'source'의 다른글

  • 현재글페이지에서 브라우저 인쇄 옵션(헤더, 바닥글, 여백)을 비활성화하시겠습니까?

관련글

댓글

티스토리툴바