A4 용지 크기 페이지에서 HTML 페이지를 만드는 방법은 무엇입니까?

388

HTML 페이지를 예를 들어 MS Word의 A4 크기 페이지처럼 동작하도록 만들 수 있습니까?

본질적으로 브라우저에 HTML 페이지를 표시하고 A4 크기 페이지의 크기로 내용을 간략하게 설명하고 싶습니다.

간단하게하기 위해 HTML 페이지에는 텍스트 만 있고 이미지는 포함되지 않으며 <br>예를 들어 태그는 없다고 가정 합니다.

또한 HTML 페이지가 인쇄되면 A4 크기 용지 페이지로 나옵니다.

html  css  printing 
— 자바
소스
12
당신은 할 수 있습니다 github.com/delight-im/HTML-Sheets-of-Paper
— 까악 까악
— Mark Boulder
1
진짜 "HTML 인쇄는" comig입니다! stackoverflow.com/q/10641667/287948 및 W3C의 CSS 레벨 3 조각화 모듈 에서 모든 기록을 확인하십시오 .
— Peter Krauss
그 의도는 무엇입니까? 웹 기술을 위해 MS Office를 떠나고 있습니까? 적어도 내가 시도하고 있지만 여전히 입력 방법이 필요 합니다 . 이 질문에 의해 시작된 이야기를 끝내는 대답.
— Stefan

답변:

318

오래 전인 2005 년 11 월 AlistApart.com은 HTML과 CSS만을 사용하여 책을 출판하는 방법에 대한 기사를 발표했습니다. 참조 : http://alistapart.com/article/boom

다음은 그 기사의 일부입니다.

CSS2에는 연속 미디어 (생각 스크롤바)와 달리 페이징 된 미디어 (용지 생각)라는 개념이 있습니다. 스타일 시트는 페이지 크기와 여백을 설정할 수 있습니다. 페이지 템플릿에 이름을 지정할 수 있으며 요소는 인쇄 할 이름이 지정된 페이지를 나타낼 수 있습니다. 또한 소스 문서의 요소는 페이지를 강제로 중단 할 수 있습니다. 우리가 사용한 스타일 시트의 스 니펫은 다음과 같습니다.

@page {
   size: 7in 9.25in;
   margin: 27mm 16mm 27mm 16mm;
}

미국에 기반을 둔 출판사가 있었기 때문에 페이지 크기가 인치로 표시되었습니다. 유럽인 인 우리는 미터법 측정을 계속했습니다. CSS는 둘 다 받아들입니다.

페이지 크기와 여백을 설정 한 후 올바른 위치에 페이지 나누기가 있는지 확인해야했습니다. 다음 발췌 부분은 장과 부록 후에 페이지 나누기가 생성되는 방법을 보여줍니다.

div.chapter, div.appendix {
    page-break-after: always;
}

또한 CSS2를 사용하여 명명 된 페이지를 선언했습니다.

div.titlepage {
  page: blank;
}

즉, 제목 페이지는 이름이 "공백"인 페이지에 인쇄됩니다. CSS2는 명명 된 페이지의 개념을 설명했지만 그 값은 머리글과 바닥 글을 사용할 수있을 때만 나타납니다.

어쨌든…

A4를 인쇄하고 싶기 때문에 다른 치수가 필요합니다.

@page {
    size: 21cm 29.7cm;
    margin: 30mm 45mm 30mm 45mm;
     /* change the margins as you want them to be. */
}

이 기사는 페이지 나누기 설정 등과 같은 내용으로 나뉘므로 완전히 읽으십시오.

귀하의 경우 트릭은 인쇄 CSS를 먼저 만드는 것입니다. 대부분의 최신 브라우저 (> 2005)는 확대 / 축소를 지원하며 인쇄 CSS를 기반으로 웹 사이트를 이미 표시 할 수 있습니다.

이제 웹 디스플레이를 약간 다르게 보이게하고 전체 디자인을 대부분의 브라우저 (2005 년 이전의 브라우저 포함)에도 맞게 조정하려고합니다. 이를 위해서는 웹 CSS 파일을 작성하거나 인쇄 CSS의 일부를 대체해야합니다. 웹 디스플레이 용 CSS를 만들 때 브라우저는 크기를 가질 수 있다는 것을 기억하십시오 ( "모바일"에서 "대형 TV"까지). 의미 : 웹 CSS의 경우 페이지 너비와 이미지 너비는 가능한 한 많은 디스플레이 장치와 웹 브라우저 클라이언트를 지원하기 위해 가변 너비 (%)를 사용하여 설정하는 것이 가장 좋습니다.

편집 (26-02-2015)

오늘 저는 SmashingMagazine의 또 다른 최신 기사 를 우연히 발견했습니다.이 기사는 HTML과 CSS로 인쇄용으로 디자인하는 것으로도 설명 할 수 있습니다.

편집 (2018 년 10 월 10 일)

size실제로 올바른 CSS3이 아니라는 점에 주목했습니다. 실제로 언급 한 바와 같이 기사에서 인용 한 코드를 반복했을 때 CSS2가 좋았습니다. 이 답변은 처음 게시되었습니다). 어쨌든 복사 및 붙여 넣기 편의를위한 유효한 CSS3 코드는 다음과 같습니다.

@media print {
    body{
        width: 21cm;
        height: 29.7cm;
        margin: 30mm 45mm 30mm 45mm; 
        /* change the margins as you want them to be. */
   } 
}

실제로 픽셀이 필요하다고 생각하는 경우 (실제로는 픽셀 사용을 피해야 함 ) 인쇄 할 올바른 DPI를 선택해야합니다.

  • 72dpi (웹) = 595 X 842 픽셀
  • 300dpi (인쇄) = 2480 X 3508 픽셀
  • 600dpi (고품질 인쇄) = 4960 X 7016 픽셀

그러나 번거 로움 을 피하고 사용하는 클라이언트에 따라 발생할 수있는 렌더링 결함을 피하기 때문에 크기 조정에 단순히 cm(센티미터) 또는 mm(밀리미터)를 사용합니다.

— 전자 초밥
소스
1
현재 표준에 맞게이 답변을 업데이트 해 주셔서 감사합니다!
— jumps4fun
알았지 만 얼마나 많은 px
— A.com
@ A.com DPI에 의존하는 px는 없습니다 ... CSS는 cmet al. 링크 된 기사 및 / 또는 적어도 내 답변을 읽는 것이 좋습니다. 그렇게하면 질문이 실제로 의미가 없다는 것을 빨리 알 수 있습니다. 또한 문제가 여전히 명확하지 않으면 질문을 새 질문으로 게시 할 수 있습니다. 이것은 포럼이 아닌 Q & A 사이트입니다. \ o /
— 전자 초밥
67

웹 브라우저가 A4와 동일한 픽셀 크기로 페이지를 표시하도록하는 것은 매우 쉽습니다. 그러나 사물이 렌더링 될 때 몇 가지 단점이있을 수 있습니다.

모니터가 72dpi를 표시한다고 가정하면 다음과 같이 추가 할 수 있습니다.

<!DOCTYPE html>
<html>
  <head>
    <style>
    body {
        height: 842px;
        width: 595px;
        /* to centre page on screen*/
        margin-left: auto;
        margin-right: auto;
    }
    </style>
  </head>
  <body>
  </body>
</html>
— 팀 맥나마라
소스
19
밀리미터를 사용하는 Will Dean의 제안 (많은 의미가 있음)에 따라 브라우저가 픽셀 너비 / 높이를 계산하도록 할 수 있습니다. body {height : 420mm; 폭 : 297mm; ...}
— 팀 맥나마라
49
A4는 실제로 210x297mm입니다.
— fouronnes
8
마지막으로 초상화 DINA4 :body { height:297mm; width:210mm; margin-left:auto; margin-right:auto; }
— daVe
1
210x297 크기는 좋지만 A4 페이지에 절대적으로 적합 하지는 않습니다 . 좋은 테스트는 Chrome에서 직접 PDF를 인쇄하고 미리보기 페이지를 스크롤하는 것입니다. 여백을 설정하지 않더라도 오버플로를 피하려면 전체 높이를 줄여야합니다.-> 모든 짝수 페이지를 비 웁니다.
— cbmtrx
3-4 페이지 이상의 동적 콘텐츠가있는 경우 어떻게합니까?
— jazzbpn
36

A4 크기는 210x297mm

따라서 CSS를 사용하여 HTML 페이지를 해당 크기에 맞게 설정할 수 있습니다.

html,body{
    height:297mm;
    width:210mm;
}
— zurfyx
소스
3-4 페이지 이상의 동적 콘텐츠가있는 경우 어떻게합니까?
— jazzbpn
24

각 페이지로 섹션을 만들고 아래 코드를 사용하여 여백, 높이 및 너비를 조정하십시오.

A4 크기를 인쇄하는 경우

그런 다음 사용자

Size : 8.27in and 11.69 inches

@page Section1 {
    size: 8.27in 11.69in; 
    margin: .5in .5in .5in .5in; 
    mso-header-margin: .5in; 
    mso-footer-margin: .5in; 
    mso-paper-source: 0;
}

div.Section1 {
    page: Section1;
}

그런 다음 모든 콘텐츠가 포함 된 div를 만듭니다.

<div class="Section1"> 
    type your content here... 
</div>

또는

@media print {
    .page-break { 
        height: 0; 
        page-break-before: always; 
        margin: 0; 
        border-top: none; 
    }
}

body, p, a,
span, td { 
    font-size: 9pt;
    font-family: Arial, Helvetica, sans-serif;
}

body {
    margin-left: 2em; 
    margin-right: 2em;
}

.page {
    height: 947px;
    padding-top: 5px;
    page-break-after: always;   
    font-family: Arial, Helvetica, sans-serif;
    position: relative;
    border-bottom: 1px solid #000;
}
— 피르 압둘
소스
제대로 작동하고 있습니까? 최신 Firefox 및 Chrome에서이를 재현 할 수 없습니다.
— Dan7
예, 주로 크롬 개발을하고 있습니다 ... 나와 잘 작동합니다.
— Pir Abdul
3
@page Section1Chrome 41.0.2272.77을 사용할 수 없습니다 . 당신은 정말 확실히 당신의 대답은 작동하는지? 예를 들어 data:text/html,<style>@page x{size:100pt 200pt}</style><div style="page:x">x</div>인쇄 미리보기 를 방문 하여 열어 보십시오 . 와 사이에는 차이가 없습니다 data:text/html,x. 내가 교체 할 때 @page x에 @page, 그것은 작동하지만, 그 페이지 별 선택이 아니다.
— Rob W
글을 쓰는 시점에 CSS를 문서에 넣지 않은 사람들을 위해이 코드를 <style> </ style> 태그에 넣고 div를 호출합니다 (예 : <div class = page> Stuff </ div > <div class = page> 더 많은 것들 </ div>) 여기서 "Stuff"와 "더 많은 것들"은 단일 페이지에 포함될 내용입니다.
— mkingsbu
16

HTML을 사용하여 실제 용지에 실제 크기로 올바르게 인쇄되는 보고서를 생성했습니다.

CSS 파일에서 mm을 단위로 신중하게 사용한다면 적어도 한 페이지에 대해서는 괜찮을 것입니다. 그러나 사람들은 브라우저에서 인쇄 줌을 변경하여 문제를 해결할 수 있습니다.

나는 내가하고있는 모든 것이 단일 페이지라는 것을 기억하는 것처럼 보이므로 페이지 매김에 대해 걱정할 필요가 없었습니다.

— 윌 딘
소스
14

Google에서 검색 한 후이 솔루션을 보았고 "A4 CSS 페이지 템플릿"(codepen.io)을 검색하십시오. <page> 태그를 사용하여 브라우저에서 A4 (A3, A5, 세로) 크기 영역을 표시합니다. 이 태그 안에 내용이 표시되지만 여전히 브라우저 영역과 관련하여 절대 위치입니다.

body {
  background: rgb(204,204,204); 
}
page {
  background: white;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
page[size="A4"] {  
  width: 21cm;
  height: 29.7cm; 
}
page[size="A4"][layout="portrait"] {
  width: 29.7cm;
  height: 21cm;  
}
@media print {
  body, page {
    margin: 0;
    box-shadow: 0;
  }
}
<page size="A4">A4</page>
<page size="A4" layout="portrait">A4 portrait</page>
스 니펫 확장

이것은 다른 CSS / JS- 라이브러리를 포함하지 않고 저에게 효과적입니다. 현재 브라우저 (IE, FF, Chrome)에서 작동합니다.

— 카스 크 누크
소스
FF 53.0.3과 함께이 예제를 사용하고 두 개의 가로 페이지를 나란히 놓으면 작동하지 않습니다. 일반보기에서는 잘 보이지만 인쇄 미리보기를 선택하면 3 페이지로 확장됩니다.
— lofihelsinki
오래된 소를 참호 밖으로 끌어 내려하지는 않지만 박스 그림자는 box-shadow: none;0이 아니 어야합니다.
— NoobishPro
그것은 나를 위해 작동하고 높이를 변경해야합니다
— Jomal Johny
3-4 페이지 이상의 동적 콘텐츠가있는 경우 어떻게합니까?
— 재즈 핀
11 
<link rel="stylesheet" href="/css/style.css" type="text/css">
<link rel="stylesheet" href="/css/print.css" type="text/css" media="print">

당신의 정상적인 style.css:

table.tableclassname {
  width: 400px;
}

당신의 print.css:

table.tableclassname {
  width: 16 cm;
}
— 야곱
소스
10

PPI와 DPI는 문서가 브라우저에서 인쇄되는 방식과 전혀 차이가 없습니다. 프린터는 화면 도트 피치 또는 이미지의 DPI 등에 대한 정보를 얻지 않습니다. 이미지를 인쇄하는 경우 이미지가 화면에 표시되는 방식과 비슷한 크기로 인쇄됩니다. 브라우저의 인쇄 프로세서는 이미지의 DPI를 72dpi와 같은 낮은 것에서 나머지 문서의 DPI로 증가시킵니다. 이미지가 페이지 너비의 절반으로 표시되고 물리적으로 약 4 "너비로 표시됩니다. 이미지의 픽셀 너비는 브라우저에서 올바르게 표시하기 위해 약 300px입니다. 공칭 300DPI로 인쇄 할 때 프로세서는 픽셀을 추가했습니다. 이미지는 약 1200px로 커지고 300 DPI에서 4 "입니다.

텍스트와 같은 벡터 또는 비 픽셀 기반 요소의 경우 프린터는 화면 도트 피치 또는 브라우저 너비 등과 관련이없는 드라이버에서 자체 DPI를 선택합니다. 브라우저 너비가 3000px 인 경우 인쇄 프로세서는 텍스트를 적절하게 줄 바꿈합니다.

여기에서 인쇄 디스플레이를 만드는 것이 어려운 이유 : 각 브라우저와 프린터는 텍스트 크기 (pt, em, px)와 간격을 고유 한 방식으로 해석합니다. 사용하는 프린터, 브라우저 및 운영 체제에 따라 페이지마다 다른 줄과 문자가 표시됩니다. 따라서 브라우저와 프린터를 사용하여 컴퓨터에서 테스트하고 640x900px의 상자에 텍스트를 표시하고 인쇄물에 완벽하게 표시 할 수 있다고 생각하더라도 인쇄하려는 다음 사람은 다르게 인쇄 할 수 있습니다. 실제로 각 프린터와 브라우저가 매번 동일하게 만들 수있는 방법은 없습니다.

픽셀을 잊어 버리고 DPI를 잊어 버리십시오. 픽셀을 사용할 수있는 유일한 것은 프린터에서 인쇄 가능한 영역의 너비를 시뮬레이션하는 테이블 너비를 설정하는 것입니다. 이 경우 너비 640px가 가깝습니다.

— 퀸틴 험프리
소스
많은 페이지를 읽으면 인쇄 할 때 DPI를 늘리면 크기가 작아 질 것입니다 (3000px / 300dpi = 10 인치). 그러나 크롬 브라우저에서 인쇄 할 때 600 DPI와 1200 DPI는 용지에서 정확히 같은 크기로 이어집니다. 내가 이것을 읽을 때까지 정말로 혼란 스러웠다!
— Wang Sheng
8

나는이 주제가 상당히 오래되었다는 것을 알고 있지만 그 주제에 대한 나의 경험을 나누고 싶다. 실제로, 나는 매일 보고서에 도움이 될 수있는 모듈을 찾고있었습니다. HTML, CSS (Word, Latex, OO 등) 대신 일부 문서와 일부 보고서를 작성하고 있습니다. objectif는 친구들과 공유하기 위해 A4 용지에 인쇄하는 것입니다 ... 검색하는 대신 "페이지", 페이지 번호, 요약, 헤더를 처리 할 수있는 간단한 lib를 구현하는 작은 재미있는 코딩 세션을 갖기로 결정했습니다. , footer, .... 마지막으로 ~~ 2 시간 안에 해봤는데 그것이 최고의 도구는 아니지만 내 목적에 거의 맞다는 것을 알고 있습니다. 내 레포 에서이 프로젝트를 살펴보고 주저하지 말고 아이디어를 공유하십시오. 100 %에서 검색하는 것이 아닐 수도 있지만이 모듈이 도움이 될 수 있다고 생각합니다.

기본적으로 나는 본문의 "폭 : 200mm;" 및 높이의 용기 : 290mm (A4보다 작음). 그런 다음 page-break-after를 사용했습니다. always; 브라우저의 "인쇄"옵션은 페이지 분할시기를 알려줍니다.

리포지토리 : https://github.com/kursion/jsprint

— 이브 랑게
소스
6

기술적으로는 가능하지만 모든 브라우저가 페이지에 표시된 그대로 페이지를 인쇄하려면 많은 작업이 필요합니다. 또한 대부분의 브라우저는 인쇄물에 URL, 인쇄 날짜 및 페이지 번호 매기기를 적용합니다. 항상 바람직하지는 않습니다. 변경하거나 비활성화 할 수 없습니다.

대신 화면의 내용을 기반으로 PDF를 작성하고 다운로드 및 / 또는 인쇄를 위해 PDF를 제공하는 것이 좋습니다. 하지만 대부분의 가능한 PDF 라이브러리가 지급됩니다, 몇 가지가 무료 대안 기본적인 PDF 파일을 만드는 데 사용할 수는.

— 프루츠 원더
소스
5

1998 년 이후 상용 보고서에서 680px 를 사용 하여 A4 페이지에 인쇄했습니다. 700px는 여백의 크기에 따라 올바르게 맞지 않을 수 있습니다. 최신 브라우저는 프린터에서 페이지에 맞게 페이지를 축소 할 수 있지만 680 픽셀을 사용하면 거의 모든 브라우저에서 올바르게 인쇄됩니다.

그것은 당신에게 HTML입니다 코드 스 니펫 을 실행 하고 결과를보십시오 :

window.print();
<table width=680 border=1 cellpadding=20 cellspacing=0>
<tr><th>#</th><th>name</th></tr>
<tr align=center><td>1</td><td>DONALD TRUMP</td></tr>
<tr align=center><td>2</td><td>BARACK OBAMA</td></tr>
</table>
스 니펫 확장

JSFiddle :

https://jsfiddle.net/ajofmm7r/

— lynx_74
소스
전체 페이지의 픽셀 높이는 얼마입니까?
— khaverim
4

여러 가지 방법 :

html,body{
    height:297mm;
    width:210mm;
}


html,body{
    height:29.7cm;
    width:21cm;
}

html,body{
    height: 842px;
    width: 595px;
}
— 날란 마데 스와 란
소스
3

a4 페이지의 비율을 가정하도록 레이아웃을 완전히 설정할 수 있습니다. 당신은 그에 따라 설정 폭과 높이에있는 것 (아마도 확인 window.innerHeight하고 window.innerWidth내가하지 않도록 즉 신뢰할 수있는 경우 해요 있지만).

까다로운 부분은 A4 인쇄에 있습니다. 예를 들어 Javascript는 window.print메소드를 사용하여 기본적으로 페이지 인쇄 만 지원합니다 . @Prutswonder가 제안한 것처럼 웹 페이지에서 PDF 를 작성하는 것이 가장 정교한 방법 일 것입니다 (처음에 PDF 문서를 제공하는 것 제외). 그러나 이것은 생각만큼 사소한 것이 아닙니다. 다음은 HTML에서 PDF 만들 수있는 모든 오픈 소스 자바 클래스의 설명이있는 링크입니다 http://www.javaworld.com/javaworld/jw-04-2006/jw-0410-html.html은 .

A4 비율 인쇄로 PDF를 만든 후에는 페이지를 깨끗하게 A4 인쇄 할 수 있습니다. 그것이 시간 투자 가치가 있는지 여부는 또 다른 질문입니다.

— FK82
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.