Programming

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

procodes 2020. 5. 19. 20:45

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

나는이 질문이 SO와 다른 여러 웹 사이트에서 몇 가지 다른 방식으로 질문되는 것을 보았지만 대부분 너무 구체적이거나 오래되었습니다. 나는 누군가가 추측에 신경 쓰지 않고 여기에 확실한 대답을 줄 수 있기를 바랍니다.

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

참고 사항 :

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

마찬가지로,이 작업을 수행하는 데 대해 특정 제한이있는 메인 스트림 브라우저를 알고 있다면 도움이되지만 상당히 최신의 문서가 도움이 될 것입니다. (XYZ가 지난 3 년 동안이 정책을 대폭 변경했을 때 "XYZ의 보안 정책에 위배된다"고 말하는 것은 그리 설득력이 없습니다).

마지막으로 "기본 인쇄 설정 변경"이라고 말하면 내 페이지만을 의미하는 것이 아니며 인쇄 여백, 머리글 및 바닥 글을 구체적으로 언급하고 있습니다.

CSS는 페이지 여백뿐만 아니라 페이지 방향을 변경하는 옵션을 제공한다는 것을 잘 알고 있습니다. 많은 어려움 중 하나는 Firefox와 관련이 있습니다. 페이지 여백을 1 인치로 설정하면 이미 자리에 놓인 반 인치로 ADDS를 추가합니다.

고객 사이트에서 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 또는 Chrome 4.1 에서는 작동하지 않습니다 .

@page margin 설정은 IE 8 , Opera 10 , Chrome 21 및 Firefox 19에서 적용 됩니다.
이러한 브라우저에서 콘텐츠에 대한 페이지 여백이 올바르게 설정되어 있지만 머리글 / 바닥 글 숨기기를 해결하는 데 이상적입니다.

이것은 다른 브라우저에서 작동하는 방식입니다.

에서 인터넷 익스플로러 , 여백은 실제로 인쇄 설정에서 0mm로 설정하고 미리보기를 할 경우 기본적으로 0mm 얻을 것이다, 그러나 사용자는 미리보기에서 변경할 수 있습니다.
페이지 내용이 실제로 올바르게 배치 되어 있지만 브라우저 인쇄 머리글과 바닥 글이 불투명 한 배경으로 표시되어 해당 위치에서 페이지 내용을 효과적으로 숨 깁니다.
에서 파이어 폭스 최신 버전, 그것은되는 위치 를 올바르게하지만 나쁜 브라우저 헤더 텍스트의 혼합 및 페이지 콘텐츠처럼 보이는 있도록 머리글 / 바닥 글 텍스트 및 컨텐츠 텍스트 모두 표시됩니다.
In Opera, the page content hides the header when using a non-transparent background in the standard css and the header/footer position conflicts with content. Quite good, but looks strange if margin is set to a small value that causes the header to be partially visible. Also the page margin is not set properly.
In Chrome newer versions, the browser header and footer is hidden if the @page margin is set so small that the header/footer position conflicts with content. In my opinion, this is exactly how this should behave.

So the conclusion is that Chrome has the best implementation of this in respect to hiding the header/footer.

Any recent version of Chrome and Opera, as well as Firefox 48 alpha 1 and greater

You can set the page margin to a size that's too small to contain the text in order to disable this (borrowing from awe's answer):

@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>

For versions of Firefox up to 48 alpha 1

You can add a mozNoMarginBoxes attribute to the <html> tag to prevent the URL, page numbers and other things Firefox adds to the page margin from being printed.

It is working in Firefox 29 and onwards. You can see a screen shot of the difference here, or see here for a live example.

Note that the mozDisallowSelectionPrint attribute in the example is not required to remove the text from the margins; see What does the mozdisallowselectionprint attribute in PDF.js do?.

Other browsers

Unfortunately, there seems to be no way to resolve this problem in Internet Explorer, so you'll have to resort to PDF or ask users to disable margin texts.

The same goes for Safari; according to a comment by @Luiz Perez, the most recent versions of Safari (8, 9.1 and 10) still do not support @page for suppressing margin texts.

I can't find anything on Edge and I don't have a Windows 10 installation available to test.

As @Awe had said above, this is the solution, that is confirmed to work in Chrome!!

Just make sure this is INSIDE the head tags:

<head>
<style type="text/css" 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>

I have a similar request from a client who wants to have the header, page numbers, and html footer removed. In this case, the client is presenting an HTML page that can double as a formal certificate. The added URL, page, and, header, are irrelevant and lead to a less-than-pleasing final product. In some ways, it just looks cheap.

Media=Print has not been able to disable these browser defaults. The only workaround is to tell the user to click the "Gear" button and toggle those items on/off. Seriously, I had no idea I could do that for 20 years (and we think the typical user will have a clue to click the toggle button?).

If CSS supports Media=Print, it should support the ability to control the entire end-user print experience. I appreciate that the browsers provide the added fields, but, why not allow CSS to control the overall print experience-if that is what's desired. A 90% solution could be 100% with three more fields! A simple:

#BrowserPrintDefaults{display:none}

would suffice.

Again, it's not a matter whether or not the end-user wants to print it out or not (maybe your client is very private and doesn't want printed URLs floating around. Or maybe a executive team uses a private collaboration sites?). Glad to defend the end-user, but if somebody is seeking an answer, don't respond saying it's the right of the end-user to show or hide. Sometimes it's the right of the client paying the bills.

Try this code, works 100% for me:
FOR Landscape:

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

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

</style>
</head>

FOR Portait:

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

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

</style>
</head>

Since you mentioned "within their browser" and firefox, if you are using Internet Explorer, you can disable the page header/footer by temporarily setting of the value in the registry, see here for an example. AFAIK I have not heard of a way to do this within other browsers. Both Daniel's and Mickel's answers seems to collide with each other, I guess that there could be a similar setting somewhere in the registry for firefox to remove headers/footers or customize them. Have you checked it out?

Hope this helps and Happy holidays, Best regards, Tom.

@page margin:0mm now works in Firefox 19.0a2 (2012-12-07).

I solved my problem using some css into the web page.

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

This worked for me with about 1cm margin

@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

저작자표시 (새창열림)

'Programming' 카테고리의 다른 글

베어 (Bare) 저장소와 비 -Bare 저장소의 실제 차이점은 무엇입니까? (0)	2020.05.19
Visual Studio C # 문 축소 (0)	2020.05.19
Bash에서 디렉토리의 부모 얻기 (0)	2020.05.19
API와 SDK의 차이점 (0)	2020.05.19
IISExpress는 원격 컴퓨터에서 503 오류를 반환합니다 (0)	2020.05.19

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

procodes

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

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

이것은 다른 브라우저에서 작동하는 방식입니다.

Any recent version of Chrome and Opera, as well as Firefox 48 alpha 1 and greater

For versions of Firefox up to 48 alpha 1

Other browsers

'Programming' 카테고리의 다른 글

'Programming'의 다른글

티스토리툴바

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

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

이것은 다른 브라우저에서 작동하는 방식입니다.

Any recent version of Chrome and Opera, as well as Firefox 48 alpha 1 and greater

For versions of Firefox up to 48 alpha 1

Other browsers

'Programming' 카테고리의 다른 글

'Programming'의 다른글

관련글

티스토리툴바