phpwkhtmltopdfでフッターにページ番号を表示する方法

以前phpwkhtmltopdfを紹介しました。

今回はphpwkthmltopdfを使ってフッターにページ番号を入れる方法を紹介します。

1 前準備
- 1.1 CSSを準備
- 1.2 コンテンツを作成
2 フッターにページ番号を表示する方法
- 2.1 パラメーターで指定する場合
  - 2.1.1 表示位置
  - 2.1.2 置換用テキスト
- 2.2 ページ番号を表示する方法

前準備

CSSを準備

まずはメインコンテンツのCSSを作成します。
normalize.cssをの公式サイトからcssダウンロードしてください。
さらにstyle.css作成します。


body{
    font-size:10px;
}
table{
    border:#CCC 1px solid;
    border-spacing: 0;
    border-collapse: collapse;
    box-sizing: border-box;
}
td,th{
    border:#CCC 1px solid;
    padding: 5px;
    box-sizing: border-box;
}
/* PDF化したときにテーブルのレイアウトがおかしくならない設定*/
tr {
    page-break-inside: avoid;
}

コンテンツを作成

今度はメインコンテンツを作ります。
table.htmlを作成してください。

<!-- normalize.cssとstyle.cssを読み込む -->
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="style.css">

<body>
<div class="page">
    <table style="width: 100%">
        <thead>
            <tr>
                <th style="width:10%">名前</th>
                <th style="width:10%">住所</th>
                <th style="width:10%">説明</th>
                <th style="width:70%">内容</th>
            </tr>
        </thead>
        <tbody>
            <!-- 100回ぐらい繰り返す -->
            <tr>
                <td>あああああああ</td>
                <td>あああああああ</td>
                <td>あああああああ</td>
                <td>あああああああああああああああああああああああああああああああああああああああああ</td>
            </tr>
        </tbody>
    </table>
</div>
</body>

フッターにページ番号を表示する方法

フッターにページ番号を表示するには、

パラメーターで指定する場合
HTMLを読み込む場合

の２通りあります。

パラメーターで指定する場合

単純に総ページ数と現在のページ番号を出すだけでよければ、パラメータで指定するだけで表示できます。
フッター内での表示位置と、置換用のテキストを指定します。

表示位置

パラメータ	表示される場所
footer-center	中央
footer-right	右
footer-left	左

置換用テキスト

テキスト	表示される情報
[page]	現在のページ番号
topage	[総ページ番号]

今回はフッターの中央に現在のページ番号/総ページ番号という形式で表示させます。

use mikehaertl\wkhtmlto\Pdf;
$pdf = new Pdf([
    'binary' => '/usr/local/lib/wkhtmltox/bin/wkhtmltopdf',
    'encoding' => 'utf-8',
    'margin-top' => 10,
    'margin-right' => 10,
    'margin-left' => 10,
    'margin-bottom' => 10,
    'no-outline',
    // 中央に現在のページ番号/総ページ番号表示
    'footer-center' => '[page]/[topage]'
 ]);
// ページを追加
$pdf->addPage('table.html');
// ブラウザにPDFを表示
$pdf->send();

実行すると以下のように出力されます。

ページ番号を表示する方法

シンプルなHTMLを作って、ページ番号を表示させたいと思います。
footer.htmlを作って以下の記述をします。
now_pageに現在のページ番号、max_pageに総ページ数が表示されます。

<div id="page_contents">
    <span id="now_page"></span>／
    <span id="max_page"></span>
</div>

phpwkthmltopdfは改ページがあるたびに、footer.htmlを読み込みに行きます。
その際URLにGETパラメータで現在のページ番号などの情報を付与しています。
そのためjavascriptでURLを取得して、GETパラメータを解析する必要があります。
footer.htmlに以下のjavascriptを追加してください。

// URLを取得して、パラメータを保存する
var pdfInfo = {};
var x = document.location.search.substring(1).split('&');
for (var i in x) {
    var z = x[i].split('=', 2);
    pdfInfo[z[0]] = unescape(z[1]);
}
getPdfInfo();

// ページ番号を取得する関数
function getPdfInfo() {
    var now_page = pdfInfo.page || 1;
    var max_page = pdfInfo.topage || 1;
    document.getElementById('now_page').textContent = now_page;
    document.getElementById('max_page').textContent = max_page;
}

このままでも問題ありませんが、ページ番号を中心に表示するためにCSSを追加します。

#page_contents{
    text-align: center;
}

ではこれまで作った、table.htmlとfooter.htmlをPDF化していきます。
パラメータにfooter-htmlを指定してfooter.htmlを読み込むようにしてください。
view.phpを作成して以下のコードを記述してみましょう。

use mikehaertl\wkhtmlto\Pdf;
$pdf = new Pdf([
    'binary' => '/usr/local/bin/wkhtmltopdf',
    'encoding' => 'utf-8',
    'margin-top' => 10,
    'margin-right' => 10,
    'margin-left' => 10,
    'margin-bottom' => 10,
    'no-outline',
    //作成したfooter.htmlを読み込む
    'footer-html' => 'footer.html',
 ]);
// ページを追加
$pdf->addPage('table.html');
// ブラウザにPDFを表示
$pdf->send();

これで実行してみます。

フッターにページ番号が表示されているのが確認できました。