HTML에서 가로 인쇄
HTML 보고서가 있는데, 열이 많아서 가로로 인쇄해야 합니다.사용자가 문서 설정을 변경할 필요 없이 이 작업을 수행할 수 있는 방법이 있습니까?
그리고 브라우저 중에서 선택할 수 있는 것은 무엇입니까?
CSS에서 아래와 같이 @page 속성을 설정할 수 있습니다.
@media print{@page {size: landscape}}
@page는 CSS 2.1 사양의 일부이지만 이것은size@Page {size:landscape}이(가) 구식입니까?라는 질문에 대한 답변에 의해 강조되지 않았습니다.:
CSS 2.1은 더 이상 크기 특성을 지정하지 않습니다.CSS3 페이징 미디어 모듈에 대한 현재 작업 초안은 이를 지정하지 않습니다(그러나 이것은 표준이 아니거나 허용되지 않습니다).
언급된 대로 크기 옵션은 CSS 3 초안 사양에서 제공됩니다.이론적으로는 페이지 크기와 방향 모두로 설정할 수 있지만 샘플에서는 크기가 생략되어 있습니다.
이 지원은 파이어폭스에서 시작된 버그 보고서와 매우 혼합되어 있으며 대부분의 브라우저는 이를 지원하지 않습니다.
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 size 옵션을 사용하는 것이 상대성 이론을 쉽게 사용할 수 있지만 많은 브라우저에서는 확실한 방법이 없으며 내용과 환경에 따라 다릅니다.이것이 Google 문서가 인쇄를 선택할 때 PDF를 만든 다음 사용자가 해당 PDF를 열고 인쇄할 수 있는 이유일 수 있습니다.
내 솔루션:
<style type="text/css" media="print">
@page {
size: landscape;
}
body {
writing-mode: tb-rl;
}
</style>
- 와 함께
media="print"인쇄에만 적용됩니다. - 이 기능은 다음에서 작동합니다.
IE,Firefox그리고.Chrome
그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 설명서 링크입니다.
페이지 내용을 회전시키는 것만으로는 충분하지 않습니다.여기 대부분의 브라우저(크롬, 파이어폭스, IE9+)에서 작동하는 오른쪽 CSS가 있습니다.
번째 본체 【1】margin대화 더이기 때문입니다.으로 설정합니다. 그렇지 않으면 페이지 여백이 인쇄 대화 상자에서 설정한 여백보다 커지기 때문입니다.또한 설정됨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입니다.크기에서 인쇄 여백을 빼야 합니다.페이지 내용의 크기를 설정합니다.
div.portrait {
width: 190mm;
height: 276mm;
}
div.landscape {
width: 276mm;
height: 190mm;
}
브라우저마다 페이지 크기가 조금씩 다르기 때문에 277mm 대신 276mm를 사용합니다.그래서 그들 중 일부는 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 아래로 이동해야 합니다!
또한 세로 페이지와 가로 페이지가 혼합된 경우 IE가 페이지를 축소합니다.설정하여 수정합니다.-ms-zoom 11.665 지 수 있습니다.1.66666 나면페내용이오의테른두가잘리다수있릴니습쪽이지하이정설런으식로까▁to▁if▁may▁content수있▁of▁page다습▁1니▁border1잘지▁be릴pped▁right▁it▁1▁sometimes▁cro▁to1가리▁you나두테▁like▁something▁this6▁the.
IE8을 할 수 .-webkit-transform,-moz-transform,filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3)그러나 충분히 현대적인 브라우저의 경우에는 필요하지 않습니다.
다음은 테스트 페이지입니다.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
...Copy all styles here...
</style>
</head>
<body>
<div class="portrait">A portrait page</div>
<div class="landscape">A landscape page</div>
</body>
</html>
CSS를 추가해 보십시오.
@page {
size: landscape;
}
CSS-토론 위키에서 인용.
@page 규칙은 CSS2에서 CSS2.1로 범위가 축소되었습니다.보고에 따르면 완전한 CSS2 @page 규칙은 오페라에서만 구현되었습니다.제가 직접 테스트한 결과 IE와 파이어폭스는 @page를 전혀 지원하지 않는 것으로 나타났습니다.현재는 성숙하지 않은 CSS2 사양 섹션 13.2.2에 따르면 사용자의 방향 설정 및 (예를 들어) 가로 방향 인쇄를 재정의할 수 있지만 관련 "크기" 속성은 현재 브라우저가 지원하지 않는다는 사실과 일치하여 CSS2.1에서 삭제되었습니다.CSS3 페이징 미디어 모듈에서 복구되었지만 이는 작업 초안일 뿐입니다(2009년 7월 기준).
결론: 현재로서는 @page는 잊어버리세요.문서를 가로 방향으로 인쇄해야 한다고 생각하는 경우, 설계를 보다 유연하게 할 수 있는지 자문해 보십시오.문서에 열이 많은 데이터 테이블이 포함되어 있는 경우(예: 문서에 열이 많은 데이터 테이블이 포함되어 있기 때문), 사용자에게 방향을 가로로 설정하고 가장 일반적인 브라우저에서 수행하는 방법을 개략적으로 설명해야 합니다.물론 일부 브라우저에는 너비에 맞게 인쇄(축소) 기능(예: Opera, Firefox, IE7)이 있지만 이 기능이 있거나 켜져 있는 사용자에게 의존하는 것은 바람직하지 않습니다.
CSS 2 @page 규칙을 사용하여 '크기' 속성을 가로로 설정할 수 있습니다.
비표준 IE 전용 CSS 속성 쓰기 모드도 사용할 수 있습니다.
div.page {
writing-mode: tb-rl;
}
저는 Denis의 답변을 시도했고 몇 가지 문제(가로 페이지를 검색한 후 초상화 페이지가 제대로 인쇄되지 않음)를 발견했습니다. 그래서 제 해결책은 다음과 같습니다.
body {
margin: 0;
background: #CCCCCC;
}
div.page {
margin: 10px auto;
border: solid 1px black;
display: block;
page-break-after: always;
width: 209mm;
height: 296mm;
overflow: hidden;
background: white;
}
div.landscape-parent {
width: 296mm;
height: 209mm;
}
div.landscape {
width: 296mm;
height: 209mm;
}
div.content {
padding: 10mm;
}
body,
div,
td {
font-size: 13px;
font-family: Verdana;
}
@media print {
body {
background: none;
}
div.page {
width: 209mm;
height: 296mm;
}
div.landscape {
transform: rotate(270deg) translate(-296mm, 0);
transform-origin: 0 0;
}
div.portrait,
div.landscape,
div.page {
margin: 0;
padding: 0;
border: none;
background: none;
}
}<div class="page">
<div class="content">
First page in Portrait mode
</div>
</div>
<div class="page landscape-parent">
<div class="landscape">
<div class="content">
Second page in Landscape mode (correctly shows horizontally in browser and prints rotated in printer)
</div>
</div>
</div>
<div class="page">
<div class="content">
Third page in Portrait mode
</div>
</div>저는 빈 MS Document with Landscape 설정을 만든 다음 메모장에서 열었습니다.다음을 복사하여 내 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) { … }
여기 제가 생각해 낸 것이 있습니다 - 음의 회전을 추가합니다.<html>요소 및 동일한 abs 값의 양의 회전.<body>그 덕분에 바디 스타일링을 위해 CSS를 많이 추가해야 하는 비용을 절감할 수 있었고, 매력적으로 작동했습니다.
html {
transform: rotate(-90deg);
}
body {
transform: rotate(90deg);
}
저는 이 문제를 해결하려고 한 번 시도했지만, 모든 연구를 통해 ActiveX 컨트롤/플러그인으로 넘어갔습니다.브라우저가 인쇄 설정(복사본 수, 용지 크기)을 변경할 수 있도록 허용한 것은 아닙니다.
저는 브라우저 인쇄 대화상자가 나타나면 사용자에게 "경관"을 선택해야 한다는 것을 주의 깊게 경고하기 위해 노력했습니다.저는 또한 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 태그를 닫습니다.
이 표는 가로로만 인쇄되고 다른 모든 페이지는 세로 모드로만 인쇄됩니다.그러나 문제는 테이블 크기가 페이지 너비보다 클 경우 일부 행이 느슨해지고 때로는 헤더도 누락될 수 있다는 것입니다.조심하세요.
좋은 하루 되세요.
고마워, 나빈 메타팔리
-webkit-transform: rotate(-90deg); -moz-transform:rotate(-90deg);
filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
Firefox 16.0.2에서는 작동하지 않지만 Chrome에서는 작동합니다.
내가 직면한 문제는 아마도 당신이 가지고 있는 것과 같을 것입니다.여기 있는 모든 사람들이 CSS를 사용하여 정적으로 제공하고 있지만, 저는 페이지를 다시 로드하지 않고 활성 요소에 따라 변경될 수 있도록 동적 솔루션을 찾아야 했습니다.
portrait.css와 landscape.css 두 개의 파일을 만들었습니다.
portrait.portra.portra는 공백이지만 landscape.portra에는 한 줄이 있습니다.
@media print{@page {size: landscape}}
기본 파일에서 portrait.css를 기본값으로 지정하기 위해 이 html 행을 추가했습니다.
<link rel="stylesheet" id="PRINTLAYOUT" href="portrait.css" type="text/css" /></link>
이제 전환하려면 요소의 href만 변경하여 인쇄 모드를 전환하면 됩니다.
$("#PRINTLAYOUT").attr("href","landscape.css")
// OR
document.getElementById("PRINTLAYOUT").href = "landscape.css" // I think...
이것은 저에게 아주 잘 먹혔고, 저처럼 힘든 일을 하는 다른 사람에게 도움이 되기를 바랍니다.참고로 $는 JQuery를 나타냅니다.아직 사용하지 않으셨다면 지금부터 시작하시는 것이 좋습니다.
만약 당신이 리액트와 MUI와 같은 라이브러리를 사용하고 있다면, 리액트 앱에서 일반 CSS를 사용하는 것은 좋은 관행이 아닙니다.더 나은 접근 방식은 다음과 같은 스타일 구성 요소를 사용하는 것입니다.GlobalStyles재료 UI에서 가져올 수 있습니다.될 입니다, 코드는다표시니다됩같이.
import { GlobalStyles } from '@mui/material';
const printStyle = {
['@media print']: {
['@page']: {
size: 'landscape',
margin: '2px',
},
},
};
사용할 필요가 없을 수도 있습니다.@page에의 에.@media print@page인쇄 전용입니다.문서화
여백은 인쇄하는 동안 브라우저가 생성하는 URL을 제거합니다.
우리는 사용할 수 있습니다.GlobalStyles앱 컨테이너에 있습니다. 식으로.
const App: React.FC = () => (
<>
<GlobalStyles styles={printStyle} />
<AppView />
</>
);
가 우가전를때위의 CSS용적것입을 부를 입니다.windows.print()MUI 외에 다른 라이브러리를 사용하는 경우 CSS를 전체적으로 적용하는 데 사용할 수 있는 일부 구성 요소 또는 플러그인이 있어야 합니다.
다음을 시도할 수 있습니다.
@page {
size: auto
}
언급URL : https://stackoverflow.com/questions/138422/landscape-printing-from-html
'programing' 카테고리의 다른 글
| 도커 + Laravel + Mariaadb를 다음을 방지하도록 구성하는 문제:SQLSTATE[HY000] [2002] 잘못된 인수 (0) | 2023.09.07 |
|---|---|
| Oracle User가 없는 경우 생성 (0) | 2023.09.07 |
| CrudRepository를 유형으로 확인할 수 없습니다. (0) | 2023.09.02 |
| 도커 컨테이너가 로컬/호스트 postgres 데이터베이스에 연결할 수 있도록 허용 (0) | 2023.09.02 |
| PowerShell "string not contains" cmdlet 또는 구문이 있습니까? (0) | 2023.09.02 |