HTML / CSSで作成したコンテンツをPDFファイルで出力する方法(TCPDF)
2025/06/21
HTML / CSSで作成したコンテンツをPDFファイルで出力させたい。以前mpdfを用いてPDF化する方法をメモったが今回はTCPDFというライブラリを使用してみたかった。以下に対応方法をメモ。
TCPDFライブラリに関して
以下よりダウンロードする。
https://github.com/tecnickcom/tcpdf
尚、リファレンスについては非公式かと思われるが以下サイトが参考になった。
http://www.t-net.ne.jp/~cyfis/tcpdf/index.html
ソースコード
<?php
include('./TCPDF/tcpdf.php');
$tcpdf = new TCPDF();
$tcpdf->AddPage();
$tcpdf->SetFont('kozminproregular', '', 10);
$html = <<< EOF
<style>
.fcolor-red{
color: #f00;
}
</style>
<h1>テスト</h1>
<div class="fcolor-red">赤文字</div>
<img src="./001.jpg" width="50px">
EOF;
$tcpdf->writeHTML($html);
$tcpdf->Output('test.pdf');
注意点
HTML / CSSで作成したコンテンツを簡単にPDF化できるもののCSSに関しては制限が多い。そのため出力されるPDFは非常にシンプルなデザインになりがちで業務で使えるかと言われると微妙なところ。
テキストは問題無く表示されるので文章メインのサイトをスクレイピングし、そのデータをPDF化させるとかなら使えるかも。
関連記事
-
-
バニラJavaScript対応の日時ピッカー「Flatpickr」ライブラリの利用方法
サイト内に日時ピッカーを実装する場合、jQueryの「DateTimePicke ...
-
-
JavaScriptでオブジェクトをzlib圧縮してCookieに保存できる「zcookies」ライブラリの利用方法
あるシステムでCookieを保存している部分があった。ただ、日本語を保存している ...
-
-
JavaScriptにて「QRCode.js」ライブラリを利用してQRコードを生成する方法
PHPが使えない環境で動的にQRコードを生成したかった。以前にメモしたAPI等の ...
-
-
JavaScriptの「Day.js」ライブラリで日付の比較を行う方法
JavaScriptの日時・時刻用ライブラリ「Day.js」を用いて日付の比較を ...
-
-
横スクロール可能な要素を視覚的に分かりやすくする「ScrollHint」ライブラリの利用方法
横長のtableを設置し、CSSのoverflowで横スクロール可能にしてもユー ...