SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 社員募集 ...

【wkhtmltopdf】ヘッダに「ページ数/総ページ数」を挿入する

問題

帳票印刷にwkhtmltopdfを使っています。

「何ページ中何ページ目」をヘッダに入れたいです。

答え

ページ数などすべてHTMLに書き込んでからコマンドに渡してもよいが、ずるずると続く文書がいったいどこで改ページされるのか不明な場合など、改ページの制御が難しい場合もある。

そこで、wkhtmltopdfにヘッダを生成してもらう例を書いておく。

ヘッダ挿入の機能の概要

コマンドオプション --header-html に指定したHTMLがヘッダに挿入される。フッタも --footer-html に指定できる。

その際、引数が渡されて、今何ページ目なのか、今何章目なのかなどが取得できる。

wkhtmltopdfはwebkitでHTMLをレンダリングするのだが、Javascriptを実行してその結果のHTMLをPDFにできてしまう。ヘッダのページ数などはJavascriptにお任せする。

下の一覧は渡してもらえる引数の一覧。

* [page] Replaced by the number of the pages currently being printed
* [frompage] Replaced by the number of the first page to be printed
* [topage] Replaced by the number of the last page to be printed
* [webpage] Replaced by the URL of the page being printed
* [section] Replaced by the name of the current section
* [subsection] Replaced by the name of the current subsection
* [date] Replaced by the current date in system local format
* [time] Replaced by the current time in system local format

ヘッダ用のHTMLを用意する

渡された引数を利用して、Javascriptでヘッダを生成する。ヘッダ用のHTMLを用意して、その中にJaavscriptを書く。

下は例。

<html><head><script>
function subst() {
	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]);}
	var x=['frompage','topage','page','webpage','section','subsection','subsubsection'];
	for(var i in x) {
		var y = document.getElementsByClassName(x[i]);
		for(var j=0; j<y.length; ++j) y[j].textContent = vars[x[i]];
	}
}
</script>
</head>
<body style="border:0; margin: 0;" onload="subst()">
<table style="border-bottom: 1px solid black; width: 100%">
	<tr>
		<td class="section"></td>
		<td style="text-align:right">
		Page <span class="page"></span> of <span class="topage"></span>
		</td>
	</tr>
</table>
</body>
</html>

以下のようなHTMLを用意してみる

わざと改ページを入れて複数ページになるようにした。

<html>
<head>
	<meta charset="UTF-8">
	<title>example</title>
</head>
<body>
<div>
	<p>例の1ページ目</p>
</div>
<hr style="page-break-after:always;">

<div>
	<p>例の2ページ目</p>
</div>
<hr style="page-break-after:always;">

<div>
	<p>例の3ページ目</p>
</div>
<hr style="page-break-after:always;">

<div>
	<p>例の4ページ目</p>
</div>
<hr style="page-break-after:always;">

<div>
	<p>例の5ページ目</p>
</div>

</body>
</html>

ヘッダ用HTMLをコマンドオプションに指定してwkhtmltopdfする

ここまでの材料を、それぞれ header.html や example.html などの名前で保存しておき、以下のコマンドを実行。

$ wkhtmltopdf --header-html header.html example.html example.pdf

(example.htmlをexample.pdfにする。ヘッダにheader.htmlを挿入する。)

出来上がり

実行結果PDF ダウンロード

関連するメモ

コメント