印刷プレビューの注意点

Posted at 2025-01-18

印刷プレビューの表示の仕方について

印刷時の表示しない範囲は以下のように設定しなければ基本、ページ全体が表示されます。

<style>
@media print {
  .クラス名 {
    display: none;
  }
}

</style>

最近、Vueのページにトーストのメッセージを実装したところ
1度も使用しなければ問題ないのだが、1度でも使用するとトーストを使用して非表示になった後にも以下のタグがページの下に残ってしまう

これが原因になって空白の1ページがプレビューに追加されるバグが発生してしまう可能性があります。

<div class="v-toast v-toast--top"></div>
<div class="v-toast v-toast--bottom"></div>

Vue.jsのトーストを印刷プレビューから排除するスタイル

<style>
@media print {
  .v-toast {
    display: none !important;
  }
}

</style>

上記のスタイルを指定しておくとトーストを印刷プレビューから排除できました