웹사이트의 일부 애플리케이션은 사용자가 페이지를 직접 인쇄할 수 있는 기능을 제공해야 합니다. 가장 눈에 띄는 것은 전자 쿠폰입니다. 판매자는 웹사이트에서 제공하는 템플릿에 따라 내용을 입력한 다음 사용자가 이 페이지를 인쇄할 때 생성합니다. , 쿠폰입니다.
물론 가장 좋은 방법은 이 페이지를 기반으로 이미지 파일을 생성하는 것입니다. 사용자가 이미지를 다운로드한 다음 인쇄하면 브라우저 설정의 영향을 받지 않습니다.
그러나 어떤 이유로 인해 속도를 높이거나 비용을 절약하기 위해 페이지를 이미지 파일로 저장하지 않으면 HTML 페이지만 직접 인쇄할 수 있으며, 여기에는 페이지 디자인에 몇 가지 추가 요구 사항이 필요합니다. 주의할 점은 다음과 같습니다.
1. 스타일 태그의 속성을 설정합니다.
<스타일 유형=”텍스트/css” 미디어=”인쇄”>
이는 이 스타일에서 도입되거나 정의된 스타일 속성이 인쇄할 때만 사용된다는 것을 의미합니다. 참고로, 미디어 속성이 설정되지 않으면 정의된 스타일이 브라우저와 인쇄 모두에 적용되므로 사용을 권장합니다. 이와 같은 스타일 모든 일반 스타일 뒤에 배치됩니다. 예를 들어 인쇄된 페이지에 "인쇄 및 Yahoo 입소문 네트워크"라는 줄이 있기를 바라지만 브라우저에서는 이것이 현실적이지 않습니다.
<p class="printTitle">인쇄 및 Yahoo 입소문 네트워크</p>
그런 다음 통합 스타일에서 .printTitle{display:none;}을 설정하고 미디어가 "인쇄"인 후속 스타일에서 .printTitle{display:block;}으로 설정할 수 있습니다. 정의된 인쇄 스타일은 인쇄 시 정기적으로 정의된 스타일보다 우선순위가 높지 않으므로 모든 일반 스타일 뒤에 인쇄 스타일을 배치하는 것이 다시 권장됩니다.
2. 페이지가 인쇄되면 브라우저 설정이 인쇄 효과에 영향을 미칩니다. IE에서는 Firefox와 유사하게 "도구" - "인터넷 옵션" - "고급"에 "배경색 및 이미지 인쇄"가 있습니다. "파일" - "페이지 설정"에 "배경색 및 이미지 인쇄"가 있습니다. 이 옵션을 선택하면 페이지의 배경색과 이미지를 인쇄할 수 있습니다. (일부 비표준 IE 커널 브라우저에서는 일부 문제는 배경색은 인쇄되지만 배경 이미지는 인쇄되지 않습니다.) 선택하지 않으면 배경색과 이미지가 모두 인쇄되지 않으므로 다른 브라우저와 브라우저 설정에서 사용자를 보호하기 위해 두 가지를 제안합니다. 첫 번째는 배경색으로 채워진 영역을 경계로 사용하고, 배경색과 동일하게 색상을 추가하여 인쇄 시 변화가 보이지 않도록 합니다. 사용자 설정으로 인해 배경색이 인쇄되지 않는 경우에도 테두리가 구분으로 사용되고 페이지 레이아웃은 가장 큰 레이어에 유지됩니다. 두 번째는 모든 필수 그림에 <img/> 태그를 사용하는 것입니다. 사용자의 브라우저 설정에 관계없이 이러한 사진을 인쇄할 수 있습니다. 이는 일반적으로 일부 페이지가 다른 방식으로 디자인되어 있지만 인쇄 효과를 통일하기 위해서는 포기하기만 하면 됩니다.
나는 단지 실제 적용에서 직면하는 몇 가지 문제를 제기했을 뿐입니다. 새로운 질문이나 아이디어가 있으면 함께 토론해 보세요. 먼저 여기에 던져보겠습니다.