web-dev-qa-db-ja.com

Vuetifyを使用して、ページを印刷しようとすると、最初のページのみが表示されます

Vuetify を使用してアプリを作成しています。

ページの1つは注文に使用され、ユーザーがそれを印刷できるようにしたいと思います。

問題は、ページをスクロールしている場合、最初のページだけがスクロールバーで表示されることです。

enter image description here

他のすべてのページを印刷用に表示するにはどうすればよいですか?

[〜#〜]更新[〜#〜]

私は.scroll-yメインセクションのクラス、このcssを印刷に使用する場合:

 @media print{
      body,
      html {
        height: 5000px !important;
      }

      .scroll-y {
        height: 100% !important;
      }
    }

それは機能しますが、明らかにすべての印刷に5000pxの高さを設定する必要はありません。jsを使用して高さを計算して設定できますが、より良い/より簡単な方法があるかどうか疑問に思っていますか?

9
Tomer

CSSを変更して、次のようなものを追加する必要があります。

@media print {
  body { 
    overflow: auto;
    height: auto; 
  }
  .scroll-y {
     height: auto;
     overflow: visible;
  }
}

そう .scroll-y必要なすべてのスペースを占有し、本体は正しい印刷サイズに成長します。もちろん、改ページを印刷するためのhtml要素を追加し、通常の印刷サイズ(A4など)でビューの印刷をプレビューし、必要に応じて分割印刷要素を追加する必要があります。

 <div class="print-break-page"></div>

cssを使用:

 .print-break-page {
       page-break-after: always;
 }
4
g.annunziata

メインセクション(私の例では本体)のオーバーフローと高さを変更する必要があります。

@media print {
  body { 
    overflow: auto;
    height: auto; 
  }
}

Codepenのデモへのリンク: https://codepen.io/andersanmiguel/pen/NXyxPE?editors=01 (そこからエクスポートできます)

2
Ander

私を正しい方向に向けてくれた@Anderと@ g.annunziataのおかげで、私にとってうまくいった最終的なセットアップは次のとおりでした。

 body,
  .scroll-y {
    overflow: visible !important;
    height: auto !important;
  }
0
Tomer