mPDFライブラリを使って、カレンダー作成ページを作ったのですが、いろいろとハマってしまって、めちゃくちゃ時間ロスしました。備忘録としてまとめます。
border-bottomが効かない
tableでなぜかborder-bottomが効かない。カレンダーだから格子状に線を入れたいのに、下だけ線が入らない。どうしてだか分らないが、どうやらborder-bottomが効かないらしい。
border: solid 1px #000; とかで全方向に線を入れといて、いらない線を消す方法でなんとかなった。
table {
border-top: solid 1px #000;
border-left: solid 1px #000;
}
th {
border: solid 1px #000;
border-top: none;
border-left: none;
}
td{
border: solid 1px #000;
border-top: none;
border-left: none;
}参考：https://qiita.com/86_nagatomo/items/4b0b4ec511e35b5cdafa
横ならべの仕方
新しめのflex、calcなどは使えない。
floatは使えるが、width指定は必ずすること。width指定してないとうまく動きません。
使えるcssはmPDFマニュアルに羅列記載されています。
mPDF Manual – CSS & Stylesheets
position: absolute 問題
position: absoluteが、body直下の要素にしか効かない。
position: absoluteは、なぜか外部cssファイルに書いても効かないので、htmlにstyleを直打ちでなんとか効いた。よう分からん。
そしてbodyにrelativeの記述は特にいらない。
<div id="footer" style="position: absolute; bottom: 16mm; left: -2mm; right: 0; margin: auto;">z-indexが効かない？
position: absoluteを指定できたはいいが、z-indexがなぜか効かない。下に記載した要素ほど上に上に重なっていくようなので、重なって一部隠れてほしかったfooterを先に書いて、下に重なるようにした。
<div id="header">header</div>
<div id="footer" style="position: absolute; bottom: 16mm; ">footer</div>
<div id="main" style="position: absolute; top: 62mm; ">main</div>hr がゆうことをきかない
やり方が悪かったのかもですが、hrへのpaddingやmarginが反映されず、hr同士の間隔を調節できなかった。hrにdashedやらdottedやらのデザインも効かない。
hrを<p>に変更してborderを持たせて対応した。
<div id="footer">
<p class="bg"></p>
<p class="bg"></p>
<p class="bg"></p>
</div>.bg {
border-top: dotted 1px #000;
margin-top: 15px;
}bodyのpadding・marginリセットcssは、styleで書かない
NG
/*---------------------
reset
---------------------*/
body {
margin: 0;
padding: 0;
}
cssファイルにresetとしたくなりますが、うまく効きません…。
OK
$mpdf = new \Mpdf\Mpdf([
'mode' => 'utf-8', //文字コードを指定
'format' => 'A4-P', //用紙のサイズと向き P:縦・L:横
'margin_left' => 0, //余白(左)
'margin_right' => 0, //余白(右)
'margin_top' => 0, //余白(上)
'margin_bottom' => 0, //余白(下)
とPHPに記述して動きました。
htmlとphpコードの混在の書き方
<?php
require_once __DIR__.'/../mpdf/vendor/autoload.php';
$mpdf = new \Mpdf\Mpdf([
'fontDir' => array_merge($fontDirs, [
__DIR__. '/../mpdf/vendor/mpdf/mpdf/ttfonts',
]),
'fontdata' => $fontData + [
'ipag' => [
'R' => 'ipag.ttf',
'B' => 'ipag.ttf',
],
],
'default_font' => 'ipag'
]);
$design = $_POST['design']; //なんかいろいろ変数指定してみたりPHPコード書いた後…
$html='<!doctype html><html><head><meta charset="utf-8"><title>タイトル</title>
<link href="../css/base.css" rel="stylesheet" type="text/css">
</head><body>
<div id="header"><h1 class="h1-'.$design.'">' .$design. '</h1>';
$week = $_POST['week'];
$html.='<h2>h2 title</h2></div>
・
・
$mpdf->WriteHTML($html);
$mpdf->Output("name.pdf","I");htmlを書くときは、「$html=」をつける。2回目以降は「$html.=」とする。
foreach構文書いたり、if文書いたりするときはその都度、「$html」を終わらせてからPHPを書き、再度「$html.=」を書いたあと、htmlの記述を続ける。
フォントの指定
fontdata名は小文字で書く。大文字だとエラーになる。
NG
'fontdata' => $fontData + [
'IPAG' => [
'R' => 'ipag.ttf',
'B' => 'ipag.ttf',
],
],
OK
'fontdata' => $fontData + [
'ipag' => [
'R' => 'ipag.ttf',
'B' => 'ipag.ttf',
],
],
fontdata名は自分で自由に名前を付けていいのですが、大文字で作ってしまうとcssでfont-family:指定するときにエラーになりました。ttfファイル名「〇〇.ttf」の〇〇の部分は、元のフォントに大文字が使われていれば、大文字入ってOKです。
ttcの読み込み方が分からない…
mPDF Manual では、ttcも指定できるようなのですが、うまくできませんでした。なので、ttcを分解してttfにしてから読み込みました。
背景画像pngはpng-8で
画像をpngで作成する場合は、png-8形式で作成する。png24形式だとエラーになる。
用紙サイズ
どうやらmpdfコードでA4サイズに設定した場合、pdfファイルは210×297mmではなく、216×303mmみたい。
mPDFで作ってみたサイト
そんなこんなで、mPDFの習性にドはまりしながらも、私が作ったページがこちらです。
「KajiLabo.paper｜カレンダー」
コメント