TCPDFを利用してWordPressのページを動的にPDF出力してみよう②【基本編】
こんにちは、webエンジニアのゾノ( @ozonosho )です。
さて、昨日のブログに続いて今回もTCPDFを利用してWordPressのページを動的にPDF出力する方法をご紹介いたします。全５回に分けて紹介していきますのでどうぞお付き合いください。
第２回目となる今回はTCPDFの基本的な実装方法をご紹介します！
TCPDFの基本的な実装方法
TCPDFの機能を利用するために、まずは前回WordPress内に配置したPHPライブラリを読み込んで処理をするためのファイルを作りましょう。
テーマ直下に『print.php』と名付けたファイルを用意してください。ファイルを用意したら、中身に下記のコードを貼りつけます。
<?php
//TCPDFのライブラリを読み込み
include (dirname(__FILE__).'/tcpdf/tcpdf.php');
//TCPDFインスタンスを作成
$tcpdf = new TCPDF();
//日本語フォントのセット
$tcpdf->SetFont('kozminproregular', "", 10);
//ヘッダー表示制御（非表示）
$tcpdf->setPrintHeader(false);
//ヘッダー表示制御（非表示）
$tcpdf->setPrintFooter(false);
//余白を設定
$tcpdf->SetMargins(15, 15, 15);
//PDFファイルのタイトルを設定
$tcpdf->SetTitle('PDFタイトル');
//PDFファイルの作成者を設定
$tcpdf->SetAuthor('ゾノ');
//1ページ目を作成
$tcpdf->AddPage();
//自動改ページをONにする
$margin = 15;
$tcpdf->SetAutoPageBreak(true, $margin);
//表示させるHTMLコード
$content = <<< EOF
<h1>タイトル</h1>
<table>
<tr>
<td>
<p>
ここに文章がならびます。ここに文章がならびます。ここに文章がならびます。ここに文章がならびます。ここに文章がならびます。ここに文章がならびます。ここに文章がならびます。ここに文章がならびます。
</p>
<p>
ここに文章がならびます。ここに文章がならびます。ここに文章がならびます。ここに文章がならびます。ここに文章がならびます。ここに文章がならびます。ここに文章がならびます。ここに文章がならびます。
</p>
</td>
</tr>
</table>
EOF;
//適用するCSS
$css = <<< EOF
<style>
h1 {
font-size: 22px;
color: #18c1c4;
text-align: center;
}
table td {
line-height: 1.8;
}
</style>
EOF;
$html = $css . $content;
//HTMLコードをセット
$tcpdf->writeHTML($html);
//PDFとして出力
$name = 'sample.pdf'; //ファイル名称
$tcpdf->Output($name, 'I');
//上記の「I」は出力の型。↓の4パターンがある
//I: ブラウザに出力する(既定)、保存時のファイル名が$nameで指定した名前になる。
//D: ブラウザで(強制的に)ダウンロードする。
//F: ローカルファイルとして保存する。
//S: PDFドキュメントの内容を文字列として出力する。
?>
このphpファイルを実際に実行してみると下記のサンプルPDFが開きます。
print.php内の処理内容については、処理単位でコードに注釈を入れてあるので参考にしてください。
サポートされているHTMLタグとCSSプロパティが少ないので注意が必要
PDFに表示させるHTMLコードは、一部のHTMLタグとCSSプロパティしかサポートされていません。
- ◆サポートされているHTMLタグ
- a, b, blockquote, br, dd, del, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, img, li, ol, p, pre, small, span, strong, sub, sup, table, tcpdf, td, th, thead, tr, tt, u, ul
- ◆サポートされているCSSプロパティ
- font-family, font-size, font-weight, font-style, color, background-color, text-decoration, width, height, text-align
HTMLタグはまぁ良いとしてCSSプロパティにはかなり制限があるので、デザインを組み立てるのはなかなか難しいです。
marginやpaddingが利用できないので、コンテンツ同士の余白をつくるためにはtableレイアウトで組むのがおすすめです。tableタグの「cellspacing属性」「cellpadding属性」は利用できるので、これらを利用して実装すれば多少は思い通りのレイアウトにすることができます。
中身が固定のPDFを表示させるだけであればこれで完了
今回の連載では、WordPressのページ内容を元に動的にPDFを作成するための処理を実装していきますが、中身が固定のPDFを表示させるだけであればここまでの処理で完了です。
作成したPDFはweb上に表示させることもダウンロードさせることもできるので、ぜひ色々とお試しください。
おわりに
以上、今回はTCPDFの基本的な実装方法をご紹介させていただきました。
次回は【フォントカスタマイズ編】！
全５回に分けてTCPDFを利用してWordPressのページを動的にPDF出力する方法を紹介していくので、次回もぜひご覧いただけると嬉しいです(*´`)
当サイトではWordPressのカスタマイズ依頼を請け負っています。実現したい機能・要望がある方はぜひ下記ページよりご相談ください。
