programing

대형 HTML 표 인쇄 시 페이지 구분 처리 방법

megabox 2023. 8. 22. 22:03
반응형

대형 HTML 표 인쇄 시 페이지 구분 처리 방법

저는 HTML 테이블을 여러 행으로 인쇄해야 하는 프로젝트가 있습니다.

제 문제는 표가 여러 페이지에 걸쳐 인쇄되는 방식입니다.행을 반으로 잘라 한 쪽은 페이지의 가장자리에 있고 나머지는 다음 페이지의 맨 위에 인쇄되어 있기 때문에 행을 읽을 수 없게 만드는 경우가 있습니다.

제가 생각할 수 있는 유일한 그럴듯한 해결책은 테이블 대신 적층된 DIV를 사용하고 필요한 경우 페이지 나누기를 강제하는 것입니다.하지만 모든 변화를 겪기 전에 여기서 물어볼 수 있을 것 같았어요

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
    table { page-break-inside:auto }
    tr    { page-break-inside:avoid; page-break-after:auto }
    thead { display:table-header-group }
    tfoot { display:table-footer-group }
</style>
</head>
<body>
    <table>
        <thead>
            <tr><th>heading</th></tr>
        </thead>
        <tfoot>
            <tr><td>notes</td></tr>
        </tfoot>
        <tbody>
        <tr>
            <td>x</td>
        </tr>
        <tr>
            <td>x</td>
        </tr>
        <!-- 500 more rows -->
        <tr>
            <td>x</td>
        </tr>
    </tbody>
    </table>
</body>
</html>

참고: page-break-after: always 태그를 사용하면 테이블의 마지막 비트 뒤에 페이지 구분이 생성되어 매번 끝에 완전히 빈 페이지가 생성됩니다!이 문제를 해결하려면 페이지 분할 후:auto로 변경합니다.올바르게 구분되고 추가 빈 페이지가 생성되지 않습니다.

<html>
<head>
<style>
@media print
{
  table { page-break-after:auto }
  tr    { page-break-inside:avoid; page-break-after:auto }
  td    { page-break-inside:avoid; page-break-after:auto }
  thead { display:table-header-group }
  tfoot { display:table-footer-group }
}
</style>
</head>

<body>
....
</body>
</html>

Sinan Unür 솔루션에서 확장:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test</title>
<style type="text/css">
    table { page-break-inside:auto }
    div   { page-break-inside:avoid; } /* This is the key */
    thead { display:table-header-group }
    tfoot { display:table-footer-group }
</style>
</head>
<body>
    <table>
        <thead>
            <tr><th>heading</th></tr>
        </thead>
        <tfoot>
            <tr><td>notes</td></tr>
        </tfoot>
        <tr>
            <td><div>Long<br />cell<br />should'nt<br />be<br />cut</div></td>
        </tr>
        <tr>
            <td><div>Long<br />cell<br />should'nt<br />be<br />cut</div></td>
        </tr>
        <!-- 500 more rows -->
        <tr>
            <td>x</td>
        </tr>
    </tbody>
    </table>
</body>
</html>

는 것 같습니다.page-break-inside:avoid일부 브라우저에서는 셀, 테이블, 행 모두 인라인 블록이 아닌 블록 요소만 고려합니다.

만약 당신이 하려고 하면,display:block그자리의 TR태그를 지정하고 있습니다.page-break-inside:avoid작동하지만 테이블 레이아웃을 방해합니다.

크롬에서 제게 맞는 답은 하나도 없었습니다.GitHub의 AA 버전은 이 목적을 위해 몇 가지 유용한 Javascript를 만들었고 이것은 저에게 효과가 있었습니다.

js를 코드에 추가하고 'splitForPrint' 클래스를 테이블에 추가하기만 하면 테이블을 여러 페이지로 깔끔하게 분할하고 각 페이지에 테이블 헤더를 추가할 수 있습니다.

다음 CSS 속성 사용:

page-break-after

page-break-before

예를 들어:

<html>
<head>
<style>
@media print
{
table {page-break-after:always}
}
</style>
</head>

<body>
....
</body>
</html>

경유로

저는 최근에 이 문제를 좋은 해결책으로 해결했습니다.

CSS:

.avoidBreak { 
    border: 2px solid;
    page-break-inside:avoid;
}

JS:

function Print(){
    $(".tableToPrint td, .tableToPrint th").each(function(){ $(this).css("width",  $(this).width() + "px")  });
    $(".tableToPrint tr").wrap("<div class='avoidBreak'></div>");
    window.print();
}

매력적으로 작동합니다!

저는 결국 @vicenterrera의 접근 방식을 따르게 되었고, 몇 가지 수정 사항(부트스트랩 3에 특정될 수 있음)을 적용했습니다.

기본적으로, 우리는 부서질 수 없습니다.tr s, 또는tds는 블록 레벨 요소가 아니기 때문입니다.그래서 우리는 임베디드div각각에 s, 그리고 우리의 것을 적용합니다.page-break-*에 규칙div두 번째로, 우리는 스타일링 아티팩트를 보상하기 위해 이러한 각 디브의 상단에 약간의 패딩을 추가합니다.

<style>
    @media print {
        /* avoid cutting tr's in half */
        th div, td div {
            margin-top:-8px;
            padding-top:8px;
            page-break-inside:avoid;
        }
    }
</style>
<script>
    $(document).ready(function(){
        // Wrap each tr and td's content within a div
        // (todo: add logic so we only do this when printing)
        $("table tbody th, table tbody td").wrapInner("<div></div>");
    })
</script>

마진과 패딩 조정은 (내 추측으로는 - 부트스트랩에서) 도입된 지터의 일종을 상쇄하기 위해 필요했습니다.제가 이 질문에 대한 다른 답변에서 새로운 해결책을 제시하고 있는지는 잘 모르겠습니다만, 이것이 누군가에게 도움이 될 것이라고 생각합니다.

저는 같은 문제에 직면했고 모든 곳에서 해결책을 찾았고, 마침내 모든 브라우저에서 제게 맞는 무언가를 찾았습니다.

html {
height: 0;
}

이 css 또는 css 대신 이 javascript를 사용할 수 있습니다.

$("html").height(0);

이것이 당신에게도 효과가 있기를 바랍니다.

많은 해결책을 확인해봤는데 아무도 잘 작동하지 않았습니다.

그래서 작은 속임수를 써봤는데 효과가 있었습니다.

스타일이 있는 tfoot:position: fixed; bottom: 0px;는 마지막 페이지의 맨 아래에 있지만 바닥글이 너무 높으면 표의 내용으로 겹칩니다.

tfoot만 포함:display: table-footer-group;중복되지는 않았지만 마지막 페이지 하단에 없습니다.

두 발을 들여놓자:

TFOOT.placer {
  display: table-footer-group;
  height: 130px;
}

TFOOT.contenter {
  display: table-footer-group;
  position: fixed;
  bottom: 0px;	
  height: 130px;
}
<TFOOT  class='placer'> 
  <TR>
    <TD>
      <!--  empty here
-->
    </TD>
  </TR>
</TFOOT>	
<TFOOT  class='contenter'> 
  <TR>
    <TD>
      your long text or high image here
    </TD>
  </TR>
</TFOOT>

하나는 마지막 페이지가 아닌 페이지에 자리를 예약하고, 두 번째는 실제 바닥글에 자리를 지정합니다.

저는 이런 얼굴을 하고 있습니다.CSS 속성을 사용하여 이 문제를 해결할 수 있습니다.

    @media print {
       table{page-break-after: auto;}
   }

참고: 이 속성은 비어 있거나 절대 위치 요소에 사용할 수 없습니다.

위에 제시된 모든 제안을 시도해 본 결과 이 문제에 대해 간단하고 작동 가능한 브라우저 간 솔루션을 찾았습니다.이 솔루션에는 스타일이나 페이지 구분이 필요하지 않습니다.솔루션의 경우 표 형식은 다음과 같아야 합니다.

<table>
    <thead>  <!-- there should be <thead> tag-->
        <td>Heading</td> <!--//inside <thead> should be <td> it should not be <th>-->
    </thead>
    <tbody><!---<tbody>also must-->
        <tr>
            <td>data</td>
        </tr>
        <!--100 more rows-->
    </tbody>
</table>

위의 형식을 테스트하고 교차 브라우저에서 작동합니다.

수락된 답변이 모든 브라우저에서 나에게 효과가 있는 것은 아니지만, CSS를 따르는 것은 나에게 효과가 있었습니다.

tr    
{ 
  display: table-row-group;
  page-break-inside:avoid; 
  page-break-after:auto;
}

html 구조는 다음과 같습니다.

<table>
  <thead>
    <tr></tr>
  </thead>
  <tbody>
    <tr></tr>
    <tr></tr>
    ...
  </tbody>
</table>

저의 경우, 몇 가지 추가적인 문제가 있었습니다.thead tr그러나 이것은 테이블 행이 끊기지 않도록 하는 원래 문제를 해결했습니다.

헤더 문제 때문에 결국 다음과 같은 결과를 얻었습니다.

#theTable td *
{
  page-break-inside:avoid;
}

행이 끊기는 것을 방지하지 않고 각 셀의 내용만 차단했습니다.

자, 얘들아...여기 있는 대부분의 솔루션은 효과가 없었습니다.그래서 이게 제게 일이 일어난 방식입니다.

HTML

<table>
  <thead>
   <tr>
     <th style="border:none;height:26px;"></th>
     <th style="border:none;height:26px;"></th>
     .
     .
   </tr>
   <tr>
     <th style="border:1px solid black">ABC</th>
     <th style="border:1px solid black">ABC</th>
     .
     .
   <tr>
  </thead>
<tbody>

    //YOUR CODE

</tbody>
</table>

첫 번째 헤드 세트는 페이지 구분 중에 두 번째 헤드(즉, 원래 헤드)에서 상단 테두리가 누락되지 않도록 더미 헤드 세트로 사용됩니다.

언급URL : https://stackoverflow.com/questions/1763639/how-to-deal-with-page-breaks-when-printing-a-large-html-table

반응형

'programing' 카테고리의 다른 글

Android OS에서 Haskell 프로그램 실행  (0) 2023.08.22
AES_ENCRIPT를 사용하는 mariadbddl을 jooq로 변환하려면 어떻게 해야 합니까?  (0) 2023.08.22
MySQL LIMIT는 ORDER BY 이전 또는 이후에 적용됩니까?  (0) 2023.08.22
'상자 그림자-색상' 속성이 있습니까?  (0) 2023.08.22
jQuery를 사용하여 테이블 헤더를 뷰 밖으로 스크롤할 때 맨 위에 고정된 상태로 유지합니다.  (0) 2023.08.22

'programing'의 다른글

  • 현재글대형 HTML 표 인쇄 시 페이지 구분 처리 방법

관련글

댓글

티스토리툴바