web-dev-qa-db-ja.com

最後のページの下部にコンテンツを追加します

Wkhtmltopdfを使用してHTMLからPDFレポートを作成していますが、次のパターンに従うカスタムレポートを作成する必要があります。

  1. 最初のページの上部にある情報。
  2. 1〜n行のテーブル（必要なページ数を使用する必要があります）
  3. 最後のページの終わりにいくつかの情報。

これらすべてをまとめることでうまくいきます。ただし、ステップ3の情報はテーブルの直後に表示されるため、コンテンツをページの最後に配置する方法はありますか？

このソリューションがCSSベースなのかwkhtmltopdfベースなのかさえわかりません。

csswkhtmltopdf
19
juanefren

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>
39
thirtydot

これは非常に難しい作業であり、現時点では純粋なCSSでこれを解決できるとは思いません（間違っていることが証明されることを望んでいますが）。

また、決定された改ページのサポート（page-break-inside: avoid;）は最高ではありません。実際、今のところテーブルでは機能しないと思います。おそらく、ページブレーキの周りでいくつかの行が分割されることになります。 （Webkitは1つをレンダリングしますPDFそしてそれを単一のページにカットします。ほとんどの場合、Edgeの内容に関係なく...）

enter image description here

このジレンマに対する私の解決策は、単一のページのサイズで単一のプレースホルダーdivsを作成し、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>
3
Jona

私はあなたが言っていることを理解するのに少し問題があります。 「テーブルの直後」と「テーブルの最後」のコンテンツの違いは何ですか？

tfoot 要素mightあなたが探しているもの：

<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の短い例、またはそれがどのように見えるか、そしてあなたがそれをどのように見せたいかについての写真が役立つかもしれません。

0
s4y