iframed पृष्ठों की मुद्रित पैरेंट विंडो अजीब स्केलिंग

Question

का कारण बनती है मुझे प्रिंटिंग के लिए एक ही पृष्ठ में कई HTML दस्तावेज़ों के संयोजन के साथ काम सौंपा गया था। मेरा पहला प्रयास बुरी तरह विफल रहा - मैंने पेज सामग्री को अपने <div> टैग और स्टाइलशीट नियमों के मिलान के लिए संशोधित करने की कोशिश की। मेरा दूसरा प्रयास, प्रत्येक दस्तावेज़ को अलग करने के लिए iframes का उपयोग करके, काफी बेहतर दिखता है, लेकिन आईफ्रेम स्टैक के मूल फ्रेम से छपाई करते समय पेजों को बढ़ाया जाता है, ताकि वे अपनी खिड़कियों में अलग-अलग दस्तावेज़ों को प्रिंट कर सकें।

यहाँ दस्तावेजों के साथ मैं काम कर रहा हूँ का एक उदाहरण है: http://dl.dropbox.com/u/291229/print-test/index.html

आप को देखने के लिए मैं क्या मतलब है फ़ायरफ़ॉक्स में एक मुद्रण पूर्वावलोकन कर सकते हैं। यदि आप अपने स्वयं के टैब/विंडो और प्रिंट पूर्वावलोकन में पहला फ्रेम खोलते हैं, तो उल्लिखित बॉक्स पृष्ठ के भीतर अच्छी तरह फिट बैठते हैं। आईफ्रेम स्टैक की मूल विंडो में ऐसा करने से पृष्ठ सीमाओं के बाहर बहने वाली कोशिकाएं दिखाई देती हैं।

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

Answer 1

समस्या यह है कि ब्राउज़र प्रिंटर के लिए उस फ्रेम की सामग्री को स्केल करने के तरीके को निर्धारित करने के लिए कंटेनर आईफ्रेम की चौड़ाई का उपयोग करते हैं। इसलिए, फ्रेम को उनकी चौड़ाई स्पष्ट रूप से निर्धारित करने की आवश्यकता होती है।

दुर्भाग्यवश, प्रिंट चौड़ाई को गतिशील रूप से लगाना बहुत मुश्किल है और इसमें कुछ हैकर शामिल हैं। आप घटक पृष्ठों की एक निश्चित चौड़ाई को स्टाइल करना और उस पर आईफ्रेम चौड़ाई को हार्ड-कोडिंग करना बेहतर हो सकते हैं।

हालांकि, अगर आप वास्तव में के बाद दस्तावेज़ लोड होने के गतिशील उन्हें आकार, तो आपको निम्न कोड चला सकते हैं की जरूरत है (क्रोम में परीक्षण किया गया):

var iframes = document.getElementsByTagName("iframe"); 
for(var i = 0; i < iframes.length; ++i) { 
    var curFrame = iframes[i]; 
    var curBody = curFrame.contentDocument.body; 
    curBody.innerHTML = '<div id="iframe-print-content" style="display:inline-block; overflow:hidden; white-space: nowrap;">' 
         + curBody.innerHTML + '</div>'; 
    var printContent = curFrame.contentDocument.getElementById("iframe-print-content"); 
    var curWidth = printContent.offsetWidth + printContent.offsetLeft; 
    iframes[i].style.width=(curWidth + "px"); 
} 

इस चलाने के बाद, आप सामान्य रूप से प्रिंट या window.print() कॉल कर सकते हैं या जो कुछ भी आप चाहते हैं।

नोट: यह विधि IE6 या IE7 पर काफी नहीं काम करते हैं, क्योंकि वे inline-block का समर्थन नहीं करते होंगे। (कुछ अन्य पुराने ब्राउज़र भी हैं जो नहीं करते हैं)। तुम्हें पता है, ज़ाहिर है,

display:-moz-inline-stack; display:inline-block; zoom:1; *display:inline; overflow:hidden; white-space: nowrap; 

बजाय

कोशिश कर सकते हैं, जो शायद इनमें से अधिकांश मामले का ख्याल रखेंगे, लेकिन मैं पुराने ब्राउज़र के लिए कोई वादा करते हैं।

शुभकामनाएं, यह सुनकर खेद है कि आप उन पृष्ठों पर कोड के साथ अटक गए हैं।

संपादित करें: इसके बाद के संस्करण समाधान थोड़ा फ़ायरफ़ॉक्स में wonky है। Firefox के लिए

समाधान (परीक्षण किया & फ़ायरफ़ॉक्स 5 में काम कर):

var iframes = document.getElementsByTagName("iframe"); 
for(var i = 0; i < iframes.length; ++i) { 
    var curFrame = iframes[i]; 
    var curBody = curFrame.contentDocument.body; 
    var oldHTML = curBody.innerHTML; 
    curBody.innerHTML = '<div id="iframe-print-content" style="display:inline-block; overflow:hidden;">' +  oldHTML + '</div>'; 
    var printContent = curFrame.contentDocument.getElementById("iframe-print-content"); 
    var curWidth = printContent.offsetWidth + printContent.offsetLeft + 25; 
    var curHeight = printContent.offsetHeight + printContent.offsetTop + 25; 
    curBody.innerHTML = oldHTML; 
    iframes[i].style.width=(curWidth + "px"); 
    iframes[i].style.height=(curHeight + "px"); 
} 

क्यों यह सामान्य दृष्टिकोण से काम करता है की एक पूर्ण विवरण के लिए, मेरा उत्तर ऊपर देखें।

ऊपर दिए गए समाधान से अलग क्या है, और क्यों?

पहले, फ़ायरफ़ॉक्स बारीकियों:
कुछ महत्वपूर्ण मतभेद रहे हैं। पहला यह देख रहा है कि फ़ायरफ़ॉक्स display: inline-block और white-space: nowrap को निश्चित-चौड़ाई वाले तत्वों के लिए क्रोमियम/वेबकिट से अलग करता है (यही कारण है कि एक दस्तावेज़ पिछले कोड के साथ वास्तव में जीत गया था)। अगला यह देख रहा है कि फ़ायरफ़ॉक्स अपने आईफ्रेम के अंदर थोड़ा सा मार्जिन देना पसंद करता है। मैं फ़ायरफ़ॉक्स कोड से बहुत परिचित नहीं हूं जो ऐसा करता है (क्रोमियम पर अपने दिन हैकिंग खर्च करता है) लेकिन मेरा सामान्य समाधान (फ्रेम से बचने के अलावा) मार्जिन पर अतिरिक्त 25px देना है। इस तरह की समस्या को ठीक करने के लिए इस तरह की एक छोटी राशि एक लोकप्रिय हैक प्रतीत होती है।

अब, यह वास्तव में बेहतर कर रहे हैं कोड के कुछ हिस्सों:
पहले, इस वर्ष अब शरीर संग्रहीत करता है, एक div पर शरीर लिफ्टों माप लेने के लिए, फिर पुराने शरीर पुनर्स्थापित करता है। यह लचीला सीएसएस के साथ समस्याओं से बचना चाहिए और अधिक अनुमानित व्यवहार की गारंटी देनी चाहिए। दूसरा, यह अब चौड़ाई के रूप में ऊंचाई के लिए एक ही चीज करता है (मेरी पिछली धारणा है कि हार्ड-कोड वाली चौड़ाई केवल काम करेगी, कोई अच्छा नहीं था, और यह वैसे भी एक अधिक लचीला समाधान है)।

यह अभी भी बुरा क्यों है?

white-space: nowrap लेना क्रोमियम/वेबकिट पर प्रिंटिंग में पाठ लपेट देगा। यह अभी भी ठीक प्रिंट करता है, लेकिन यह बिल्कुल सही नहीं है, क्योंकि कुछ अतिरिक्त टेक्स्ट लपेटेंगे। इसे वास्तव में व्यावहारिक समाधान बनाने के लिए, आपको अभी भी ब्राउज़र-पता कोड करना है।

फिर से, मैं उचित चौड़ाई और ऊंचाइयों को तुरंत समझने के लिए इस कोड का उपयोग करने की सलाह देता हूं, फिर प्रत्येक ब्राउज़र के लिए सही आकारों का परीक्षण और हार्ड-कोड करने के लिए। यह एक बदसूरत समाधान है, लेकिन अंततः यह इस स्थिति में एकमात्र सचमुच मजबूत समाधान है।

Answer 2

मेरा मानना ​​है कि आप मध्य में iFrames में से एक को स्थिर चौड़ाई जोड़कर ब्राउज़र को "चाल" कर सकते हैं ... यह प्रिंट संस्करण को आकार देने के लिए मजबूर करता है, जिससे आपकी सारी जानकारी पृष्ठ पर वापस आती है .. मैंने केवल इस आईफ्रेम को संशोधित किया और आकार में वापस लाया (चौड़ाई नोटिस: 150%):

<iframe src="order/form.html" style="height: 1707px;width:150%">