2020.04.04

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

こんにちは、webエンジニアのゾノ( @ozonosho )です。

さて、昨日のブログに続いて今回もTCPDFを利用してWordPressのページを動的にPDF出力する方法をご紹介いたします。全5回に分けて紹介していきますのでどうぞお付き合いください。

第2回目となる今回はTCPDFの基本的な実装方法をご紹介します!

TCPDFの基本的な実装方法

TCPDFの機能を利用するために、まずは前回WordPress内に配置したPHPライブラリを読み込んで処理をするためのファイルを作りましょう。

テーマ直下に『print.php』と名付けたファイルを用意してください。ファイルを用意したら、中身に下記のコードを貼りつけます。

このphpファイルを実際に実行してみると下記のサンプルPDFが開きます。

サンプル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の基本的な実装方法をご紹介させていただきました。

次回は【フォントカスタマイズ編】!
全5回に分けてTCPDFを利用してWordPressのページを動的にPDF出力する方法を紹介していくので、次回もぜひご覧いただけると嬉しいです(*´`)

当サイトではWordpressのカスタマイズ制作依頼を請け負っています。運営中のサイトで何かお困りのことがある方は、下記の記事を参照のうえ気軽にご相談ください。

どんな機能・要望でもOK!『Wordpressのカスタマイズ制作』はじめました。

こんにちは、webエンジニアのゾノ( @ozonosho )です。 このたびWordpressのカスタマイズ制作をはじめました。......

→この記事を読む
チャレンジを応援する無料オンラインコミュニティ運営中!

生きづらさを抱える人のチャレンジを応援する無料オンラインコミュニティ『Cree』をスタートしました。ただいま参加者70名!お互いの目標を共有したり、就労・就職のサポートするサービスを無料で提供しています。

オンラインコミュニティの詳細はこちら

ゾノについて

お仕事のご相談はこちら