前書き
帳票をPDFで作成する方が楽ではあるが、PDFをダウンロードさせる実装をしたりパスワードをかけたりと何かと面倒。
紙やローカル保存をしたければ、ブラウザ印刷を使って行ってくれればいいのではないかと思い、htmlで帳票を作成する際の参考となるソースを公開する。
注意
Internet Explorerではレイアウトが崩れてしまいます。
（tableタグ内のimgではmax-widthが機能しないらしいので、回収方法を検討中）
実機
帳票画面
帳票画面印刷時
ソース
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="#" />
<style type="text/css">
@media print {
/*印刷時に隠していた要素を表示*/
.print-on {
display: inline !important;
}
/*印刷時に要素を非表示*/
.print-off {
display: none !important;
}
body {
/*印刷時にA4に収まる様に縮小*/
zoom: 95%;
}
}
@page {
/*印刷用紙をA4指定*/
size: A4;
margin: 0mm;
}
</style>
<script type="text/javascript"></script>
<title>契約内容</title>
</head>
<body style="max-width:1000px; width:80%; margin: 0 auto; margin-top: 10px;">
<div class="print-on" style="display: none;">20YY/XX/DD</div>
<div class="print-off" style="font-size: 25px;">検索</div>
<hr class="print-off">
<table class="print-off">
<tbody>
<tr>
<td>
<input type="text" name="name" size="30" maxlength="20">
<input type="submit" value="検索">
</td>
</tr>
</tbody>
</table>
<div class="print-off" style="font-size: 25px;">検索結果</div>
<hr class="print-off">
<table style="border-collapse: collapse;">
<tbody>
<tr>
<td style="width: 50px; padding: 0px;">
<img src="https://placehold.jp/70x70.png" alt="No image"
style="margin: 0px; padding: 0px;vertical-align: bottom;">
</td>
<td style="width: 950px; border-bottom: 3px solid; padding: 0px;vertical-align:bottom;font-size: 30px;">
契約内容
</td>
</tr>
</tbody>
</table>
<table style="border: 1px solid; border-collapse: collapse;margin-top: 10px;" rules="all">
<tbody>
<tr>
<td style="width: 150px; min-width: 80px; border: 1px solid;background-color: #CCFFFF;">証券番号</td>
<td style="width: 350px; word-break:break-all;border: 1px solid;">123456789012345</td>
<td style="width: 150px; min-width: 80px; border: 1px solid;background-color: #CCFFFF;">状態</td>
<td style="width: 350px; word-break:break-all;border: 1px solid;">有効（一部条件有）</td>
</tr>
<tr>
<td style="border: 1px solid;background-color: #CCFFFF;">名称</td>
<td style="border: 1px solid;" colspan="3">ABCあいうえおXYZＡＢＣ</td>
</tr>
<tr>
<td style="border: 1px solid;background-color: #CCFFFF;">保険者</td>
<td style="border: 1px solid;">サンプル 太郎</td>
<td style="border: 1px solid;background-color: #CCFFFF;">生年月日</td>
<td style="border: 1px solid;word-break:break-all;">1971/01/01</td>
</tr>
<tr>
<td style="border: 1px solid;background-color: #CCFFFF;">契約日</td>
<td style="border: 1px solid;word-break:break-all;" colspan="3">2000/01/01</td>
</tr>
<tr>
<td style="border: 1px solid;background-color: #CCFFFF;">月額料金</td>
<td style="border: 1px solid;">1,500円</td>
<td style="border: 1px solid;background-color: #CCFFFF;">払込方法</td>
<td style="border: 1px solid;">クレジットカード</td>
</tr>
<tr>
<td style="border: 1px solid;background-color: #CCFFFF;">期間</td>
<td style="border: 1px solid;">10年</td>
<td style="border: 1px solid;background-color: #CCFFFF;">払込期間</td>
<td style="border: 1px solid;">一時払い</td>
</tr>
</tbody>
</table>
<p> </p>
<table style="border: 1px solid; margin: 1px; height: 90px; border-collapse: collapse;">
<tbody>
<tr>
<td style="width: 300px; border: 1px solid;background-color: #CCFFFF;">ＸＸＸＸ</td>
<td style="width: 200px; border: 1px solid;background-color: #CCFFFF;">ＹＹＹＹ</td>
<td style="width: 500px; border: 1px solid;background-color: #CCFFFF;">ＺＺＺＺＺ</td>
</tr>
<tr>
<td style="border: 1px solid;">ＡＢＣＤＥＦＧ</td>
<td style="border: 1px solid;">50,000円</td>
<td style="border: 1px solid;">
ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺ
</td>
</tr>
<tr>
<td style="border: 1px solid;background-color:#D7EEFF;"> </td>
<td style="border: 1px solid;background-color:#D7EEFF;"> </td>
<td style="border: 1px solid;background-color:#D7EEFF;"> </td>
</tr>
<tr>
<td style="border: 1px solid;"> </td>
<td style="border: 1px solid;"> </td>
<td style="border: 1px solid;"> </td>
</tr>
<tr>
<td style="border: 1px solid;background-color:#D7EEFF;"> </td>
<td style="border: 1px solid;background-color:#D7EEFF;"> </td>
<td style="border: 1px solid;background-color:#D7EEFF;"> </td>
</tr>
</tbody>
</table>
<div>作成日 20YY年XX月DD日 ※上記は、作成日現在の内容です。ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺ</div>
<div> </div>
<ul>
<li>ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺ</li>
<li>ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺＡＢＣＤＥ</li>
</ul>
<table style="border-collapse: collapse;">
<tbody>
<tr>
<td
style="width: 500px; height: 200px; border-top: 1px solid; border-right: 1px solid; text-align: left; vertical-align: top; padding-left: 5px;">
YYY会社
<img src="https://placehold.jp/470x100.png" alt="No image"
style="max-width:100%;margin: 0px; padding: 0px;vertical-align: bottom;">
</td>
<td
style="width: 500px; height: 200px; border-top: 1px solid; border-left: 1px solid; text-align: left; vertical-align: top; padding-left: 5px;">
XXX会社
<img src="https://placehold.jp/470x170.png" alt="No image"
style="max-width:100%;margin: 0px; padding: 0px;vertical-align: bottom;">
</td>
</tr>
</tbody>
</table>
</div>
<div> </div>
<div style="text-align: right">sample-abc-XXX/YY 2019.XX.XX</div>
</body>
</html>