2020.04.07

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

//設置した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

<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が開きます。

サンプルPDFはこちら

上記コードのとおり、「writeHTML」関数に出力したいHTMLを渡してあげればその内容をPDFに出力できるので、WordPressの関数「get_post」や「get_the_content」を利用してページのコンテンツを渡せばOKだと思ったのですが、、、

WordPressの関数を外部ファイルで利用するために必要な下記コードをprint.phpに読み込ませると、TCPDF側でPDFを出力するときにエラーが出ます。

<?php require_once ('./wp-blog-header.php'); //相対パスで指定 ?>

1	<?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>

<form class="pdf" method="post" action="<?php echo get_stylesheet_directory_uri(); ?>/print.php">

</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-&gt;Output($name, 'I');
//上記の「I」は出力の型。↓の4パターンがある
//I: ブラウザに出力する(既定)、保存時のファイル名が$nameで指定した名前になる。
//D: ブラウザで(強制的に)ダウンロードする。
//F: ローカルファイルとして保存する。
//S: PDFドキュメントの内容を文字列として出力する。

?>

<?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);

}

//送信されたページ情報を受け取る

$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

受け取った情報の前に何か足したければここに追加

$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');

?>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

<?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);

}

//送信されたページ情報を受け取る

$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

<h1>不登校生の親の気持ちアンケート<br>【回答結果】</h1>

$content

<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のカスタマイズ依頼を請け負っています。実現したい機能・要望がある方はぜひ下記ページよりご相談ください。

あなたのサイトに理想の機能を実装！WordPressカスタマイズサービス

本サービスはあなたのWordPressサイトに理想の機能を実装するサービスとなります。どのような機能・要望でも実現可能です！ Wo......

→この記事を読む

TCPDFを利用してWordPressのページを動的にPDF出力してみよう⑤【ページ出力編】

まずは基本的なPDF出力コードをおさらい

WordPressページ内にprint.phpにページデータを渡すフォームを用意する

受け取ったデータを使ってTCPDFでPDF出力する

おわりに

人気の特集

人気のブログ

最近のブログ

主な運営サービス