2009-01-16 12 views
5

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

  • बॉब
  • फ्रेड
  • जॉन

>page break here<

  • बॉब
  • फ्रेड
  • जॉन

>page break here<

  • बॉब
  • फ्रेड
  • जॉन

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

मैं jQuery के साथ एएसपी.नेट एमवीसी का उपयोग कर रहा हूं (हालांकि एक सीधा जावास्क्रिप्ट समाधान ठीक है)।

संपादित करें: पेज-ब्रेक-XXX सीएसएस शैली उत्तर का हिस्सा बन रही है, लेकिन मैं स्क्रीन संस्करण से प्रिंट संस्करण HTML को गतिशील रूप से बनाने के साधनों में विशेष रूप से रूचि रखता हूं। नोट मैं 'प्रिंटर अनुकूल' पृष्ठ पर नेविगेट नहीं करना चाहता हूं और फिर उसे प्रिंट करना चाहता हूं। मैं सिर्फ ब्राउज़र प्रिंट बटन हिट करना चाहता हूं और जादू होता है।

उत्तर

10

ठीक है का उपयोग करते हुए, तो खाते में इस तरह मेरी पोस्ट कुछ के लिए टिप्पणियों आदि लेने के द्वारा मूल सूची क्लोन होगा:

यहां प्रदर्शन की आसानी के लिए, मैं पेज शैलियों पर उपयोग कर रहा हूं, लेकिन आप पृष्ठ संदर्भों का आसानी से उपयोग कर सकते हैं।

घोषणा निम्नलिखित शैलियों: अब

<!-- Intial display for screen --> 
<div class="no_print"> 
    <!-- Loop through users here using preferred looping/display method --> 
    <ul> 
     <li>Bob</li> 
     <li>Fred</li> 
     <li>John</li> 
    </ul> 
</div> 
<!-- Now loop through each user, highlighting as you go, but for printer* --> 
<div class="printable"> 
    <ul> 
     <li><b>Bob</b></li> 
     <li>Fred</li> 
     <li>John</li> 
    </ul> 
</div> 
<div class="printable"> 
    <ul> 
     <li>Bob</li> 
     <li><b>Fred</b></li> 
     <li>John</li> 
    </ul> 
</div> 
<div class="printable"> 
    <ul> 
     <li>Bob</li> 
     <li>Fred</li> 
     <li><b>John</b></li> 
    </ul> 
</div> 

:

<!-- media="print" means these styles will only be used by printing 
    devices --> 
<style type="text/css" media="print"> 
    .printable{ 
     page-break-after: always; 
    } 
    .no_print{ 
     display: none; 
    } 
</style> 
<!-- media="screen" means these styles will only be used by screen 
    devices (e.g. monitors) --> 
<style type="text/css" media="screen"> 
    .printable{ 
     display: none; 
    } 
</style> 
<!-- media types can be combined with commas to affect multiple devices --> 
<style type="text/css" media="screen,print"> 
    h1{ 
     font-family: Arial, Helvetica, sans-serif; 
     font-size: large; 
     font-weight: bold; 
    } 
</style> 

उसके बाद, आप देख कुछ इस तरह आपके विचार एचटीएमएल प्राप्त करने के लिए कुछ बड़े कार्य करने करने की जरूरत करने जा रहे हैं एक "उचित प्रदर्शन विधि" के लिए।

मैं सिर्फ MVC के साथ शुरू हो रही है, तो आप शायद ऐसा करने का एक बेहतर तरीका मिल गया है, लेकिन अब के लिए मैं शायद इस तरह की एक RenderPartial विधि का उपयोग करेंगे:

<% 
    /* 
    Using RenderPartial to render a usercontrol, 
    we're passing in the Model here as the Model for the control, 
    depends on where you've stored your objects really, then we 
    create a new anonymous type containing the properties we want 
    to set. 
    */ 

    // Display the main list 
    Html.RenderPartial("~/Views/Shared/Controls/UserList.ascx", 
     ViewData.Model, 
     new {HighlightUser = null, IsPrintable = false}); 

    // Loop through highlighting each user 
    foreach (var user in ViewData.Model) 
    { 
    Html.RenderPartial("~/Views/Shared/Controls/UserList.ascx", 
     ViewData.Model, 
     new {HighlightUser = user, IsPrintable = true}); 
    } 
%> 

आपका उपयोगकर्ता नियंत्रण इसके बाद डिस्प्ले के बड़े हिस्से को नियंत्रित कर सकते हैं, जिसमें उपयुक्त divs (या जो भी तत्व आप उपयोग करते हैं) की कक्षा को उचित रूप से सेट कर सकते हैं, और उपयोगकर्ता द्वारा बोल्ड किए गए एक के आधार पर बोल्ड कर सकते हैं - जैसा कि मैंने कहा था, संभवतया ऐसा करने का एक बेहतर तरीका है आंशिक सामान

जाहिर है, आप शायद उपयोगकर्ताओं के प्रदर्शन और प्रिंट के लिए पूरी तरह से अलग प्रतिपादन चाहते हैं - मुझे लगता है कि आप शायद jQuery की भलाई को छिपाने और सामान प्रदर्शित करने में काफी कुछ जोड़ रहे हैं, कि आप वास्तव में मुद्रित पर प्रदर्शित होने जा रहे हैं संस्करण, तो आप शायद दो अलग उपयोगकर्ता नियंत्रण चाहते हैं, और फिर IsPrintable संपत्ति में गुजरने के साथ दूर हो सकते हैं।

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

+0

मैंने इसे पोस्ट करने के बाद, मुझे यकीन नहीं था कि मुझे अभी अपना पिछला उत्तर संपादित करना चाहिए था, http://stackoverflow.com/questions/361802/is-it-ok-to-post-multiple-answers-to-a -वेस्टियन वास्तव में स्पष्ट नहीं किया था। यदि लोग ऑब्जेक्ट करते हैं, तो मुझे उन्हें गठबंधन करने और इसे हटाने में खुशी होगी। –

+0

मैंने अपने +1 को अपने अन्य उत्तर से हटा दिया है ताकि आप इसे हटा सकें और इसे रख सकें। मैंने अन्य कारणों के लिए निर्णय लिया है कि मैं तर्क तय करना चाहता हूं कि नियंत्रक में प्रतिलिपि कौन लेती है। इसलिए यह जवाब मुझे जो चाहिए वह बहुत करीब है। धन्यवाद। ;) – AnthonyWJones

+0

आप इसे आजमा सकते हैं: $ ('प्रिंट करने योग्य: अंतिम-बच्चा')। सीएसएस ('पृष्ठ-ब्रेक-आफ्टर', 'से बचें'); डुनो अगर संपत्ति पृष्ठ-ब्रेक-बाद होगी। –

2

मुझे यकीन नहीं है कि आप इसे सीएसएस के माध्यम से कर सकते हैं, लेकिन यहां कुछ शुरू करने के लिए कुछ है।

auto // Default. Insert a page break before/after the element if necessary 
always // Insert a page break before/after the element 
avoid // Avoid inserting a page break before/after the element 
left // Insert page breaks before/after the element until it reaches a blank left page 
right // Insert page breaks before/after the element until it reaches a blank right page 

यदि आप:

इन के मूल्यों ले:

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

+0

झाफ, इनपुट के लिए धन्यवाद लेकिन मैं एक प्रिंट पेज पर नेविगेट नहीं करना चाहता हूं।मैं एक ऐसा पृष्ठ चाहता हूं जिसमें स्क्रीन पर एक और एक अन्य प्रिंट हो। – AnthonyWJones

+0

पृष्ठ-ब्रेक-xxxx निश्चित रूप से उत्तर का हिस्सा बनता है लेकिन यह उस स्क्रीन एचटीएमएल की 'डुप्लिकेट' प्रतियां उत्पन्न नहीं करता है, जिसमें मुझे रूचि है। – AnthonyWJones

+0

यह कहां मुश्किल हो जाता है। जाहिर है, एक मीडिया = "प्रिंट" के साथ आप प्रिंटर के लिए स्क्रीन शैलियों को ओवरराइड कर सकते हैं, लेकिन मुझे यकीन नहीं है कि आप पृष्ठ के तत्व दोहरा सकते हैं, लेकिन हर बार अंतर के साथ। सीएसएस में सामग्री उत्पन्न करने के तरीके हैं, उदा। http://www.w3schools.com/Css/pr_gen_content.asp –

1

आपको जावास्क्रिप्ट के माध्यम से इसे सब कुछ करने की आवश्यकता होगी, एक प्रिंट लिंक बनाएं जब कॉल पर क्लिक करें window.print()।

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

यदि आप बाद में पृष्ठ को साफ़ करना चाहते हैं तो अवांछित कंटेनर को साफ़ करने के लिए SetInterval का उपयोग करके अंतराल सेट करें। मैं window.print() को कॉल करने के तुरंत बाद इसे नहीं करूँगा क्योंकि मुझे लगता है कि प्रिंटर HTML परिवर्तनों पर नहीं उठाएगा, हालांकि एक त्वरित परीक्षण आपको अन्यथा बताएगा।

यदि जावास्क्रिप्ट का उपयोग करके अपने पृष्ठ के प्रिंट को सुनने का कोई तरीका है तो आप इसे भी हुक कर सकते हैं।

संपादित करें: आप jQuery का उपयोग कर रहे जैसा कि मैंने

$('#listID').clone().appendTo('#hiddencontainer') 

Clone documentation

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