Dodaj treść na dole ostatniej strony

Używam wkhtmltopdf do tworzenia raportów PDF z HTML, muszę utworzyć własny raport, który będzie zgodny z tym wzorem:

  1. Niektóre informacje na górze pierwszej strony.
  2. tabela, która może mieć od 1 do n wierszy (powinna używać dowolnej ilości stron, jakiej potrzebuje)
  3. Niektóre informacje na końcu ostatniej strony.

Złożenie tego wszystkiego do kupy, ale ponieważ informacja o kroku 3 pojawia się zaraz po tabeli, czy istnieje sposób na umieszczenie zawartości w koniec strony?

Nie jestem nawet pewien, czy to rozwiązanie jest oparte na CSS lub wkhtmltopdf.

Author: isherwood, 2012-02-04
Source

3 answers

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

Spójrz na sekcję "stopki i nagłówki".

Możesz użyć --footer-html w połączeniu z JavaScript, aby to zrobić.

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

Oparłem zawartość mojego footer.html na przykładzie podanym w linku powyżej: 

<!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>
 37
Author: thirtydot,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-02-09 02:55:44

To dość trudne zadanie i nie sądzę, że możesz rozwiązać to za pomocą czystego CSS w tym czasie (choć chciałbym, aby udowodniono, że się mylę).

Również obsługa określonych podziałów stron (page-break-inside: avoid;) nie jest najlepsza. W rzeczywistości nie sądzę, aby to działa z tabeli do tej pory. Prawdopodobnie skończyłbyś z kilkoma rzędami podzielonymi wokół hamulca strony. (Webkit renderuje jeden plik PDF, a następnie tnie go na pojedyncze strony, głównie niezależnie od tego, co znajduje się na krawędzi...)

Tutaj wpisz opis obrazka

Moim rozwiązaniem tego dylematu było aby utworzyć pojedynczy element zastępczy div S w rozmiarze pojedynczej strony, a następnie rozprowadzić zawartość za pomocą niektórych języków programowania między tymi elementami zastępczymi przed wygenerowaniem pliku PDF.

W ostatnim z takich owijarek można dodać absolutną stopkę u dołu.

Oto przykładowy kod: 

<!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>
 3
Author: Jona,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-12-20 01:49:30

Mam mały problem z podążaniem za tym, co masz na myśli. Jaka jest różnica między treścią "zaraz po stole" a "na końcu stołu"?

The tfoot element może być tym, czego szukasz: 

<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>
Jeśli nie, możesz rozwinąć? Krótki przykład HTML, który posiadasz lub zdjęcia tego, jak wygląda i jak chcesz, aby wyglądał, może pomóc.
 0
Author: s4y,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-02-07 16:42:36