가로 모드로 인쇄해야하는 웹 페이지에 대한 보고서를 생성 중입니다.가로 방향으로 웹 페이지 인쇄
나는 이것을 며칠 동안 찾고 있었으며 웹에서 많은 답변을 발견했다. 기본적으로 간단한 스타일이 필요합니다.
@page {
size: landscape;
margin: 0.5cm 0.5cm 0.5cm 0.5cm;
}
하지만 저에게는 효과가없는 것 같습니다.
아무도 도와 줄 수 있습니까?
감사합니다.
이 방법을 확인하십시오. 크롬과 모질라 파이어 폭스에서 이것을 테스트했습니다. 또한 귀하는 귀하의 콘텐츠와 함께이 문제를 개선 할 수 있으며 styles.Here은 샘플이 .Save 인쇄 할 수있는 페이지 HTML 페이지로는 더 from here
<html>
<head>
<style type="text/css">
h3 {
text-align: center;
}
.output {
height;
8.5in;
width: 11in;
border: 1px solid red;
position: absolute;
top: 0px;
left: 0px;
}
@media print {
.output {
-ms-transform: rotate(270deg);
/* IE 9 */
-webkit-transform: rotate(270deg);
/* Chrome, Safari, Opera */
transform: rotate(270deg);
top: 1.5in;
left: -1in;
}
}
</style>
</head>
<body>
<div class="output">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
Where does it come from?
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.
</div>
</body>
</html>답장을 보내 주셔서 감사합니다. 나는이 경우에 내가 너에게해야 할 일에 대한 완전한 그림을주지 않았다는 사과를한다. 머리글의 "위치"가 "고정"으로 설정되어 이 보고서는 인쇄 된 것으로 보입니다. 필요한 요소와 스타일로 샘플 파일을 만들었습니다. 이 보관 용 계정 링크 - https://www.dropbox.com/s/027765h9am7qh0c/sample.html.zip?dl=0 에서 상자가 중복 표시됩니다. – Steve
죄송합니다. 이전 의견은 올바르게 들어 가지 마라. 나는 여기서 첫 번째 타이머이다. :-) 아래에 다른 설명 추가. – Steve
답장을 보내 주셔서 감사합니다. 내가 필요한 걸 완전히 보여주지 못해 사과해야 겠어. 2x2, 3x3 등의 행렬로 이미지를보고보고 인쇄하는 보고서 용입니다. 필요한 요소와 스타일로 샘플 파일을 만들었습니다. 드롭 박스 링크 - https://www.dropbox.com/s/027765h9am7qh0c/sample.html.zip?dl=0 상단 div에서 클래스를 제거하고 인쇄 미리보기를 사용하여 필요한 결과를 볼 수 있습니다. 헤더는 모든 페이지에 인쇄되도록 "위치"= "고정"입니다. 빨간색 테두리가있는 상자는 이미지가 표시되는 곳입니다. 헤더가있는 내용의 겹침은 padding-top에 의해 처리됩니다. – Steve
것 같다 참조 할 수 있습니다 더이 처럼 시도입니다 이미 답변을 가지고, [이 링크를 확인하십시오] (http://stackoverflow.com/questions/138422/landscape-printing-from-html) –
답변 해 주셔서 감사합니다. 그렇습니다. 코드에는 작동한다고 생각되는 솔루션이 있지만, 항상 저에게는 효과가 없습니다. 브라우저는 명령이 아닌 힌트로 방향을 잡는 것처럼 보입니다. -webkit-transform을 사용하면 -moz-transform도 작동하지 않습니다. 헤더 (여기에있는 첫 번째 div - https://www.dropbox.com/s/027765h9am7qh0c/sample.html.zip?dl=0)는 모든 페이지에서 표시해야하며 회전하면 제대로 표시되지 않습니다. 나는 머리에 머리카락 절반을 뽑았다. – Steve