TCPDFを利用してWordPressのページを動的にPDF出力してみよう⑤【ページ出力編】
こんにちは、webエンジニアのゾノ( @ozonosho )です。
さて、昨日のブログに続いて今回もTCPDFを利用してWordPressのページを動的にPDF出力する方法をご紹介いたします。全５回に分けて紹介していきますのでどうぞお付き合いください。
第５回目となる今回はWordPressのページを動的にPDF出力する方法をご紹介します！
まずは基本的なPDF出力コードをおさらい
TCPDFの機能を利用するためには、テーマ直下に置いた『print.php』ファイル内に下記のようなコードを貼りつけます。
<?php
//設置したPHPライブラリを読み込み
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が開きます。
上記コードのとおり、「writeHTML」関数に出力したいHTMLを渡してあげればその内容をPDFに出力できるので、WordPressの関数「get_post」や「get_the_content」を利用してページのコンテンツを渡せばOKだと思ったのですが、、、
WordPressの関数を外部ファイルで利用するために必要な下記コードをprint.phpに読み込ませると、TCPDF側でPDFを出力するときにエラーが出ます。
<?php require_once ('./wp-blog-header.php'); //相対パスで指定 ?>
（WordPressの設定を読み込もうとするとエラーが出る！）
そんなわけで、PDFに表示させたいページのデータはフォームを経由してPOSTやGETで渡してあげる必要があります。PDFの中身を丸っと渡すので、現実的にはPOST一択だと思います。
WordPressページ内にprint.phpにページデータを渡すフォームを用意する
僕が運営するサイト『未来地図』で現在実施している「不登校生の親の気持ちアンケート」のPDFダウンロードを例に見ていきましょう。
ページを開いたら、下図の赤矢印の箇所にある「PDF版ダウンロード」ボタンをクリックしてみてください。
「PDF版ダウンロード」ボタンをクリックすると、ページの表示内容がPDFで出力されるのを確認できると思います。
この実装では、「PDF版ダウンロード」ボタン箇所をフォームで作っており、非表示にしたtextarea項目にページの情報を入れたうえでPOSTで送信しています。
ボタン部分のコードはこんな感じです。
<form class="pdf" method="post" action="<?php echo get_stylesheet_directory_uri(); ?>/print.php"> <textarea style="display: none;" name="page_content"><?php the_content(); ?></textarea> <input type="submit" value="PDF版ダウンロードはこちら"> </form>
inputタグをtype：hiddenで隠して送信するほうがスマートかなと思ったのですが、inputタグのvalueにaタグのダブルクオーテーションなどが入ると送信先でHTMLコードを正しく拾えなかったのでtextarea項目に入れて送信しています。
こんな感じで作れば、WordPressのページ内から好きな情報をprint.php（＝TCPDFの出力用ファイル）に渡すことができます。
受け取ったデータを使ってTCPDFでPDF出力する
ここまで出来れば、あとはprint.php内でPOSTされたデータを受け取って出力すればOKです。
最終的には下記のようなコードになります。
<?php
//TCPDFのライブラリを読み込み
include (dirname(__FILE__).'/lib/pdf/tcpdf.php');
class MYPDF extends TCPDF {
//フッターにコピーライト情報を入れる
public function Footer() {
$font = new TCPDF_FONTS();
$myFont = $font->addTTFfont(dirname(__FILE__).'/font/rounded-mplus-1c-regular.ttf');
$this->SetY(-15);
$this->SetFont($myFont, 'I', 8);
$this->Cell(0, 10, 'Copyright©Cree 2020 All rights reserved. https://tsukuriba.co.jp', 0, false, 'C', 0, '', 0, false, 'T', 'M');
}
}
//送信されたページ情報を受け取る
$content = $_POST['content'];
//TCPDFインスタンスを作成
$tcpdf = new MYPDF();
//日本語フォントのセット
$font = new TCPDF_FONTS();
$myFont = $font->addTTFfont(dirname(__FILE__).'/font/rounded-mplus-1c-regular.ttf');
$tcpdf->SetFont($myFont, "", 12);
//ヘッダー：表示しない
$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
<div class="pdf-page">
受け取った情報の前に何か足したければここに追加
$content
受け取った情報の後に何か足したければここに追加
</div>
EOF;
//適用するCSS
$css = <<< EOF
<style>
pdf-page {
line-height: 1.8;
}
.pdf-page h1 {
font-size: 22px;
color: #f58282;
text-align: center;
}
</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ドキュメントの内容を文字列として出力する。
?>
PDF側ではサイトと同じCSSプロパティは使えないため、こっちはこっちで定義してあげてください。
また余白などを作るにはtableレイアウトにする必要があるので、実際には受け取ったPOSTデータを「str_replace」などでtableタグに置換してあげるとよりPDFのデザインを調整することができます。
先ほど例として挙げたサイトの実装コードをそのまま載せるとこんな感じです。
<?php
include (dirname(__FILE__).'/lib/pdf/tcpdf.php');
class MYPDF extends TCPDF {
//フッターにコピーライト情報を入れる
public function Footer() {
$font = new TCPDF_FONTS();
$myFont = $font->addTTFfont(dirname(__FILE__).'/font/rounded-mplus-1c-regular.ttf');
$this->SetY(-15);
$this->SetFont($myFont, 'I', 8);
$this->Cell(0, 10, 'Copyright©未来地図 2020 All rights reserved. https://miraitizu.com', 0, false, 'C', 0, '', 0, false, 'T', 'M');
}
}
//送信されたページ情報を受け取る
$content = $_POST['content'];
$content = str_replace('<div class="qa-box">', '<table cellspacing="10" cellpadding="15">', $content);
$content = str_replace('</div>', '</table>', $content);
$content = str_replace('<p>', '<tr><td>', $content);
$content = str_replace('</p>', '</td></tr>', $content);
//TCPDFインスタンスを作成
$tcpdf = new MYPDF();
//日本語フォントのセット
$font = new TCPDF_FONTS();
$myFont = $font->addTTFfont(dirname(__FILE__).'/font/rounded-mplus-1c-regular.ttf');
$tcpdf->SetFont($myFont, "", 12);
//ヘッダー：表示しない
$tcpdf->setPrintHeader(false);
//フッター：表示しない
//$tcpdf->setPrintFooter(false);
//余白を設定
$tcpdf->SetMargins(15, 15, 15);
//PDFファイルのタイトルを設定
$tcpdf->SetTitle('不登校生の親の気持ちアンケート');
//PDFファイルの作成者を設定
$tcpdf->SetAuthor('miraitizu.com');
//1ページ目を作成
$tcpdf->AddPage();
//自動改ページをONにする
$margin = 15;
$tcpdf->SetAutoPageBreak(true, $margin);
//表示させるHTMLコード
$content = <<< EOF
<div class="page-results">
<h1>不登校生の親の気持ちアンケート<br>【回答結果】</h1>
$content
<table class="message" cellspacing="10" cellpadding="15">
<tr>
<td>
<h2 id="ex" class="ex">当アンケートについて</h2>
<p>
当アンケートは、不登校生のママたちが運営するサイト『未来地図』のスタッフ「Kun」さんが自身のブログで企画＆募集してまとめてくれたものをベースにして、未来地図サイトで全国の保護者より回答を集めた内容になります。
</p>
<p>
経験者の声は、深く重みがあり愛に溢れています。
ご自身で読んでいただくことに加えて、家族との話し合い、学校との話し合いなどで自由に役立てていただけたら嬉しいです。
</p>
<p>
また、数多くの保護者の方々の声を知るため、不登校生の保護者の方は未来地図サイトより『不登校生の親の気持ちアンケート』に回答ご協力いただけますと幸いです。
</p>
<p>
※未来地図HP
<br><a href="https://miraitizu.com">https://miraitizu.com</a>
</p>
</td>
</tr>
</table>
</div>
EOF;
//適用するCSS
$css = <<< EOF
<style>
.page-results h1 {
font-size: 22px;
color: #f58282;
text-align: center;
}
.page-results h2 {
font-size: 17px;
color: #333;
text-align: center;
}
.page-results h3 {
font-size: 15px;
color: #f58282;
text-align: center;
}
.page-results table {
}
.page-results table tr {
background-color: #fff;
page-break-inside: avoid;
}
.page-results table td {
font-size: 11px;
line-height: 1.8;
color: #311;
background-color: #fffef5;
page-break-inside: avoid;
}
.page-results .message td {
background-color: #fff;
}
.page-results a {
color: #f58282;
}
</style>
EOF;
$html = $css . $content;
//HTMLコードをセット
$tcpdf->writeHTML($html);
//PDFとして出力
$tcpdf->Output('results.pdf', 'I');
?>
（メチャメチャ頑張ってサイトの表示に近づけました…！）
おわりに
以上、全５回に渡ってTCPDFを利用してWordPressのページを動的にPDF出力する方法をご紹介させていただきました。
この連載ブログは、しばらくしたら１つの記事にまとめてしまおうと考えています。
そのときには今回掲載しきれなかったヘッダーのカスタマイズ方法なんかも掲載する予定なので、興味ある方は是非またサイトを訪れていただけると嬉しいです(*´`)
当サイトではWordPressのカスタマイズ依頼を請け負っています。実現したい機能・要望がある方はぜひ下記ページよりご相談ください。
