ページ
生成する PDF によって含まれるページはサイズ・向き・改ページの箇所など様々な制御が求められます。このページではそれらの表現について解説します。
サイズ
PDF のサイズはpdfOptionsオブジェクトのformatプロパティ、またはwidthとheightプロパティで指定できます。
詳細はPDF オプションを参照してください。
例: A3
A3 サイズ（420mm × 297mm）の PDF を生成する例です。フォントサイズを 40mm に設定しています。
{
"pdfOptions": {
"format": "A3" /* A3サイズを指定 */
},
"html": '
<html>
<head>
<style>
h1 { font-size: 40mm; }
</style>
</head>
<body>
<h1>Page</h1>
</body>
</html>'
}
例: A5
A5 サイズ（148mm × 210mm）の PDF を生成する例です。A3 の例と同じフォントサイズを使用していますが、ページサイズが小さいため相対的に大きく表示されます。
{
"pdfOptions": {
"format": "A5" /* A5サイズを指定 */
},
"html": '
<html>
<head>
<style>
h1 { font-size: 40mm; } /* A3の例と同じフォントサイズ */
</style>
</head>
<body>
<h1>Page</h1>
</body>
</html>'
}
横向き
デフォルトでは縦向きで PDF が生成されます。landscapeプロパティをtrueに設定することで横向きに変更できます。
{
"pdfOptions": {
"format": "A5",
"landscape": true /* 横向きに設定 */
},
"html": '
<html>
<head>
<style>
h1 { font-size: 40mm; }
</style>
</head>
<body>
<h1>Page</h1>
</body>
</html>'
}
複数ページ
自動改ページ
コンテンツが指定したページサイズを超える場合、自動的に改ページされます。以下の例では、長いテキストが A5 サイズのページに自動的に分割されます。
{
"pdfOptions": {
"format": "A5"
},
"html": '
<html>
<head>
<style>
p { font-size: 10mm; }
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet... /* 長いテキストコンテンツ */
</p>
</body>
</html>'
}
改ページなし
ページサイズを明示的に指定することで、改ページを防ぐことができます。以下の例では、A5 の横幅（148mm）とその 2 倍の高さ（420mm）を指定して 1 枚の長い PDF を生成します。
{
"pdfOptions": {
"width": "148mm", /* A5の横幅 */
"height": "420mm" /* A5の高さの2倍 */
},
"html": '
<html>
<head>
<style>
p { font-size: 10mm; }
</style>
</head>
<body>
<p>
Lorem ipsum dolor sit amet... /* 長いテキストコンテンツ */
</p>
</body>
</html>'
}
任意の改ページ
CSS で各ページのサイズを指定することで、任意の位置で改ページできます。以下の例では、2 つのdiv要素に A4 サイズを指定し、それぞれに異なる背景色を設定しています。
{
"pdfOptions": {
"format": "A4", /* A4サイズを指定 */
"printBackground": true /* 背景色を表示するために必要 */
},
"html": '
<html>
<head>
<style>
body { margin: 0; padding: 0; }
.page { width: 210mm; height: 297mm; } /* A4サイズ */
.page1 { background-color: #d9f99d; } /* 黄緑色の背景 */
.page2 { background-color: #a5f3fc; } /* 水色の背景 */
h1 { font-size: 40mm; }
</style>
</head>
<body>
<div class="page page1">
<h1>Page 1</h1>
</div>
<div class="page page2">
<h1>Page 2</h1>
</div>
</body>
</html>'
}