備忘ですが、

誰かの役に立てばいい

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

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

[v-cloak] のところ

vue.jsで一覧表示したときのCSS
行を縞々にし、余白微調整。
[v-cloak] { opacity: 0 }は後の「tr v-for="record in records" 」のところの「v-cloak」と対応。
vue.js の {{name}} とかが html に表示されるのを防ぐ(v-cloak) - Qiita

<style type="text/css">
  table.vue tr:nth-child(even) { background-color :#F2F2F2 }
  table.vue th,td{ padding: 2px 4px }
  [v-cloak] { opacity: 0 }
</style>

一覧表示のところ

v-for="record in records"、@click="someFunc(record)"、{{record.会社名.value}}はvue.jsの書き方。
1列目のボタンで宛名ラベルシート印刷用の子ウィンドウを表示、2列目にレコード詳細画面へのリンク。
リンクアドレスのアプリIDの部分は数字に変える。

<div id="my-customized-view" >
  <table border="1" style="border-color: #e3e7e8" class="vue">
    <tr>
      <th>ラベル</th>
      <th>氏名</th>
      <th>会社名</th>
      <th>役職</th>
      <th>郵便番号</th>    
      <th>住所1</th>    
      <th>住所2</th>    
    </tr>
    <tr v-for="record in records" v-cloak>
      <td><button type="button" @click="someFunc(record)">印刷</button></td>
      <td><a :href="'/k/アプリID/show#record=' + record.レコード番号.value">{{record.氏名.value}}</a></td>
      <td>{{record.会社名.value}}</td>
      <td>{{record.役職.value}}</td>
      <td>{{record.郵便番号.value}}</td>
      <td>{{record.住所1.value}}</td>
      <td>{{record.住所2.value}}</td>
    </tr>
  </table>
</div>

子ウィンドウヘッダ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: "MS 明朝";
        }
        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>