帳票をHTMLで作成したい (pdfからの卒業)

# 前書き
帳票をPDFで作成する方が楽ではあるが、PDFをダウンロードさせる実装をしたりパスワードをかけたりと何かと面倒。
紙やローカル保存をしたければ、ブラウザ印刷を使って行ってくれればいいのではないかと思い、htmlで帳票を作成する際の参考となるソースを公開する。

# 注意
Internet Explorerではレイアウトが崩れてしまいます。
（tableタグ内のimgではmax-widthが機能しないらしいので、回収方法を検討中）

# 実機
https://koji-yamamoto-github.github.io/create-reports/

#　帳票画面
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204260/06c8fd32-0be0-6846-2718-d1897d830ec7.png)

#帳票画面印刷時
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/204260/f51e2f7e-0b9a-ec46-108a-61c8ac82f3c9.png)

#　ソース
```html
<!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>&nbsp;</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;">&nbsp;</td>
        <td style="border: 1px solid;background-color:#D7EEFF;">&nbsp;</td>
        <td style="border: 1px solid;background-color:#D7EEFF;">&nbsp;</td>
      </tr>
      <tr>
        <td style="border: 1px solid;">&nbsp;</td>
        <td style="border: 1px solid;">&nbsp;</td>
        <td style="border: 1px solid;">&nbsp;</td>
      </tr>
      <tr>
        <td style="border: 1px solid;background-color:#D7EEFF;">&nbsp;</td>
        <td style="border: 1px solid;background-color:#D7EEFF;">&nbsp;</td>
        <td style="border: 1px solid;background-color:#D7EEFF;">&nbsp;</td>
      </tr>
    </tbody>
  </table>
  <div>作成日 20YY年XX月DD日 ※上記は、作成日現在の内容です。ＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺ</div>
  <div>&nbsp;</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>&nbsp;</div>
  <div style="text-align: right">sample-abc-XXX/YY 2019.XX.XX</div>
</body>

</html>
```