忍者ブログ

VB.NET-TIPS などプログラミングについて

VB.NETのTIPS(小技集)を中心に、Javascript、PHP その他のプログラミングについて少し役に立つ情報を発信します。いわゆる個人的な忘備録ですが、みなさんのお役に立てれば幸いです。

  • 2023/02/01
PHP TCPDFのHTML書式の出力について（writeHTMLメソッド）

一連のPDF出力の初回の 「PHP PDF出力の方法について（TCPDF）」 の記事ではいきなり writeHTML メソッド使いましたが、今回はこのメソッドについてどの位使えるのかをテストしたいと思います。
writeHTML メソッドの引数は以下の様になっていますので、大まかに各引数について説明します。

// writeHTMLメソッド
public function writeHTML($html, $ln=true, $fill=false, $reseth=false, $cell=false, $align='')
// $html   : 出力するHTMLテキスト
// $ln     : 改行指定[true:改行]（デフォルト:true）
// $fill   : 背景の塗つぶし指定 [false:透明(既定) true:塗つぶす]（デフォルト:false）
// $reseth : [true]前回の高さ設定をリセットする。[false]引き継ぐ
// $cell   : [true]setCellPadding()で設定されたセルのpaddingを挿入する
// $align  : テキストの整列を指定
//           [L] or 空文字: 左揃え(既定)
//           [C]: 中央揃え
//           [R]: 右揃え
//           [J]: 両端揃え



各種の HTML タグをテストしてみます。




■リストタグ

HTML では ul、ol、li の3つのタグを使ってリストを作ることができますが、 「ul、li」または「ol、li」のセットで指定をします。 各リストの項目に以下の様な修飾タグをテストしてみます。

  • 画像表示タグ：<img>
  • 文字の太字（ボールド）：<b>
  • 文字のイタリック：<i>
  • 文字の下線（アンダーライン）：<u>
  • アンカータグ：<a>
  • 文字の取消線：<del>
  • フォントサイズ：<font>
  • 下付き文字要素：<sub>
  • 上付き文字要素：<sup>

<?php
require_once('../tcpdf/tcpdf.php');
// クラス生成
$pdf = new TCPDF();
// デフォルトで用意されている日本語フォント[小塚ゴシックPro M]
$strFont = "kozgopromedium";
// ヘッダ・フッタ出力設定(特にいらないが)
$pdf->setPrintHeader(false);
$pdf->setPrintFooter(false);
// 本文の日本語フォント[小塚ゴシックPro M]
$pdf->SetFont($strFont, "", 10);

// 新しいpdfページを追加
$pdf->AddPage();
// HTMLの定義
$html = <<< EOF
<h1>HTML リストタグテスト（<ol>　<li>）（<ul>　<li>）</h1>
<h4>リスト例:（<ol>　<li>）</h4>
<ol>
	<li><img src="test-logo.png" alt="" width="100" height="" border="0" />イメージ　テスト</li>
	<li><b>ボールド　テスト</b></li>
	<li><i>イタリック　テスト</i></li>
	<li><u>下線　テスト</u></li>
	<li><b>ボールド  <i>ボールド・イタリック  <u>ボールド・イタリック・下線</u></i></b></li>
	<li><a href="https://www.yahoo.co.jp/" dir="ltr">https://www.yahoo.co.jp/へのリンク</a></li>
	<li>これは改行の<br />が文字列の中に入るテストです。<br />
	    ここは２行目です。<br />
	    ここは３行目です。
    </li>
	<li>サブリスト
		<ol>
			<li>サブリスト１行目
				<ul>
					<li>さらにサブリスト１行目</li>
					<li>さらにサブリスト２行目</li>
				</ul>
			</li>
			<li>サブリスト１行目</li>
		</ol>
	</li>
	<li><del>取り消し線　テスト</del></li>
	<li><font size="+3">フォントサイズ　テスト:"+ 3"</font></li>
	<li><small>フォント:small</small> フォント:通常 <sub>下付き文字要素</sub>  通常に戻す
 <sup>上付き文字要素</sup> 通常に戻す</li>
</ol>
<h4>リスト例:（<ul>　<li>）</h4>
<ul>
	<li><b>ボールド　テスト</b></li>
	<li><i>イタリック　テスト</i></li>
	<li><u>下線　テスト</u></li>
</ul>
EOF;

// HTML書式で出力する
$pdf->writeHTML($html);

// pdf表示設定
$pdf->Output('pdfwrtHTML-1.pdf', 'I');  // 'I':ブラウザに出力する(既定)
?>

これの実行結果は以下の通りです。


■TABLEタグテスト

TABLEタグの以下の様なテスト行ってみます。

  • TABLEの border, cellspacing, cellpadding 属性
  • <th> の align 属性
  • <td> の align, bgcolor, colspan 属性
  • <td> のセル内の文字列属性（イタリック、aタグ、下付き文字、上付き文字など）
  • <td> のセル内の TABLE 記述
  • <td> の color, bgcolor, colspan, rowspan 属性

<?php
require_once('../tcpdf/tcpdf.php');
// クラス生成
$pdf = new TCPDF();
// デフォルトで用意されている日本語フォント[小塚ゴシックPro M]
$strFont = "kozgopromedium";
// ヘッダ・フッタ出力設定(特にいらないが)
$pdf->setPrintHeader(false);
$pdf->setPrintFooter(false);
// 本文の日本語フォント[小塚ゴシックPro M]
$pdf->SetFont($strFont, "", 10);

// 新しいpdfページを追加
$pdf->AddPage();
// HTMLの定義
$html = '<h2>HTML TABLEテスト</h2>
<table border="1" cellspacing="6" cellpadding="4">
    <tr>
        <td>a</td>
        <td>b</td>
    </tr>
    <tr>
        <td>c</td>
        <td>d</td>
    </tr>
</table>';

$html = '<h2>HTML TABLEテスト</h2>
<table border="1" cellspacing="3" cellpadding="4">
	<tr>
		<th>タイトル</th>
		<th align="right">右寄せタイトル</th>
		<th align="left">左寄せタイトル</th>
		<th align="center">中央揃えタイトル</th>
	</tr>
	<tr>
		<td>通常のtd</td>
		<td bgcolor="#cccccc" align="center" colspan="2">
		    <i>イタリックテスト</i>
		    aタグテスト<a href="https://www.yahoo.co.jp/">yahoo</a> 最後に改行<br />
    	    <small>フォント:small</small> フォント:通常 <sub>下付き文字要素</sub>
    	     通常に戻す <sup>上付き文字要素</sup> 通常に戻す
		    <ol>
		      <li>リスト１番目
		        <ol>
		          <li>サブリスト１番目</li>
		          <li>サブリスト２番目</li>
		        </ol>
		      </li>
		      <li>リスト２番目</li>
		    </ol>
		    <small color="#FF0000" bgcolor="#FFFF00">小文字指定「small」の文字列テスト</small>
		</td>
		<td align="center">中央揃え　td:4B</td>
	</tr>
	<tr>
		<td>
		    セルの中のTABLE<br />
            <table border="1" cellspacing="3" cellpadding="4">
                <tr>
                    <td>a</td>
                    <td>b</td>
                </tr>
                <tr>
                    <td>c</td>
                    <td>d</td>
                </tr>
            </table>
		</td>
		<td bgcolor="#0000FF" color="yellow" align="center">[背景色:青色][中央揃え]</td>
		<td bgcolor="#FFFF00" align="left">[中央揃え]<font color="#FF0000">[赤]</font>[背景色:黄色]</td>
		<td>4C</td>
	</tr>
	<tr>
		<td>セル：1A</td>
		<td rowspan="2" colspan="2" bgcolor="#FFFFCC">セル：2AA<br />セル：2AB<br />セル：2AC</td>
		<td bgcolor="#FF0000">セル：4D</td>
	</tr>
	<tr>
		<td>セル：1B</td>
		<td>セル：4E</td>
	</tr>
	<tr>
		<td>セル：1C</td>
		<td align="right" >右寄せセル：2C</td>
		<td align="left"  >左寄せセル：3C</td>
		<td align="center">中央揃えセル：4F</td>
	</tr>
</table>';

// HTML書式で出力する
$pdf->writeHTML($html);

// pdf表示設定
$pdf->Output('pdfwrtHTML-2.pdf', 'I');  // 'I':ブラウザに出力する(既定)
?>

実行結果は以下の様な表示になります。 TABLEタグの描画は普通の使い方であれば、結構できそうな感じです。


■TABLEタグテスト・その２（注意点）

引き続きTABLEタグテストを行いますが、注意点を示そうと思い以下のソースをテストしてみます。 

setPrintHeader(false);
$pdf->setPrintFooter(false);
// 本文の日本語フォント[小塚ゴシックPro M]
$pdf->SetFont($strFont, "", 10);

// 新しいpdfページを追加
$pdf->AddPage();
// HTMLの定義
$html = '<h2>HTML TABLEの中の画像データテスト</h2>
<table cellpadding="1" cellspacing="1" border="1" style="text-align:center;">
    <tr>
        <td height="50"><img src="test-logo.png" border="0" width="100" /></td>
    </tr>
    <tr style="text-align:left;   vertical-align:top;">
        <td height="50"><img src="test-logo.png" border="0" width="100" /></td>
	</tr>
    <tr style="text-align:center; vertical-align:middle;">
        <td height="50"><img src="test-logo.png" border="0" width="100" /></td>
	</tr>
    <tr style="text-align:right;  vertical-align:bottom;">
        <td height="50"><img src="test-logo.png" border="0" width="100" /></td>
	</tr>
</table>';

// HTML書式で出力する
$pdf->writeHTML($html);

// pdf表示設定
$pdf->Output('pdfwrtHTML-3.pdf', 'I');  // 'I':ブラウザに出力する(既定)
?>

実行結果は以下の様な表示になります。

画像の縦の配置を tr タグのスタイルで style="vertical-align:middle;" などと指定したのですが、常にTOP位置での表示になります。
HTML ソースでこれを以下の様に記述して、ブラウザで表示させると、正しい表示になります。

<html>
<head>
<meta charset="utf-8">
<title>HTML TABLE</title>
</head>
<body>
<h2>HTML TABLEの中の画像データテスト</h2>
<table cellpadding="1" cellspacing="1" border="1" style="text-align:center;" width="800">
    <tr>
        <td height="50"><img src="test-logo.png" border="0" width="100" /></td>
    </tr>
    <tr style="text-align:left;   vertical-align:top;">
        <td height="50"><img src="test-logo.png" border="0" width="100" /></td>
	</tr>
    <tr style="text-align:center; vertical-align:middle;">
        <td height="50"><img src="test-logo.png" border="0" width="100" /></td>
	</tr>
    <tr style="text-align:right;  vertical-align:bottom;">
        <td height="50"><img src="test-logo.png" border="0" width="100" /></td>
	</tr>
</table>
</body>
</html>

実行結果は以下の様な表示になります。


writeHTML メソッドでは、どうも css (スタイル)の指定で style="vertical-align:xxxxx;" は効かない様です。

ネットで調べると以下の css (スタイル)しか指定できない様です。
font-family, font-size, font-weight, font-style, color, background-color, text-decoration, width, height, text-align

vertical-align が使えないとなると改行などで位置合わせをする必要がありそうです。


■前景色、背景色の色名テスト

TCPDF ではPHPのプログラムでWEB上のカラー名を宣言してありますので、それを利用できます。
TCPDF_COLORS クラスのstatic宣言されている $webcolor がそれで、キーにカラー名、値にRGBの16進表記の数値文字列が定義されています。
以下に使用例を示します。

<?php
require_once('../tcpdf/tcpdf.php');
// クラス生成
$pdf = new TCPDF();
// デフォルトで用意されている日本語フォント[小塚ゴシックPro M]
$strFont = "kozgopromedium";
// ヘッダ・フッタ出力設定(特にいらないが)
$pdf->setPrintHeader(false);
$pdf->setPrintFooter(false);
// 本文の日本語フォント[小塚ゴシックPro M]
$pdf->SetFont($strFont, "", 10);

// 新しいpdfページを追加
$pdf->AddPage();

// HTMLの定義
$strOut = '<h1>HTML カラー名テスト</h1>';
$strOut .= '<h2>前景色</h2>';

$strColor = 'red';
$strColorHex = TCPDF_COLORS::$webcolor[$strColor];
$strOut .= '<span color="#'.$strColorHex.'">'.$strColor.'-test</span><br />';

$strColor = 'green';
$strColorHex = TCPDF_COLORS::$webcolor[$strColor];
$strOut .= '<span color="#'.$strColorHex.'">'.$strColor.'-test</span><br />';

$strColor = 'blue';
$strColorHex = TCPDF_COLORS::$webcolor[$strColor];
$strOut .= '<span color="#'.$strColorHex.'">'.$strColor.'-test</span><br />';

$pdf->writeHTML($strOut, true, false, true, false, '');

$strOut = '<h2>背景色</h2>';

$strColor = 'red';
$strColorHex = TCPDF_COLORS::$webcolor[$strColor];
$strOut .= '<span bgcolor="#'.$strColorHex.'" color="white">'.$strColor.'-test</span><br />';

$strColor = 'green';
$strColorHex = TCPDF_COLORS::$webcolor[$strColor];
$strOut .= '<span bgcolor="#'.$strColorHex.'" color="white">'.$strColor.'-test</span><br />';

$strColor = 'blue';
$strColorHex = TCPDF_COLORS::$webcolor[$strColor];
$strOut .= '<span bgcolor="#'.$strColorHex.'" color="white">'.$strColor.'-test</span><br />';

$pdf->writeHTML($strOut, true, false, true, false, '');

// pdf表示設定
$pdf->Output('pdfwrtHTML-4-1.pdf', 'I');  // 'I':ブラウザに出力する(既定)
?>

実行結果は以下の様な表示になるはずです。



ちなみに宣言されているカラー名を全て表示すると以下の様になります。

<?php
require_once('../tcpdf/tcpdf.php');
// クラス生成
$pdf = new TCPDF();
// デフォルトで用意されている日本語フォント[小塚ゴシックPro M]
$strFont = "kozgopromedium";
// ヘッダ・フッタ出力設定(特にいらないが)
$pdf->setPrintHeader(false);
$pdf->setPrintFooter(false);
// 本文の日本語フォント[小塚ゴシックPro M]
$pdf->SetFont($strFont, "", 10);

// 新しいpdfページを追加
$pdf->AddPage();

// HTMLの定義
$strOut = '<h1>HTML カラー名テスト</h1>';

$strOut .= '<h2>前景色</h2>';
foreach(TCPDF_COLORS::$webcolor as $k => $v) {
	$strOut .= '<span color="'.$k.'">'.$v.'</span> ';
}

$strOut .= '<h2>背景色</h2>';
foreach(TCPDF_COLORS::$webcolor as $k => $v) {
	$strOut .= '<span bgcolor="'.$k.'" color="#404040">'.$v.'</span> ';
}

$pdf->writeHTML($strOut, true, false, true, false, '');

// pdf表示設定
$pdf->Output('pdfwrtHTML-4-2.pdf', 'I');  // 'I':ブラウザに出力する(既定)
?>

実行結果は以下の様な表示になるはずです。












PR
  • PHP
  • 0CM

コメント

コメントを書く