Vuetify का उपयोग करते हुए, जब मैं किसी पृष्ठ को मुद्रित करने का प्रयास करता हूं तो यह केवल पहला

Question

दिखाता है मेरे पास Vuetify का उपयोग करके बनाया गया एक ऐप है।

ऑर्डर के लिए पृष्ठों में से एक का उपयोग किया जाता है और मैं चाहता हूं कि उपयोगकर्ता इसे प्रिंट करने में सक्षम हो।

मैं इसे कैसे प्रिंट के लिए अन्य सभी पृष्ठों को प्रदर्शित कर सकते हैं:

समस्या यह है कि अगर मैं पेज में स्क्रॉल है, केवल प्रथम पृष्ठ एक स्क्रॉलबार साथ चलता है?

अद्यतन

मैं, मुख्य खंड पर एक .scroll-y वर्ग है अगर मैं प्रिंट के लिए इस सीएसएस का उपयोग करें:

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

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

यह काम करता है, लेकिन स्पष्ट रूप से मैं का एक सेट ऊंचाई नहीं करना चाहते प्रत्येक प्रिंट के लिए 5000 पीएक्स, मैं ऊंचाई की गणना करने और इसे सेट करने के लिए जेएस का उपयोग कर सकता हूं लेकिन मुझे आश्चर्य है कि कोई बेहतर/आसान तरीका है या नहीं?

Answer 1

आप अतिप्रवाह और (मेरे उदाहरण पर शरीर) मुख्य धारा की ऊंचाई बदलने के लिए:

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

codepen पर डेमो के लिए लिंक: https://codepen.io/andersanmiguel/pen/NXyxPE?editors=0100 (आप इसे वहाँ फार्म निर्यात कर सकते हैं)

Answer 2

आप सीएसएस बदलने के लिए, कुछ इस तरह जोड़ने:

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

तो .scroll-y पर कब्जा कर लिया सभी स्थान की आवश्यकता नहीं एक डी शरीर सही मुद्रित आकार तक बड़ा हो जाएगा।

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

: बेशक आप चाहिए की छपाई पृष्ठ विराम के लिए HTML तत्वों, ठेठ प्रिंट आकार (यानी ए 4) और जोड़ने पर आपके विचार का पूर्वावलोकन प्रिंट जहां

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

के रूप में एक गोलमाल प्रिंट तत्व सीएसएस के साथ की जरूरत है कहते हैं मुझे सही दिशा में इशारा करते हुए के लिए @Ander और @ g.annunziata को

Answer 3

धन्यवाद, अंतिम सेटअप है कि मेरे लिए काम किया था:

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