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

오래된 게시물이지만 적절한 해결책을 찾으려고 많은 시간을 낭비했기 때문에 여기에 넣을 것입니다. 아마도 누군가에게 유용 할 것입니다.

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

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;
}

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