備忘ですが、

誰かの役に立てばいい

【kintone】で宛名ラベルを作ってみる：メモ1

kintone

bibouroq.hatenablog.com
上記記事詳細。HTMLの方。
1か月後にはなぜこんな構造にしたのか忘れていそうなのでメモ。

一覧表示

一覧本体。

<div id="my-customized-view" ></div>

kintoneの表示幅に収めたい時は↓を追加するといいかも。

style="width: 100%; height: 100%; overflow: auto;"

子ウィンドウヘッダ1

子ウィンドウのHTMLをどこに書いたらいいかわからないので非表示のテキストエリアを作る。

<textarea id="TB" style="display: none;">
  <html lang="ja">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>印刷画面</title>

子ウィンドウヘッダ2

paper.cssを直接記載。
link rel ="stylesheet"でCDNを使うと子ウィンドウを表示したときに遅延したりしなかったり。

      <style type="text/css">
        @page { margin: 0 }
        body { margin: 0 }
        .sheet {
        margin: 0;
        overflow: hidden;
        position: relative;
        box-sizing: border-box;
        page-break-after: always;
        }
        /** Paper sizes **/
        body.A4 .sheet { width: 210mm; height: 296mm }
        /** Padding area **/
        .sheet.padding-10mm { padding: 10mm }
        .sheet.padding-15mm { padding: 15mm }
        .sheet.padding-20mm { padding: 20mm }
        .sheet.padding-25mm { padding: 25mm }
        /** For screen preview **/
        @media screen {
          body { background: #e0e0e0 }
          .sheet {
          background: white;
          box-shadow: 0 .5mm 2mm rgba(0,0,0,.3);
          margin: 5mm;
          }
        }
        /** Fix for Chrome issue #273306 **/
        @media print {
          body.A4 { width: 210mm }
        }

子ウィンドウヘッダ3

宛名ラベルのレイアウト部分。
幅86.4mmx高さ42.3mmのラベル用。

        /**　印刷画面　**/
        table.print {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 172.8mm;
        height: 254.6mm;
        margin: -127.3mm 0 0 -86.4mm;
        border-collapse: collapse;
        font-family: "ＭＳ 明朝";
        }
        table.print td {
        border: 1px solid;  /**　使用時は消す　**/
        border-color: black;  /**　使用時は消す　**/
        border-collapse: collapse;
        position: relative;
        width: 86.4mm;
        height: 42.3mm;
        }
        table.print p{
        position: relative;
        width: 75.0mm;
        margin: 0;
        left: 5mm;
        }
        table.print p.zipcode { font-size: 11pt; }
        table.print p.address1 { font-size: 11pt; }
        table.print p.address2 { font-size: 11pt; }
        table.print p.client { font-size: 11pt; }
        table.print p.namae { font-size: 13pt; }
        table.print br { line-height: 6pt; }
      </style>
    </head>

子ウィンドウボディ

テーブルでラベルの数だけtdを作る。
2列6段。
paper.cssを使ってブラウザだけでExcelのデータを差し込み印刷する - Qiita
の見様見真似…。

    <body class="A4">
      <section class="sheet" id="originSheet">
        <table class="print">
          <tbody>
            <tr>
              <td>
                <div class="data">
                  <!-- 開発時確認用 -->
                  <p class="zipcode">123-4567</p>
                  <p class="address1">○○県○○○市○○○1-1-1</p>
                  <p class="address2">△△△△△△ビル</p>
                  <br>
                  <p class="client">株式会社サンプルホールディングス</p>
                  <p class="namae">代表取締役　サンプル　太郎 様</p>
                </div>
              </td>
              <td></td>
            </tr>
            <tr><td></td><td></td></tr>
            <tr><td></td><td></td></tr>
            <tr><td></td><td></td></tr>
            <tr><td></td><td></td></tr>
            <tr><td></td><td></td></tr>
          </tbody>
        </table>
      </section>
    </body>
  </html>
</textarea>