2017-12-27 100 views
7

Vuetify kullanılarak geliştirilmiş bir uygulama var.Vuetify kullanarak, bir sayfayı yazdırmayı denediğimde, yalnızca ilkini gösterir.

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

enter image description here

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.

+0

bir 'v-data-table' kullanıyor musunuz? Kaydırma çubuğunun sadece mevcut verilerin yansıması olduğunu mu söylüyorum (sayfalandırma gibi). Aksi halde, yazdırma sırasında css'nizi, örn. '@ media screen' ve' media basın' kurallarını kullanın. – nathanvda

+0

'v-data-table' kullanıyorum ama sayfalama yok ve ben de' @ media print' css kullanıyorum, güncellememize bakın – Tomer

+0

Vücudunuzda niçin 'yüksekliğe' ihtiyacınız var? Mutlak konumlandırma kullanmak mı? – nathanvda

cevap

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

+0

İçeriği dinamik mi?

'nereye ekleyebileceğimi nasıl bilebilirim? – Tomer

+0

Web sayfasının baskı önizlemesini yapıyorum ve gördüğüm şeye göre, bu divun içeriği kırmak için nereye koyduğunu seçiyorum. Örneğin, bir öğe listeniz varsa ve önizlemede 21. öğeyi sayfa ile sonraki sayfa arasında çapraz olarak görüyorsanız, 21. öğeden önce bu divı yerleştirin. –

+0

Bunu yapabilseydim bile, veri dinamik olduğundan, ekran boyutuna bağlıyım, çünkü daha küçük ekranlarda daha az eleman göreceğim – Tomer

0

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

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