Добавить контент внизу последней страницы

Я использую wkhtmltopdf для создания отчетов в формате PDF из HTML, мне нужно создать собственный отчет, который следует этому шаблону:

Немного информации вверху первой страницы.
Таблица, которая может иметь от 1 до n строк (она должна использовать любое количество страниц, которое ей нужно)
Немного информации в конце последней страницы.

Объединение всего этого делает свое дело; однако, поскольку информация о шаге 3 появляется сразу после таблицы, есть ли способ поместить содержимое в конец страницы?

Я даже не уверен, основано ли это решение на CSS или на основе wkhtmltopdf.

css wkhtmltopdf

juanefren 03.02.2012 источник

Ответы (3)

arrow_upward
40
arrow_downward

http://madalgo.au.dk/~jakobt/wkhtmltoxdoc/wkhtmltopdf-0.9.9-doc.html

Обратите внимание на раздел «Нижние колонтитулы и заголовки».

Для этого вы можете использовать --footer-html в сочетании с JavaScript.

wkhtmltopdf --footer-html footer.html http://www.stackoverflow.com/ so.pdf

Я основывал содержимое моего footer.html на примере, приведенном в ссылке выше:

<!DOCTYPE html>

<script>
window.onload = function() {
    var vars = {};
    var x = document.location.search.substring(1).split('&');
    for (var i in x) {
        var z = x[i].split('=', 2);
        vars[z[0]] = unescape(z[1]);
    }

    //if current page number == last page number
    if (vars['page'] == vars['topage']) {
        document.querySelectorAll('.extra')[0].textContent = 'extra text here';
    }
};
</script>

<style>
.extra {
    color: red;
}
</style>

<div class="extra"></div>

thirtydot 09.02.2012

comment

Спасибо, у меня было много проблем, потому что у меня не было исправленной версии QT, я потратил много времени на безуспешную компиляцию, пока не понял, что на странице есть двоичная версия. - juanefren; 10.02.2012

arrow_upward
4
arrow_downward

Это довольно сложная задача, и я не думаю, что вы можете решить ее с помощью чистого CSS в настоящее время (хотя я хотел бы оказаться неправым).

Также не самая лучшая поддержка определенных разрывов страниц (page-break-inside: avoid;). На самом деле я не думаю, что это работает с таблицей до сих пор. Вы, вероятно, в конечном итоге разделите несколько строк вокруг pagebrake. (Webkit отображает один PDF-файл, а затем разрезает его на отдельные страницы, в основном независимо от того, что находится на краю...)

введите здесь описание изображения

Мое решение этой дилеммы состояло в том, чтобы создать один заполнитель div размером с одну страницу, а затем распределить содержимое с некоторыми языками программирования между этими заполнителями перед созданием PDF.

В последней из таких оберток вы можете добавить нижний колонтитул с абсолютным позиционированием.

Вот пример кода:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>Sample Data</title>
    <style>

        * {
            padding: 0;
            margin: 0;
        }   

        .page {
            page-break-inside: avoid;
            height: 1360px;

            position: relative;
        }

        table {
            border-collapse: collapse;
            width: 100%;
        }

        td {
            border: 1px solid #ccc;
            padding: .23em;
        }

        .footer {
            position: absolute;
            color: red;
            bottom: 0;
        }

    </style>
</head>
<body>

<div class="page one">

    <p>
        Some info Here... at the top of first page
    </p>

    <!-- Zen Coding: table>tbody>(tr>td>{A sample table}+td>{Foo bar})*42 -->       

    <table>
        <tbody>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
        </tbody>
    </table>    
</div>

<div class="page two">
    <table>
        <tbody>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
            <tr><td>A sample table</td><td>Foo bar</td></tr>
        </tbody>
    </table>

    <p class="footer">
        The last info here in the bottom of last page
    </p>
</div>

</body>
</html>

Jona 07.02.2012

comment

Это кажется интересной идеей, как wkhtmltopdf преобразует его dl.dropbox.com /u/1990697/out.pdf конечно, я открыт для решения javascript в случае необходимости. - juanefren; 08.02.2012

comment

@juanefren Вам, вероятно, нужно немного повозиться с высотой (.page{height: 1360px;}) для контейнера страницы. На моей машине это работает с моим примером кода. - Jona; 09.02.2012

comment

@juanefren ваше вложение недоступно - Preshan Pradeepa; 22.11.2017

arrow_upward
-1
arrow_downward

У меня небольшая проблема с пониманием того, что вы имеете в виду. В чем разница между контентом, находящимся «сразу после таблицы» и «в конце таблицы»?

Элемент tfoot может быть тем, что вы ищете:

<table>
    <thead>
        <tr><th>Header</th></tr>
    </thead>
    <tfoot>
        <tr><th>Footer</th></tr>
    </tfoot>
    <tbody>
        <tr><td>Data</td></tr>
        <tr><td>Data</td></tr>
        <tr><td>Data</td></tr>
    </tbody>
</table>

Если нет, не могли бы вы уточнить? Короткий пример HTML-кода, который у вас есть, или изображения того, как он выглядит и как вы хотите, чтобы он выглядел, могут помочь.

s4y 07.02.2012

comment

Произошла опечатка, я имею в виду показать в конце страницы, а не в конце таблицы, это пример: dl.dropbox.com/u/1990697/example.pdf - juanefren; 07.02.2012

Добавить контент внизу последней страницы

Ответы (3)

Вопросы по теме