A4 크기의 HTML로 보고서를 만들어야합니다. 어떻게 할 수 있습니까?

정확하게 A4 크기가되어야하는 HTML로 보고서를 작성해야합니다. 머리글과 바닥 글이 필요합니다. 확실히 이것은 CSS로 할 수 있습니까?A4 크기의 HTML로 보고서를 만들어야합니다. 어떻게 할 수 있습니까?

누구에게도이 예제 또는 샘플 코드가 있습니까?

내가 봤 내가 모든받은 코드 조각은 미디어 쿼리에 대해 이야기하고 그들이 작동하지 않습니다 ..

을 그래서 기본적으로 인쇄하기위한 목적으로, 생성 된 HTML은 PDF 문서로 변환됩니다. MVC4를 사용하여 뷰를 PDF로 변환하는 도구를 찾았습니다. 보기는 순수한 HTML입니다. 그래서 출력 보고서를 나타 내기 위해 HTML 스타일을 지정하지 않은 다음 PDF로 출력하는 것이 좋습니다.

그래서 나는 헤더가 할 수있는 능력, 그리고 바닥 글 (페이지 하단)과 그 둘의 중간 나는 다음과 같은 코드를 사용하여 시도

에서 다음 내용을 필요로하지만,하지 않는 것 ...

<html> 
<head> 
    <style type="text/css" media="all"> 
     @page { 
      size: A4 portrait; /* can use also 'landscape' for orientation */ 
      margin: 1.0in; 
      border: thin solid black; 
      padding: 1em; 

      @bottom-center { 
       content: element(footer); 
      } 

      @top-center { 
       content: element(header); 
      } 
     } 

     #page-header { 
      display: block; 
      position: running(header); 
     } 

     #page-footer { 
      display: block; 
      position: running(footer); 
     } 

     .page-number:before { 
      content: counter(page); 
     } 

     .page-count:before { 
      content: counter(pages); 
     } 
    </style> 
</head> 

<body> 
    <div id="page-header"> 
     <p>Header text</p> 
    </div> 

    <div id="page-footer"> 
     <p>Footer text</p> 
     <p>Page <span class="page-number"/> of <span class="page-count"/></p> 
    </div> 

    <div id="page-content"> 
     <p>Page 1.</p> 

     <p style="page-break-after:always;"/> 

     <p>Page 2.</p> 
    </div> 
</body> 
</html>

출처

2013-12-10 user2206329

솔직히 미디어 쿼리 갈 길을 생각한다 바랍니다. 정확히 그들이 설계된 것이 아닙니까? '@media print'는 인쇄 할 때 페이지의 모양을 정확하게 정의 할 수있게합니다. 하지만 ... 나는 이런 식으로 시도한 적이 없으므로 단지 '처음 생각한'종류의 것일뿐입니다 ... – Charlie74

모든 예? 나는 http://www.fanuriotimetracking.com/files/releases/2.7/help/html/template-guide-html.html을 사용하여 샘플 페이지로 이동하려했다. do not work – user2206329

'# a4 {width : 8.27in; 신장 : 11.69in; } ' – mdesdev

CSS를 사용하여 너비/높이를 실제 크기로 설정할 수 있습니다. 예를 들어 print.css 파일에 다음과 같이 입력하십시오.

div.A4 { 
    width: 21 cm; 
    height: 29.7 cm; 
    margin: 0; 
}

그러나 HTML/CSS는 실제로 이러한 용도로 사용되지 않습니다. 미디어 쿼리는 이것을 처리하는 가장 좋은 방법입니다. 나는 정말로 당신이 그들을 일하게하려고 조금 더 많은 시간을 두는 것을 권할 것이다; 이 웹 사이트를 두 번 이상 사용하려는 경우 시간 가치가 있습니다.

출처

2013-12-10 02:45:30 AaronB

@ user2206329 인쇄 할 때이 옵션이 필요한 경우 사용자가 용지 형식을 변경할 수 있거나 방향 (가로, 세로)으로 미디어 쿼리를 대신 사용할 수 있으므로 CSS 형식을 사용하여 용지 형식 치수를 하드 코딩하지 않는 것이 좋습니다 – Leo

매우 동의 함 OP가 특별히 미디어 쿼리를 원하지 않기 때문에 나는 그것을 할 수있는 또 다른 방법을 제안 할 것이라고 생각했다. 하지만 그렇습니다. 미디어 쿼리가 훨씬 더 좋습니다. – AaronB

나는 미디어 쿼리를 원하지 않는다고 말한 적이 없다. 내가 사용한 미디어 쿼리가 작동하지 않는다고 말했다. 누군가 작동하는 미디어 쿼리가 더 많을 경우 – user2206329

왜 A4 크기입니까? 인쇄용입니까? 인쇄용의 경우 걱정하지 않아도됩니다. 그 목적을 위해 CSS를 사용하십시오. html 요소가 블록 요소 (기본값)로 표시되고 너비 또는 높이를 지정하지 않으면 인쇄 할 때 html 문서가 프린터 설정 문서의 크기로 조정됩니다. 인쇄용 CSS 설정을 조정해야하는 경우 css media queries

인쇄와 관련이없는 경우이 답변을 무시하고 정확한 해결책을 제공 할 수 있도록 게시물에 세부 정보를 제공하십시오.

는 의미

레오

출처

2013-12-10 02:45:40 Leo

업데이트 된 질문 – user2206329

이 PDF 변환기 도구는 인쇄 및 용지 형식을 처리 할 수 있습니까? 어떤 도구입니까? MVC 및 ASP.NEt 용으로 다른 PDF 변환기를 사용했으며 대개 멋진 OO 형식으로이 항목을 처리합니다. – Leo

https://github.com/webgio/Rotativa – user2206329

A4 크기의 HTML로 보고서를 만들어야합니다. 어떻게 할 수 있습니까?

답변

관련 문제