HTML에서 가로 방향으로 인쇄
https://stackoverflow.com/questions/138422
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
열이 많기 때문에 가로 방향으로 인쇄해야 하는 HTML 보고서가 있습니다.사용자가 문서 설정을 변경하지 않고도 이를 수행할 수 있는 방법이 있습니까?
그리고 브라우저 간의 옵션은 무엇입니까?
해결책
CSS에서 아래와 같이 @PAGE 속성을 설정할 수 있습니다.
@media print{@page {size: landscape}}
@page가 일부입니다 CSS 2.1 사양 그러나 이것은 size 질문에 대한 답에 의해 강조되지 않습니다. @page {size : landscape}가 더 이상 사용되지 않습니까?:
CSS 2.1은 더 이상 크기 속성을 지정하지 않습니다. CSS3 PAGED 미디어 모듈에 대한 현재 작업 초안은이를 지정합니다 (그러나 이것은 표준이거나 허용되지 않습니다).
언급 한 바와 같이 크기 옵션은에서 나옵니다 CSS 3 초안 사양. 이론적으로는 내 샘플에서 크기가 생략되지만 페이지 크기와 방향으로 설정할 수 있습니다.
지원은 a와 매우 혼합되어 있습니다 버그 보고서는 Firefox에 제출되었습니다, 대부분의 브라우저는이를 지원하지 않습니다.
IE7에서 작동하는 것처럼 보이지만 IE7은 인쇄 미리보기에서 조경이나 초상화를 마지막으로 선택한 사용자를 기억하기 때문입니다 (브라우저 만 다시 시작).
이 기사 이상적이지 않고 브라우저 보안 설정을 변경하는 데 의존하지만 사용자 브라우저에 키를 보내는 JavaScript 또는 ActiveX를 사용하여 제안 된 작업이 있습니다.
또는 페이지 방향이 아닌 콘텐츠를 회전시킬 수 있습니다. 이것은 스타일을 만들고이 두 줄을 포함하는 본문에 적용하여 수행 할 수 있지만 많은 정렬 및 레이아웃 문제를 생성하는 후면도 도출됩니다.
<style type="text/css" media="print">
.page
{
-webkit-transform: rotate(-90deg);
-moz-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
</style>
내가 찾은 최종 대안은 PDF에서 조경 버전을 만드는 것입니다. 사용자가 인쇄를 선택하면 PDF를 인쇄 할 수 있습니다. 그러나 나는 이것을 IE7에서 자동 인쇄 작업으로 얻을 수 없었습니다.
<link media="print" rel="Alternate" href="print.pdf">
결론적으로 일부 브라우저에서는 @Page 크기 옵션을 사용하는 것이 쉽지 않지만 많은 브라우저에는 확실한 방법이 없으며 콘텐츠와 환경에 따라 다릅니다. 그렇기 때문에 Google 문서가 인쇄를 선택할 때 PDF를 생성 한 다음 사용자가 열고 인쇄 할 수 있습니다.
다른 팁
내 해결책 :
<style type="text/css" media="print">
@page {
size: landscape;
}
body {
writing-mode: tb-rl;
}
</style>
이것은 작동합니다 IE, Firefox 그리고 Chrome
@PAGE 규칙은 CSS2에서 CSS2.1까지의 범위가 줄어 듭니다. 전체 CSS2 @PAGE 규칙은 오페라에서만 구현 된 것으로 알려져 있습니다 (그리고 그때까지도 마찬가지로). 내 자신의 테스트는 IE와 Firefox가 @page를 전혀 지원하지 않는다는 것을 보여줍니다. 현재 관찰 된 CSS2 사양 섹션 13.2.2에 따르면 사용자의 방향 설정 및 (예 :) 조경의 힘 인쇄를 무시할 수 있지만 관련 "크기"속성은 CSS2.1에서 삭제되었습니다. 현재 브라우저가 지원하지 않습니다. CSS3 PAGED 미디어 모듈에서 복원되었지만 이것은 2009 년 7 월과 같이 작업 초안 일뿐입니다.
결론 : 현재의 @page를 잊어 버리십시오. 조경 방향으로 문서를 인쇄해야한다고 생각되면 디자인을 더 유동적으로 만들 수 있는지 스스로에게 문의하십시오. 실제로는 할 수없는 경우 (아마도 문서에 많은 열이있는 데이터 테이블이 포함되어 있기 때문에) 방향을 조경으로 설정하고 가장 일반적인 브라우저에서 수행하는 방법을 개괄 할 수 있도록 사용자에게 조언해야합니다. 물론 일부 브라우저에는 프린트에 맞는 전형 (수축) 기능 (예 : Opera, Firefox, IE7)이 있지만이 시설을 보유하거나 전환 한 사용자에게 의존하는 것은 무시할 수 없습니다.
CSS를 추가하십시오.
@page {
size: landscape;
}
당신은 그것을 사용할 수 있습니다 CSS 2 @PAGE 규칙 이를 설정할 수 있습니다 조경에 '크기'속성.
그만큼 size 재산은 언급 한 바와 같이 당신이 뒤 따르는 것입니다. 인쇄시 페이지의 방향과 크기를 모두 설정하려면 다음을 사용할 수 있습니다.
/* ISO Paper Size */
@page {
size: A4 landscape;
}
/* Size in mm */
@page {
size: 100mm 200mm landscape;
}
/* Size in inches */
@page {
size: 4in 6in landscape;
}
여기에 대한 링크가 있습니다 @PAGE 문서.
페이지 컨텐츠를 회전시키는 것만으로는 충분하지 않습니다. 다음은 대부분의 브라우저 (Chrome, Firefox, IE9+)에서 작동하는 올바른 CS입니다.
첫 번째 몸체 margin 그렇지 않으면 페이지 마진이 인쇄 대화 상자에서 설정 한 것보다 더 크기 때문에 0에서 0까지. 또한 설정 background 페이지를 시각화하려면 색상.
body {
margin: 0;
background: #CCCCCC;
}
margin, border 그리고 background 페이지를 시각화해야합니다.
padding 필요한 인쇄 여백으로 설정해야합니다. 인쇄 대화 상자에서 동일한 마진을 설정해야합니다 (이 예에서 10mm).
div.portrait, div.landscape {
margin: 10px auto;
padding: 10mm;
border: solid 1px black;
overflow: hidden;
page-break-after: always;
background: white;
}
A4 페이지의 크기는 210mm x 297mm입니다. 크기에서 인쇄 여백을 빼야합니다. Page의 컨텐츠 크기를 설정하십시오.
div.portrait {
width: 190mm;
height: 276mm;
}
div.landscape {
width: 276mm;
height: 190mm;
}
다른 브라우저가 페이지를 조금 다르게 스케일링하기 때문에 277mm 대신 276mm를 사용합니다. 따라서 일부는 2 페이지에 277mm 높이의 콘텐츠를 인쇄합니다. 두 번째 페이지는 비어 있습니다. 276mm를 사용하는 것이 더 안전합니다.
우리는 필요하지 않습니다 margin, border, padding, background 인쇄 된 페이지에서 제거하십시오.
@media print {
body {
background: none;
-ms-zoom: 1.665;
}
div.portrait, div.landscape {
margin: 0;
padding: 0;
border: none;
background: none;
}
div.landscape {
transform: rotate(270deg) translate(-276mm, 0);
transform-origin: 0 0;
}
}
변환의 기원은 다음과 같습니다 0 0! 또한 조경 페이지의 내용은 276mm 아래로 이동해야합니다!
또한 초상화와 Lanscape 페이지가 혼합되어 있으면 페이지가 축소됩니다. 설정하여 고정합니다 -ms-zoom 1.665까지. 1.6666 또는 이와 같은 것으로 설정하면 페이지 컨텐츠의 오른쪽 테두리가 때때로자를 수 있습니다.
IE8 또는 기타 기존 브라우저 지원이 필요한 경우 사용할 수 있습니다. -webkit-transform, -moz-transform, filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3). 그러나 현대식 브라우저의 경우 필요하지 않습니다.
비표준 IE 전용 CSS 속성을 사용할 수도 있습니다 글쓰기 모드
div.page {
writing-mode: tb-rl;
}
-webkit-transform: rotate(-90deg); -moz-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
Firefox에서 작동하지 않지만 16.0.2는 크롬에서 작동합니다.
나는 이 문제를 한 번 해결하려고 시도했지만 모든 연구를 통해 ActiveX 컨트롤/플러그인을 선택하게 되었습니다.브라우저(어쨌든 3년 전)가 인쇄 설정(부수, 용지 크기) 변경을 허용한 트릭은 없습니다.
나는 브라우저 인쇄 대화 상자가 나타날 때 "가로 모드"를 선택해야 한다는 점을 사용자에게 주의 깊게 경고하기 위해 노력했습니다.나는 또한 IE6보다 훨씬 더 잘 작동하는 "인쇄 미리보기" 페이지를 만들었습니다!우리 응용 프로그램에는 일부 보고서에 매우 넓은 데이터 테이블이 있었고 인쇄 미리 보기를 통해 테이블이 용지의 오른쪽 가장자리에서 흘러 나올 때 사용자에게 명확하게 표시되었습니다(IE6도 2장 인쇄에 대처할 수 없었기 때문).
그리고 그렇습니다. 사람들은 지금도 여전히 IE6을 사용하고 있습니다.
<style type="text/css" media="print">
.landscape {
width: 100%;
height: 100%;
margin: 0% 0% 0% 0%; filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=1);
}
</style>
이 스타일을 테이블에 적용하려면이 스타일 클래스로 하나의 div 태그를 만들고이 div 태그 내에 테이블 태그를 추가하고 끝에 div 태그를 닫으십시오.
이 테이블은 조경에서만 인쇄되며 다른 모든 페이지는 초상화 모드로만 인쇄됩니다. 그러나 문제는 테이블 크기가 페이지 너비보다 더 많은 경우 행의 일부를 풀고 때로는 헤더도 놓칠 수 있습니다. 조심하세요.
좋은 하루 보내세요.
감사합니다, Naveen Metaply.
조경 설정으로 빈 MS 문서를 만들고 메모장으로 열었습니다. 내 HTML 페이지에 다음을 복사하고 붙여 넣었습니다
<style type="text/css" media="print">
@page Section1
{size:11 8.5in;
margin:.5in 13.6pt 0in 13.6pt;
mso-header-margin:.5in;
mso-footer-margin:.5in;
mso-paper-source:4;}
div.Section1
{page:Section1;}
</style>
<div class="Section1"> put text / images / other stuff </div>
인쇄 미리보기는 페이지를 조경 크기로 표시합니다. 이것은 FF에서 테스트되지 않은 IE와 Chrome에서 잘 작동하는 것 같습니다.
이것은 나에게도 효과가있었습니다.
@media print and (orientation:landscape) { … }
