Vuetify kullanarak, bir sayfayı yazdırmayı denediğimde, yalnızca ilkini gösterir.

Question

Vuetify kullanılarak geliştirilmiş bir uygulama var.

Sayfalardan biri siparişler için kullanılır ve kullanıcının bunu yazdırabilmesini istiyorum.

Nasıl bu baskı için tüm diğer sayfaları görüntülemek yapabilirsiniz:

Sorun sayfa kaydırma varsa, yalnızca ilk sayfa bir kaydırma çubuğu ile gösterir ki?

GÜNCELLEME

Ben baskı için bu css kullanırsam, ana bölümündeki bir .scroll-y sınıf var:

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

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

çalıştığını, ama belli ı bir dizi yüksekliğini istemiyoruz Her baskı için 5000px, Yüksekliğini hesaplamak ve ayarlamak için js kullanabilirim ama daha iyi/daha kolay bir yol olup olmadığını merak ediyorum.

Answer 1

Sen taşma ve (benim örnek üzerinde gövde) ana bölümün yüksekliğini değiştirmek zorunda: codepen üzerine demo

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

Linki: https://codepen.io/andersanmiguel/pen/NXyxPE?editors=0100

(eğer orada formu verebilirsiniz)

Answer 2

böyle bir şey ekleyerek, CSS değiştirmek zorunda:

Yani

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

.scroll-y gerekli tüm alanı işgal, bir d vücut sağ baskılı boyut kadar büyüyecek.

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

: yapmalısınız Tabii css ile

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

gibi bir ayrılık baskı unsuru ihtiyaç baskı sayfa sonu html elemanları, tipik baskı boyutuna (yani A4) ve ekleme üzerinde görüş önizleme baskı ekler doğru yönde beni işaret için @Ander ve @ g.annunziata için

Answer 3

sayesinde benim için çalıştı son kurulum oldu:

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