Как поместить пустое пространство поверх каждой страницы печатного HTML - PullRequest
Новая
       38

Как поместить пустое пространство поверх каждой страницы печатного HTML

7 голосов
/ 20 июля 2011

Я разработал отчет в формате HTML с несколькими div с и table с.Теперь мой клиент просит меня поместить повторяющийся заголовок вверху каждой напечатанной страницы.Насколько я знаю, это невозможно при использовании простого CSS и HTML.В качестве попытки я помещаю элемент div заголовка в thead, к которому я применил display: table-header-group, чтобы отобразить его, и помещаю все остальные элементы отчета в виде строк основной таблицы, но безуспешно.

  1. Обходной путь должен использовать @print { .header {position: fixed; top: 10px} } для повторения элемента .header вверху каждой страницы.Но для этой работы мы должны поставить пустое место в верхней части каждой новой страницы;в противном случае фиксированный элемент заголовка смешивается с другими элементами в верхней части таблицы.

  2. В качестве другого обходного пути я могу вычислить высоту элементов во время рендеринга и при необходимости поставить разрывы страниц вручную.Поэтому я хочу знать, есть ли какая-либо библиотека Javascript, доступная для выполнения при загрузке страницы, и она вычисляет все высоты отображения элементов div на странице и помещает элемент div с нулевой высотой с page-break-before: always; перед каждым элементом div, который превышает высоту элемента.Бумага А4.Предположим, что следующие элементы div дают высоту 14, 10, 8, 9, 6, 13 и 6 сантиметров во время рендеринга.Я хочу, чтобы библиотека поместила фиктивный элемент погружения в указанные места:

<div id="d1">...</div>

<div id="d2">...</div>

<!-- here, because 14+10+8 exceeds 30cm -->

<div id="d3">...</div>

<div id="d4">...</div>

<div id="d5">...</div>

<!-- here, because 8+9+6+13 exceeds 30cm -->

<div id="d6">...</div>

<div id="d7">...</div>

Ответы [ 3 ]

1 голос
/ 26 июля 2011

Рассматривали ли вы разделить таблицу на несколько страниц?Я делал это в прошлом, измеряя размер страницы и записывая строки в браузер.Каждый раз, когда был достигнут конец страницы, я закрывал записываемую таблицу, затем начинал следующую, писал новый DIV и т. Д. Вам нужно следить за максимальным размером каждого столбца и т. Д. На ходу,но с точки зрения эффективности мы могли бы записать тысячи строк на экран и, как правило, возвращать результаты для больших отчетов менее чем за 60 секунд.

Я также использовал функцию ориентации CSS, доступную в то время только в IE (режим записи: tb-rl) для того, чтобы имитировать страницу, отображаемую в альбомной ориентации, а также содержимое - для этого нужно немного больше думать о том, как вы пишете, НО итоговый контент выглядел очень профессионально.

1 голос
/ 27 июля 2011

Вот мое окончательное решение. Следующий код выполняется при загрузке страницы. Моя страница состояла исключительно из нескольких элементов div. Два элемента div как заголовки, а другие элементы div (содержащие табличные данные) - как детали. Я предполагал всегда печатать в портретной схеме, а также предполагал размер А4 (= ~ 21x30см). Я также предположил 4,5 см поля для левого-правого и верхнего-нижнего края страницы. Сначала код изменяет размеры div до совместимой с портретом ширины (так что все таблицы div изменяются автоматически). Затем я перебираю элементы div без заголовка, чтобы добавить разрыв страницы, когда высота превышает высоту A4. Я также клонировал и добавил элементы заголовка поверх каждой страницы с помощью этого кода. 

// page width in pixels
function pw() {
    return cm2px(16.5);
}
// page height in pixels
function ph() {
    return cm2px(25.5);
}
function px2cm(px) {
    return px * 2.54 / 96;
}
function cm2px(cm) {
    return cm * 96 / 2.54;
}

$(function() {
    $('.section > div').each(function(){
        $(this).width(pw() + 'px');
    });
    hh = $('.section > div.heading');
    headingHeight = hh.eq(0).height() + hh.eq(1).height();

    h1 = hh.eq(0).clone();
    h2 = hh.eq(1).clone();

    var h = headingHeight;
    var pageHeight = ph();

    $('.section > div').not('.heading').each(function(){
        if (h + $(this).height() + 14 > pageHeight) {
            h1.css('page-break-before', 'always');
            $(this).before(h1.clone());
            $(this).before(h2.clone());
            h = $(this).height() + 14 + headingHeight;
        } else {
            h += $(this).height() + 14;
        }
    });
});
0 голосов
/ 20 июля 2011

Попробуйте jquery для вычисления высоты тегов div.Однако печать html обычно может быть выполнена с помощью простого php.

Также самым простым способом может быть создание отдельного css-файла для вашей распечатанной страницы и создание фонового изображения div для заголовка, который вы хотите использовать для вашей распечатанной страницы.В вашей обычной таблице стилей тот же div может быть пустым и не иметь высоты или ширины.

Эта ссылка является объяснением какой-то компании о том, как использовать CSS для печати HTML

...