wkhtmltopdf의 테이블 행 내부에서 페이지 나누기를 방지하는 방법

wkhtmltopdf의 테이블 행 내부에서 페이지 나누기를 방지하는 방법

---

하나의 테이블이있는 html 페이지에서 pdf 보고서를 생성하고 있습니다.

내가 사용하고 wkhtmltopdf을 목적으로.

pdf가 생성되면 tr 태그의 어느 곳에서나 중단 됩니다.

나는 그것을 피하고 싶다.

---

업데이트 17.09.2015 : 사용중인 버전 확인 : wkhtmltopdf 0.12.2.4가 문제를 해결합니다 (확인하지 않습니다) .

---

이것은 wkhtmltopdf의 기기 문제입니다. 웹킷 (WKhtmltopdf의 WK)에서 사용하는 페이지 나누기 알고리즘은 실제로 큰 테이블에서 작동하지 않습니다. 페이지로 더 쉽게 분할되고 CSS를 많이 사용하는 작은 청크로 테이블을 나누는 것이 좋습니다.

table, tr, td, th, tbody, thead, tfoot {
    page-break-inside: avoid !important;
}

또한 다음 wkhtmltopdf 문제를 해결합니다. 예를 들어 테이블 분할 문제를 논의하는 흥미로운 주석이 있습니다. 도움이 될 수있는 168에서 프로그래밍 방식으로 테이블을 분할하는 JS 솔루션이 있습니다.

• https://code.google.com/p/wkhtmltopdf/issues/detail?id=168
• https://code.google.com/p/wkhtmltopdf/issues/detail?id=9

업데이트 2013년 8월 11일 위에 링크 된 168 호에서 이에 대한 많은 논의가 있습니다. 누군가가 더 나은 테이블 분할을 지원하는 wkhtmltopdf 버전을 사용할 수 있지만 안타깝게도 공식적으로 릴리스되지 않습니다. 나는 그것을 얻는 방법을 모르고 Windows에서 아래하는 방법을 모르지만 관심있는 사람은 여기 에서 주석을 확인할 수 있습니다 (의 새 업데이트 참조).

업데이트 24.02.2014 wkhtmltopdf 0.12에서이 기능이 크게 향상되는 것이 좋습니다. 그러나 새 버전을 사용하기 전에 0.12.1을 기다렸다가 철저히 테스트하십시오. 안티 알리 제를 사용하는 새 직원이 훌륭하게 작업하고 (ashkulz 바위) 여전히 약간 불편합니다! wkhtmltopdf.org 및 github 에서 계속 업데이트하십시오 . Google 코드 사이트는 더 이상 사용하지 않고 천천히 마이그레이션됩니다.

---

그것은 설치되어있는 것입니다. 아마도 누군가에게 유용 할 것입니다.

그래서 내가 읽은 것에서 문제는

page-break-inside: avoid

작동하지 않는다는 것입니다. 그러나 실제로 예상 display:block대로 작동 하는 요소에 설정하면 (SO 어딘가에서 언급했듯이). 그래서 테이블 css의 간단한 구조를 위해

td div, th div{
    page-break-inside: avoid;
}

및 테이블 구조

<table>
....
<tr>
    <td><div>some text</div></td>
    <td><div>more text</div></td>
</tr>
....
</table>

예상대로 작동합니다.

행 범위에 대해 좀 더 복잡한 경우가 있었기 때문에 위의 해결책은 원하는 효과가 아닌 평화를 깨뜨리는 것이 었습니다. 나는 각 행에있는 행 세트에 대해 div를 사용하여 해결했습니다. 내 jquery js는 모든 작업을 수행합니다.

$(window).load(function () {
    var sizes = {};
    $('#the_table tr:first th').each(function (a, td) {         
        var w = $(td).width();
        if (sizes.hasOwnProperty('' + a)) {
            if (sizes['' + a] < w)
                sizes['' + a] = w;
        }
        else {
            sizes['' + a] = w;
        }
    });

    var tableClone = $('#the_table').clone();
    $('#the_table').replaceWith('<div class="container"></div>');

    var curentDivTable;
    var cDiv = $('.container');
    tableClone.find('tr').each(function (i, ln) {
        var line = $(ln);
        if (line.hasClass('main_row')) {
            var div = $('<div class="new-section"><table><tbody>')
            currentDivTable = div.find('tbody');
            cDiv.append(div);               
        }
        currentDivTable.append(line);
    });
    //optional - maybe in % its better than px
    var sum = 0;
    $.each(sizes, function (a, b) {
        sum += b;
    });
    var widths = {};
    $.each(sizes, function (a, b) {
        var p = Math.ceil(b * 100 / sum);
        widths['' + a] = p + '%';
    });
    //setup
    $('.container table').each(function (a, tbl) {
        $(tbl).find('tr:first td, tr:first th').each(function (b, td) {
            $(td).width(widths['' + b]);
        });
        $(tbl).addClass('fixed');
    });
});

CSS :

div.new-section {
    page-break-inside: avoid;
}
.container, .new-section, .new-section table.fixed{
    width: 100%;
}

.new-section table.fixed{
    table-layout:fixed;
}

모든 것이 필요한지 모르겠고 완벽하다고 생각하지 않습니다. 크롬에서만 테스트

---

0.12 부터이 문제가 해결되어 있고 표가 너무 길어서 페이지에 맞지 않는 경우 wkhtmltopdf가 표를 두 부분으로 나누고 새 페이지의 열 머리글을 반복하며 열 머리글은 첫 번째 행에 계속해서 나타납니다.

wkhtmltopdf github 문제 섹션 에서이 문제에 대한 일시적인 해결책을 찾았습니다 : https://github.com/wkhtmltopdf/wkhtmltopdf/issues/2531

뷰 CSS에 다음 줄을 추가하십시오.

tr {
  page-break-inside: avoid; 
}

---

wkhtmltopdf 0.12.2.1 이상 으로이 문제가 해결 알았습니다.

---

내 경우 어떤 경우 이전 답변 중 어느 것도 나를 위해 일하지 특별한. 결국 작동하게 된 여러 가지의 많은 연주.

1. 나는 (우분투 16.04에) 설치 라고 pdfkit의 wrapper Wkhtmltopdf 다음 pip3을 사용하고 대신 Wkhtmltopdf를 설치하는 나는, 아래의 펼쳐보기를 수행하여 정적 바이너리 (버전 0.12.3)를 설치 apt-get을 이곳에서 촬영

   #!/bin/sh
   
   sudo apt-get install -y openssl build-essential xorg libssl-dev
   wget http://download.gna.org/wkhtmltopdf/0.12/0.12.3/wkhtmltox-0.12.3_linux-generic-amd64.tar.xz
   tar -xJf wkhtmltox-0.12.3_linux-generic-amd64.tar.xz
   cd wkhtmltox
   sudo chown root:root bin/wkhtmltopdf
   sudo cp -r * /usr/
   

2. 이 CSS를 추가했습니다 (여기 답변 중 하나에서 제 안됨).

   tr, td div, th div{
       page-break-inside: avoid;
   }
   

3. 그런 다음 여기에 제안 된대로 및 태그

   도 추가 합니다 (이들 없이도 테이블은 추악한 방식으로 깨질 것입니다).<thead><tbody>

   <table>
       <thead>
           <tr>
               <th>Column 1</th>
               <th>Column 2</th>
           </tr>
       </thead>
   
       <tbody>
           <tr>
               <td>Value 1</td>
               <td>Value 2</td>
           </tr>
       </tbody>
   </table>
   

수정으로 이제 사용하여 Mako 템플릿 을 사용하여 HTML을 생성 한 다음 Wkhtmltopdf에 피드 페이지가 매겨진 PDF를 얻을 수 있습니다. :)

---

테이블에 대한 모든 조작을 시도했지만 페이지 나누기가 행 중간에있는 것이 막을 수있는 방법은 없습니다. 필사적으로 다른 버전을 시도해 성공하고 다음을 발견했습니다.

Wkhtmltopdf 0.12.2.1 : 나쁨

Wkhtmltopdf 0.12.3 : 나쁨

Wkhtmltopdf 0.12.1 :

내 해결은 버전 0.12.1로 다운 그레이드하는 것이되었지만, 이로 인해 문제가 해결되었습니다. 물론, 확실한 것은 부분적으로 내 html에 대한 강박증이 아니었기 때문일 수도 있고 HTML이 TinyMCE (사용자에 의해) 내부에서 생성되기 때문에 선택의 여지가 없습니다.

또한 중첩 테이블은 어떤 버전에서도 작동하지 않습니다.

---

나는이 CSS가 문제를 해결 한 많은 시도 n 오류 나중에 문제에 직면했습니다.

tr { display: inline-table; }

---

tr을 끄지 않고 pdf 내에서 페이지 나누기를 사용하는 방법은 무엇입니까?

모든 html 파일에서 사용할 수있는 솔루션입니다 .....

tr을 입고 후에는 tr 내부에서 div를 가져 오기 위해 CSS를 div에 제공해야합니다.

<tr>
      <div style="page-break-inside:avoid !important; page-break-after:auto !important; overflow: hidden; display:block !important; width:100% ">
     </tr>

---

나는 며칠 동안이 문제를 파헤 쳤고 최종 해결을 찾았습니다. 이 프로젝트는 phpwkhtmltopdf를 참조 할 수 있습니다 . 디렉토리를 찾아 보면 article3 가지 문제에 대한 3 가지 해결 방법을 찾을 수 있습니다. 요컨대, 해결책은 CSS 스타일을 추가하는 것입니다.

thead {
    display: table-row-group;
}
tr {
    page-break-before: always;
    page-break-after: always;
    page-break-inside: avoid;
}
table {
    word-wrap: break-word;
}
table td {
    word-break: break-all;
}

만약 당신이 중국인이라면이 사이트를 확인하세요. wkhtmltopdf ， 你 一定 想 知道 这些 wkhtmltopdf에 대한 요점을 요점을 확인하세요.

---

테이블 헤드가 있습니까? 그리고 테이블 본체?

<table>
<tbody>
<tr><th>Name</th><th>Value</th></tr>
<tr><td>url</td><td>stackoverflow.com</td></tr>
<tr><td>ip</td><td>123.123.123.123</td></tr>
</tbody>
</table>

이것이 표의 적절한 형식입니다. 대부분의 브라우저 는 덜 신경 쓰지 많이, 언급 된 것과 같은 변환기 는 먼저 누락 된 태그 <tbody>나 <th>태그를 추가 할 것을 제안합니다.

---

Nanotelep이 말한 것 외에도 여기에 수동 테이블 페이지 나누기 알고리즘의 작업 구현이 있습니다. https://github.com/AAverin/JSUtils/tree/master/wkhtmltopdfTableSplitHack

---

위의 답변은 저에게 효과가 없었습니다. 내 pdfkit 구성 확대 / 축소 옵션을 특별히 비활성화해야했습니다.

PDFKit.configure do |config|

  config.default_options = {
    print_media_type: false,
    page_size: "A4",
    encoding: "UTF-8",
    ## Make sure the zoom option is not enabled!
    ## zoom: '1.3',
    disable_smart_shrinking: false,
    footer_right: "Page [page] of [toPage]"
  }

end

---

여전히 문제가있는 사람에게 기억해야 할 한 가지는 테이블 이 body 의 직접적인 자식 이어야한다는 것입니다. 그렇지 않으면 CSS가 작동하지 않습니다 (적어도 나에게 일어난 일입니다).

---

나는이 어리석은 해결책을 찾았지만 그것은 나를 위해 아주 잘 작동했다 :)

이렇게 매우 긴 행 범위 열을 넣었습니다.

<td rowspan="XXX TOTAL ROWS" style="width:0px"></td>

그러면 테이블이 깨지지 않습니다.

---

또 다른 옵션 : 각각 tr을 배치 tbody한 다음 peage break css 규칙을 tbody. 테이블은 여러를 지원합니다 tbody.

약간의 추가 마크 업이 있지만 괜찮습니다.

---

몇 가지 제안 된 솔루션을 조합하여 문제를 해결했습니다.

내 테이블을 div에 래핑하고 다음 CSS를 정의했습니다.

.wrapping-div {
        display: block;
        page-break-inside: avoid !important;
    }

.wrapping-div table, .wrapping-div tbody, .wrapping-div tr, .wrapping-div td, .wrapping-div th {
        page-break-inside: avoid !important;
    }

완료시 테이블 구조는 다음 예와 같이 정의되었습니다.

<div class="wrapping-div">
 <table>
  <tbody>
   <tr>
    <th>
      header
    </th>
    <td>
      content
    </td>
   </tr>
  </tbody>
 </table>
</div>

td 또는 th 태그 안에 div를 만들 필요가 없었습니다.

문제를 해결하는 동안 알아 차린 중요한 사항 :

• tbody는 테이블에 포함되어야합니다.
• div에는 display : block이 있어야합니다.
• 표가 한 페이지에 맞지 않으면 자동으로 전체 표를 다음 페이지로 이동합니다 (큰 표로이 표를 시도하지 않았습니다).
• CSS에서 ".wrapping-div table" 선택기 만 제거 하면 표가 두 페이지로 분할 될 수 있지만 올바르게 렌더링되고 두 페이지에서 한 셀이 분할되지 않습니다 (Word의 기본 동작과 유사). )

이게 도움이 되길 바란다.

---

나는 최신 h4cc / wkhtmltopdf-amd64 버전 0.12.4를 사용하여 문제로 많은 어려움을 겪었 으며 마침내 패키지 버전을 0.12.3!

---

페이지 나누기를 방지하기 위해 페이지 나누기 css 방지 옵션을 사용할 수 있습니다.

tr { page-break-inside: avoid; }

콘텐츠 (이미지 / 텍스트) 를 나누고 다음 페이지에 표시되도록합니다 .

.sample-image { page-break-before: always; }

참고 URL : https://stackoverflow.com/questions/13516534/how-to-avoid-page-break-inside-table-row-for-wkhtmltopdf