2017-12-27 27 views
7

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

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

enter image description here

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

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

अद्यतन

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

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

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

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

+0

आप एक 'वी-डेटा-table' का उपयोग कर रहे हैं? मुझे लगता है कि स्क्रॉलबार उपलब्ध डेटा का एक प्रतिबिंब है (जैसे पेजिनेशन?)। यदि नहीं, तो स्क्रॉल न करने के लिए प्रिंट करते समय आपको अपने सीएसएस को अनुकूलित करना होगा उदा। '@media स्क्रीन' और' @media प्रिंट' नियमों का उपयोग करें। – nathanvda

+0

मैं 'v-data-table' का उपयोग कर रहा हूं लेकिन बिना किसी पेजिनेशन के, और मैं '@media print' css का भी उपयोग कर रहा हूं, मेरा अपडेट – Tomer

+0

देखें कि आपको शरीर पर' ऊंचाई 'क्यों चाहिए? पूर्ण स्थिति का उपयोग करना? – nathanvda

उत्तर

2

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

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

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

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 को

+0

काम नहीं किया मैं कैसे जानता हूं कि सामग्री 0''कहां गतिशील है? – Tomer

+0

मैं वेब पेज का प्रिंट पूर्वावलोकन करता हूं, और जो कुछ मैं देखता हूं उसके आधार पर, मैं यह चुनता हूं कि इस div को सामग्री को तोड़ने के लिए कहां रखा जाए। उदाहरण के लिए, यदि आपके पास तत्वों की सूची है और पूर्वावलोकन में आप पृष्ठ और अगले के बीच 21 वें तत्व क्रॉस देखते हैं, तो 21 वें तत्व से पहले, यह div डाल दें। –

+0

भले ही मैं यह कर सकूं, जो डेटा गतिशील होने के बाद से कठिन है, मैं अभी भी स्क्रीन आकार पर निर्भर हूं, क्योंकि छोटी स्क्रीन पर मुझे कम तत्व दिखाई देंगे – Tomer

0

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

body, 
    .scroll-y { 
    overflow: visible !important; 
    height: auto !important; 
    } 
संबंधित मुद्दे

 संबंधित मुद्दे