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

Question

Vuetifyを使用してアプリを構築しました。

ページの1つが注文に使用されており、ユーザーが印刷できるようにしたいと考えています。

問題は、私はページ内のスクロールを持っている場合、最初のページだけがスクロールバーで表示されていることである：

私はそれが印刷のために他のすべてのページを表示することができますどのように？

UPDATE

私は印刷のために、このCSSを使用する場合、私は、メインセクションに.scroll-yクラスを持っている：

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

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

それは動作しますが、明らかに私は、一連の高さを望んでいません印刷毎に5000px、 高さを計算して設定するのにjsを使うことができますが、より良い/簡単な方法があれば疑問です。

Answer 1

あなたがオーバーフローし、メインセクション（私の例で体）の高さに変更する必要があります。codepen上のデモへ

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

リンク： https://codepen.io/andersanmiguel/pen/NXyxPE?editors=0100（あなたはそれがそこに形成エクスポートすることができます）

を

Answer 2

あなたはこのような何かを追加し、CSSを変更する必要があります。

だから、

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

.scroll-yが必要なすべてのスペースを占有し、 d体が正しいサイズに印刷されます。

.print-break-page { 
     page-break-after: always; 
} 

：あなたがしなければならない。もちろん、 はCSSで

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

として解散プリント要素を必要とする印刷改ページのHTML要素、典型的なプリントサイズ（すなわちA4）と追加のビューのプレビュー印刷を追加します正しい方向に私を指しているため@Anderとの@ g.annunziataへ

Answer 3

おかげで、私のために働いた最後の設定がされた：

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