Разбиение HTML-документа на страницы для печати в браузерах на базе WebKit

Internet Explorer имеет Шаблон Для Печати двигатель, где я могу использовать DEVICERECT элемент для представления физической страницы, затем используйте LAYOUTRECT элемент в виде прямоугольного представления, чтобы пропустить HTML-документ на страницу и управлять разбиением на страницы. Это предотвращает отсечение строк посередине между соседними страницами. Этот механизм подробно описан здесь.

предоставляет ли WebKit аналогичную функцию? в частности, помощи PhantomJS не делать? Я ищу все, что позволит разбить на страницы существующий HTML-документ, который не имеет предопределенных разрывов страниц, и просмотреть его на страницы как новый преобразованный HTML или PDF-документ без обрезки строк посередине.

8
html javascript phantomjs printing webkit

2 ответов

движок браузера должен заботиться обо всем, и вы можете помочь ему с помощью таблицы стилей для media="print".

например, чтобы заставить разрывы страниц так, что каждый заголовок уровня 1 или 2 (<h1> или <h2>) помещается в начале новой страницы use page-break-before:

h1, h2 { page-break-before:always; }

в Chrome, IE и Opera вы можете управлять вдовы и дети-сироты, но он еще не приземлился в WebKit, так что пока вы могли бы использовать

p { page-break-inside: avoid;  }

чтобы избежать разрывов страниц внутри абзацев.

вы даже можете контролировать отступы для первая, левая и правая страницы отдельно.

Фантом render() использует таблицы стилей для печатных носителей, если выводится pdf-файл. rasterize.js пример выглядит как готовое к использованию решение для печати.

11

эта функция работает нормально.

$(function () {
    $("#print-button").on("click", function () {
        var table = $("#table1"),
            tableWidth = table.outerWidth(),
            pageWidth = 600,
            pageCount = Math.ceil(tableWidth / pageWidth),
            printWrap = $("<div></div>").insertAfter(table),
            i,
            printPage;
        for (i = 0; i < pageCount; i++) {
            printPage = $("<div></div>").css({
                "overflow": "hidden",
                "width": pageWidth,
                "page-break-before": i === 0 ? "auto" : "always"
            }).appendTo(printWrap);
            table.clone().removeAttr("id").appendTo(printPage).css({
                "position": "relative",
                "left": -i * pageWidth
            });
        }
        table.hide();
        $(this).prop("disabled", true);
    });
});

это разделит всю таблицу на несколько разделов...

здесь скрипка

код берется из в этой статье и на этой странице.

2