아주 기본적인 HTML

Question

내가 아주 간단한 HTML이 인쇄에 몇 가지 문제를 해결하는 방법 :

<div id="advisor"> 
    <div id="print_this_container"> 
     <form> 
      <input type="button" value=" Print this page " 
       onclick="window.print();return false;" /> 
     </form> 
    </div> 
    <div id="top_section"> 
     <div class="left_box" style="position: relative;"> 
      <div id="avatar_container"> 
       <img class="avatar" src="<%= @advisor.avatar_url %>" /> 
      </div> 
     </div> 
     <div class="right_box"> 
      <h2><strong>Council on Emerging Markets</strong></h2> 
     </div> 
    </div> 

</div> 

연관된 CSS는 다음과 같습니다

#advisor{ 
    width: 800px; 
} 
#top_section{ 
    border-bottom: 1px solid #666 !important; 
    height: 200px; 
} 
.right_box{ 
    float: left; 
    padding-left: 25px; 
    padding-top: 50px; 
    width: 550px; 
} 
.left_box{ 
    background: #ccc; 
    width: 200px; 
    float: left; 
    text-align: center; 
    height: 100%; 
} 
img.avatar{ 
    width: 150px; 
} 

그리고 내 print.css의를

#advisor{ 
    width: auto; 
    } 
#print_this_container{ 
    display: none; 
    } 

내 웹 페이지에서 멋지게 보입니다. 나는 그것을 인쇄 할 때, 다음과 같은 문제가 발생합니다

이

• 윗부분 테두리 이미지가 오른쪽 상자에 왼쪽 상자에 표시됩니다
• 축소
• 사라는 뜨지 않습니다
• 왼쪽 상자 배경색 가 사라짐

누구든지 이러한 문제를 해결하는 방법을 알고 있습니까?

Answer 1

브라우저에서 인쇄하는 데 여러 가지 문제가 있습니다. 인쇄 관련 항목이 대부분의 브라우저에서 작동하지 않으며 여러 브라우저에서 지원되는 경우에도 다르게 처리됩니다.

브라우저를 사용하여 라벨을 인쇄하는 데 2 ​​주가 소요되었습니다. 우리는 가능한 한 정상적으로 실패하는 여러 가지 해결책을 찾았습니다. ...

먼저 우리는 실버 라이트를 감지하고 플래시를합니다. 둘 중 하나가 존재하면 인쇄 할 때 사용합니다.

다음으로 우리는 서버의 메모리에 웹 브라우저를로드하고 특정 URL에서 페이지의 스크린 샷을 찍는 코드 조각을 가지고 있습니다. 그러면 이미지를 생성 한 다음 인쇄하기 위해 클라이언트로 반환합니다. 이것은 우리 시나리오에서는 괜찮지 만 mem 사용법 등을 확인하고 싶을 수도 있습니다. 높은 볼륨 사이트의 경우.

발견 된 몇 가지 사항 : 페이지 여백은 실제적인 고통입니다 (특히 라벨의 경우!). 특정 버전의 Opera에서만 CSS의 페이지 여백을 수정할 수 있습니다.

배경 이미지 및 색상은 대개 브라우저에서 인쇄하지 않습니다 (잉크 절약). 대부분의 브라우저에서 BG 인쇄를 사용할 수있는 옵션이 있습니다.

파이어 폭스에서

에 대해 살펴 본다

IE에서

print.printer_<PrinterName>.print_bgcolor 
print.printer_<PrinterName>.print_bgimages 

내가 ... 그것은 파일 -> 페이지 설정에서 생각 분명히

는이 중 어느 것도 그들이 할 수 없기 때문에 많은 도움을 설정 사이트 자체에서 설정 - 사용자가 의도적으로 설정할 수 있는지 여부는 사용자에 따라 다릅니다. 그렇지 않으면 콘텐츠 뒤에 배치 된 일반 배경이 아닌 이미지를 사용해 볼 수 있습니다.

제 경험으로 보면 플로트가 인쇄에는 적합하지 않습니다. 그러나 시도한 이후로 오랜 시간이 걸렸습니다. 페이지에 명시적인 너비 (100 %?)를 제공하는 한 계속 작동 할 것입니다. 현재, 대부분의 브라우저는 인쇄 매체에 기본으로 shrink-to-fit를 사용한다고 생각합니다.

페이지 너비가 또 다른 흥미로운 것입니다. - 나는 매우 제한된 "너비"속성을 찾았습니다. 한 지점에서 거의 테이블에 의지했습니다. 지금까지 백분율은 잘 작동하는 것처럼 보이지만 자동은 그렇지 않습니다.

는