【Vue・CSS・HTML】プリントプレビューを扱う際の色々

2021年8月15日

Vue3 を使ったフロントシステムで画面を印刷する機能を実装する際に若干詰まった点三つを紹介します。

・プレビューにヘッダーやフッターとして出てくるURLや日付、サイト名、ページ数を消す方法

・縦と横場合によって印刷の向きを変える方法

・文字の縦書きがプレビュー時に無効になってしまう現象

プレビューにヘッダーやフッターとして出てくるURLや日付、サイト名、ページ数を消す方法

このブログであれば印刷プレビューを出すと下記のようにサイト名や日付などが上下に表示されます。

こちらは印刷する画面に margin を入れて表示されないようするという方法がありますが、例えばページ番号だけは出したいというような状況であれば下記のように上下左右で margin を指定して右下のページ番号だけが消えてしまわないようにする必要がありました。

@page { margin: 4% 7% 4% 5%; }

こちらの @page は文書を印刷するときに一部の CSS プロパティを変更するために使用します。

調べた感じこれらヘッダーやフッターに表示されるサイト名などを消すにはこの方法くらいしか無さそうでした。

縦と横場合によって印刷の向きを変える方法

印刷プレビューでの向きを決めるには下記のように CSS を指定すれば変えることは可能です。

@page { size: A4 landscape }

しかしこれだとそのページで印刷プレビューした際に常に横向きになってしまい、同じ画面でこの部分は一部縦で印刷したいという場合に困ってしまいます。

その場合下記のように @page 名前という形でそこで指定した名前を CSS のpage に指定することができます。

.printLandscape {
  page: printLandscape
}

.printPortrait {
  page: printPortrait
}

@page printPortrait { size: A4 portrait }
@page printLandscape { size: A4 landscape}

あとはそれぞれのクラスを Vue であれば下記のようにフラグでリアクティブに変更するなどして縦横切り替えたり、違う要素につけたりして使い分ける事が可能でした。

<div :class="{ printPortrait : flag, printLandscape : !flag}"></div>

文字の縦書きがプレビュー時に無効になってしまう現象

下記の様に表の中で文字を縦書きにしたいという状況がありました。縦書きにするには writing-mode: vertical-rl; で指定すると縦に表示されます。しかしこれが印刷プレビューした際に全て横文字に戻ってしまうという事があり詰まる場面がありました。(自分は chrome で試して縦表示できていましたがブラウザによってはそもそも印刷プレビューでなくてもうまく表示されていないようでした)

          <table>
            <thead>
              <th>1</th>
              <th>2</th>
            </thead>
            <tbody>
              <tr>
                <td class="vertical-text-td">縦書きの文</td>
                <td class="vertical-text-td">縦書きの文字</td>
              </tr>
            </tbody>
          </table>

.vertical-text-td {
  writing-mode: vertical-rl;
}

これは <td> に直で writing-mode: vertical-rl; を指定するとうまく動かないという事らしく下記のように p タグを入れてそこに writing-mode: vertical-rl; を指定するというようにすると正しくプレビュー画面でも縦表示がされました。

          <table>
            <thead>
              <th>1</th>
              <th>2</th>
            </thead>
            <tbody>
              <tr>
                <td><p class="vertical-text">縦書きの文</p></td>
                <td><p class="vertical-text">縦書きの文字</p></td>
              </tr>
            </tbody>
          </table>

まとめ

画面を印刷したいという要件はもともとアナログに行なっていた業務をシステム化する、といったような際によく求められたりするかと思います。よくある LP やモダンなウェブページを作るような案件だとあまり紙の印刷が必要になる事は少なかったりするかと思いますが、もともとの業務の一部をシステム化というような案件の際は印刷を扱うことも度々あるかとも思うのでその際に覚えておきたいと思った件でした。