प्रिंट

Question

के लिए Reactjs घटकों को फिर से प्रस्तुत करें मेरे पास एक गैलरी घटक है जो गैलरी आइटम बनाने के लिए कितना बड़ा निर्धारित करने के लिए वर्तमान विंडो आकार का उपयोग करता है। मैंने खिड़की का आकार बदलने की घटनाओं को भी झुका दिया है ताकि खिड़की का आकार बदलने के साथ ही गैलरी आइटम का आकार बदल दिया जा सके।

क्रोम में, यदि कोई उपयोगकर्ता गैलरी प्रिंट करता है, तो मुद्रित पृष्ठ को फिट करने के लिए आइटम का आकार बदला नहीं जा रहा है। इसके बजाए वे विंडो आकार के लिए गणना की गई अंतिम आकार का उपयोग कर रहे हैं। प्रिंट विकल्पों में पोर्ट्रेट से परिदृश्य में स्विच करते समय भी यह सच है।

क्या प्रिंट संवाद खोला जा रहा है और पृष्ठ लेआउट पोर्ट्रेट से परिदृश्य में स्विच किए जाने पर घटकों को फिर से प्रस्तुत करने के लिए प्रतिक्रिया देने का कोई तरीका है? मैंने सोचा कि प्रिंट संवाद नए आयामों के साथ पृष्ठ को फिर से प्रस्तुत करेगा लेकिन ऐसा लगता है कि यह मामला नहीं है।

Answer 1

जब आप कोई पृष्ठ प्रिंट करते हैं, तो ब्राउज़र वर्तमान DOM का स्नैपशॉट लेता है और print मीडिया शैलियों को लागू करता है। आपकी समस्या यह है कि आपके डीओएम के तत्व स्क्रीन के आयामों पर निर्भर हैं।

विंडो आकार बदलने की घटनाएं आपके घटकों को पुनर्व्यवस्थित करने में मदद करेंगी जब उपयोगकर्ता अपनी स्क्रीन का आकार बदलता है लेकिन जब उपयोगकर्ता प्रिंट करता है तो वे ट्रिगर नहीं होते हैं। ऐसे कई तरीके हैं जिन पर आप पृष्ठ को प्रिंट करते समय किसी ईवेंट को सुन सकते हैं।

window.onbeforeprint उपयोगकर्ता पृष्ठ को प्रिंट करते समय ट्रिगर करेगा। यदि आप खिड़की का आकार बदलने की घटनाओं को ट्रिगर करने या अपने घटकों को किसी अन्य तरीके से फिर से प्रस्तुत करने के लिए स्क्रीन का आकार बदलते हैं। यह क्रोम में समर्थित नहीं है हालांकि this stackoverflow post पर एक नज़र डालें, यह बताता है कि आप इसके बजाय window.matchMedia('print') का उपयोग कैसे कर सकते हैं।

स्क्रीन आयामों और घटनाओं का आकार बदलने के बजाय सीएसएस मीडिया प्रश्नों पर निर्भर होना हमेशा अच्छा होता है, लेकिन कभी-कभी यह हमेशा संभव नहीं होता है।

Answer 2

आपको अपने घटक में matchMedia एपीआई का उपयोग करने की आवश्यकता होगी। लेकिन इसे स्वयं कर रहे हैं, आप पूरी तरह से पहिया का पुन: आविष्कार करेंगे। मौजूदा पुस्तकालय का उपयोग करना आसान होगा जो इसका ख्याल रखता है। कृपया https://www.npmjs.com/package/react-responsive देखें। इसमें matchMedia पर प्रतिक्रिया आधारित रैपर घटक हैं, इसलिए आप इसे अपने प्रोजेक्ट में जल्दी से प्रोटोटाइप करने में सक्षम होना चाहिए। पॉलीफिल भी उपलब्ध हैं। एक अन्य लाभ मैं सोच सकता हूं कि आपके इंटरफ़ेस में प्रिंट-पूर्वावलोकन विकल्प हो सकता है जहां आप उपयोगकर्ता को पूर्वावलोकन कर सकते हैं कि गैलरी प्रिंट मोड में कैसा दिखाई देगी। इसके लिए आप प्रिंट मोड को अनुकरण करने के लिए इस लाइब्रेरी की सर्वर प्रतिपादन सुविधा का उपयोग कर सकते हैं।

पीएस: मैं इस परियोजना से किसी भी तरह से संबद्ध नहीं हूं।

Answer 3

उपयोग मीडिया क्वेरी पोर्ट्रेट और लैंडस्केप प्रिंट

@media print and (orientation: landscape) { 
    /* landscape styles */ 
    /* write specific styles for landscape e.g */ 
    h1 { 
     color: #000; 
     background: none; 
     } 

     nav, aside { 
     display: none; 
     } 

    } 

@media print and (orientation: portrait) { 
    /* portrait styles */ 
} 

Answer 4

WitVault के समाधान को लक्षित करने के अलावा, मैं एक साधारण प्रतिक्रिया घटक जटिल print.css से निपटने बहुत आसान बना देता है कि बना लिया है। या

https://github.com/captray/react-print

जड़ को यह आईडी जोड़ें (: सभी अपने मार्कअप से अधिक कक्षाएं, आईडी, आदि जोड़ने और एक जटिल print.css फ़ाइल बनाने के बजाय, आप इस प्रकार मेरी प्रतिक्रिया प्रिंट पुस्तकालय का उपयोग कर सकते कहीं उच्च अपने डोम पेड़ में) अपने वर्तमान सामग्री के (लेकिन अंदर शरीर टैग में)

<div id="react-no-print"> 

'प्रिंट-माउंट' की आईडी के साथ एक div जोड़ें, या जो कुछ भी माउंट आईडी आप उपयोग करना चाहते हैं ।

<div id="print-mount"></div> 

संरचना अपने मुद्रण योग्य संस्करण के लिए आप चाहते हैं (जो अपने ही शैलियों के साथ बच्चे घटकों चीजों को आसान बनाने के लिए शामिल कर सकते हैं बनाएँ।

var PrintTemplate = require('react-print'); 
var ReactDOM = require('react-dom'); 
var React = require('react'); 

var MyTemplate = React.createClass({ 
    render() { 
     return (
      <PrintTemplate> 
       Your custom HTML or React Components go here, and will replace the existing HTML inside of the "react-no-print" ID, and instead it will render what's inside of your custom template. 
      </PrintTemplate> 
     ); 
    } 
}); 

ReactDOM.render(<MyTemplate/>, document.getElementById('print-mount')); 

असल में, यह आपके मुद्रण योग्य संस्करण प्रस्तुत हुई है, लेकिन यह जब तक छिपा हुआ है प्रिंटिंग के लिए इसकी आवश्यकता है। अगर आपको स्लाइडिंग गैलरी के लिए इसकी ज़रूरत है, तो शायद आप अपने स्लाइडर के लिए चेंज इवेंट में हुक करना चाहते हैं और प्रिंट टेम्पलेट को फिर से प्रस्तुत करना चाहते हैं (पुराना एक अनमाउंट करें, नया माउंट करें) प्रिंट करें।

आशा यह मदद करता है!