프린터에서 무시할 HTML로 공백 생성

Question

하나의 웹 페이지에서 여러 고객을위한 지폐를 생성하는 코드가 있습니다. 나는 div 요소 style="page-break-after:always"을 사용하므로 사용자는 모든 고객 청구서를 한 번에 인쇄 할 수 있으며 고유 고객 용 청구서는 모두 별도의 용지에 인쇄됩니다. 내 문제는 하나의 지폐와 다음 지폐 사이에 약간의 공간을 두어 사용자 화면에서 지폐를 조금 더 읽기 좋게하려고하지만, 나는 많은 공백을 인쇄하고 싶지 않다는 것이다. 프린터가 무시할 지폐 사이에 여유 공간을 추가하려면 어떻게해야합니까?

Answer 1

프린터에 대해서만 특수 스타일 시트를 구현하고 해당 스타일에서 특정 요소를 무시하도록 할 수 있습니다. 이런 식으로 뭔가가 작동합니다 :

<link rel="stylesheet" type="text/css" media="print" href="/css/print.css"> 

이 그런 다음 print.css 파일 내에서 당신이 원래 CSS 모두를 가질 수 있으며,이 같은 정의, HTML 파일 내에서 모든 요소를 ​​

.printhide{ display:none; } 

당신 숨기기를 원하면 printhide 클래스를 추가하십시오. 예 :

<br class="printhide"> 

Answer 2

print css을 사용하십시오. 이것은 다른 모든 CSS 파일과 함께로드 될 수있는 인쇄 특정 규칙을 가진 CSS 파일이지만 브라우저에 인쇄용으로 지정되도록 media="print" 속성이 있습니다.

<link rel="stylesheet" type="text/css" media="print" href="print.css" /> 

Answer 3

법안 후 div를 삽입 :

<link rel="stylesheet" href="screen.css"/> 
<link rel="stylesheet" href="print.css" media="print"/> 

이 screen.css에 공간을 정의합니다 :

div.spacer {margin-bottom:2em;} 

가 숨기기

<div class="bill"> 
...your bill goes here... 
<div class="spacer"></div> 
</div> 

가 인쇄 스타일 시트를 추가 print.css의 공백 :

div.spacer {display:none;}