1. घर
  2. सवाल और जवाब
  3. वेबपृष्ठ

वेबपृष्ठ

2012-10-21 18 views
37

का विशिष्ट भाग प्रिंट करें मैं अपने आवेदन के एक विशिष्ट भाग को मुद्रित करने का प्रयास कर रहा हूं।वेबपृष्ठ

एप्लिकेशन में उपयोगकर्ताओं की एक सूची है, जो उनका पहला और अंतिम नाम प्रदर्शित करती है। जब मैं किसी उपयोगकर्ता को क्लिक करता हूं तो मुझे उनके बारे में अधिक विस्तृत जानकारी के साथ एक पॉपअप मिलता है।

मैं क्लिक किए गए उपयोगकर्ता के लिए केवल पॉपअप प्रिंट करने के बारे में कैसे जाऊं? पॉपअप इस तरह दिखता है:

<div id="user<?=$user->id;?>" class="popup"> 
     <div class="details"> 
      User details... 
     </div> 
     <a href="#print">Print</a> 
</div>

प्रिंट बटन अभी तक हालांकि काम नहीं कर रहा।

स्रोत

2012-10-21 ItsGreg

+2

संभव डुप्लिकेट की [

केवल प्रिंट?] हम मुद्रित नहीं करना चाहते हैं। (http://stackoverflow.com/questions/468881/print-div-id-printarea-div केवल) –

उत्तर

92

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

var prtContent = document.getElementById("your div id"); 
var WinPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0'); 
WinPrint.document.write(prtContent.innerHTML); 
WinPrint.document.close(); 
WinPrint.focus(); 
WinPrint.print(); 
WinPrint.close();

स्रोत

2012-10-21 10:58:16 pmtamal

+19

का उपयोग करें सावधान रहें यदि आप इस कोड के साथ प्रिंट कर रहे हैं तो किसी भी सीएसएस को जिस तरह से आप चाहते हैं उसे प्रस्तुत करने की आवश्यकता है। यदि ऐसा होता है तो आपको यह सुनिश्चित करना होगा कि आप इसे पृष्ठ पर 'WinPrint.document.write (cssLinkTag)' का उपयोग करके भी जोड़ दें। –

+0

क्या होगा अगर मैं अभिविन्यास बदलना चाहता हूं? – Si8

+0

कोड 'letf' -> 'left' – Sharky

7

आप एक नई विंडो खोलने (या एक नया पृष्ठ पर नेविगेट) करने के लिए बस के बारे में जानकारी आप उपयोगकर्ता मुद्रित करने के लिए सक्षम होने के लिए

Javscript इच्छा युक्त होगा:

function printInfo(ele) { 
    var openWindow = window.open("", "title", "attributes"); 
    openWindow.document.write(ele.previousSibling.innerHTML); 
    openWindow.document.close(); 
    openWindow.focus(); 
    openWindow.print(); 
    openWindow.close(); 
}

HTML:

<div id="...."> 
    <div> 
     content to print 
    </div><a href="#" onclick="printInfo(this)">Print</a> 
</div>

यहां कुछ नोट्स: एंकर को इसके बीच सफेद जगह नहीं होना चाहिए और

प्रिंट करने के लिए सामग्री युक्त div 10

स्रोत

2012-10-21 10:56:47 SReject

+0

यह शानदार है! बेशक अगर आप अपने आइटम के बाद प्रिंट लिंक नहीं चाहते हैं, या आप इसे थोड़ा सुंदर बनाना चाहते हैं, तो आपको कुछ चुनौतियां हैं। मैंने href को एक आईडी देकर, गैर ब्रेकिंग स्पेस पर प्रिंट बदलकर चुनौती हल की, और getElementById के साथ कहीं और क्लिक() ईवेंट का संदर्भ दिया। धन्यवाद!! – Mmm

+0

नहीं - बस सीएसएस मीडिया = "प्रिंट" –

0

के रूप में यहाँ उत्तर दिया: https://stackoverflow.com/a/1072151/421243, आप विशिष्ट अनुभाग एक छिपा फ्रेम करने के लिए जावास्क्रिप्ट के साथ जोड़ने, यह ध्यान देते हैं, और यह प्रिंट कर सकते हैं।

स्रोत

2015-02-04 22:32:01

+0

यह जावास्क्रिप्ट –

1

printPageArea() फ़ंक्शन में, उस विशिष्ट div आईडी को पास करें जिसे आप प्रिंट करना चाहते हैं। मुझे codexworld.com से यह जावास्क्रिप्ट कोड मिला है।

function printPageArea(areaID){ 
    var printContent = document.getElementById(areaID); 
    var WinPrint = window.open('', '', 'width=900,height=650'); 
    WinPrint.document.write(printContent.innerHTML); 
    WinPrint.document.close(); 
    WinPrint.focus(); 
    WinPrint.print(); 
    WinPrint.close(); 
}

पूरा कोड और ट्यूटोरियल यहां से देखे जा सकते हैं - How to Print Page Area using JavaScript। $('#div2').print();

$.fn.extend({ 
    print: function() { 
     var frameName = 'printIframe'; 
     var doc = window.frames[frameName]; 
     if (!doc) { 
      $('<iframe>').hide().attr('name', frameName).appendTo(document.body); 
      doc = window.frames[frameName]; 
     } 
     doc.document.body.innerHTML = this.html(); 
     doc.window.print(); 
     return this; 
    } 
});

कार्रवाई here में यह देखें:

स्रोत

2016-05-05 07:51:38 JoyGuru

5

मैं चयनित तत्व के एचटीएमएल मुद्रित करने के लिए इस jQuery विस्तार कर दिया।

स्रोत

2016-10-13 14:03:56

+0

के साथ है क्रोम के साथ मेरे लिए काम नहीं करता है। इसके अलावा आपको जवाब में अपना कोड पोस्ट करने का प्रयास करना चाहिए। – Mike

+2

मुझे लगता है कि, किसी ऐसे व्यक्ति को कमजोर करने के बजाय जिसने एक आसान बचाया जवाब पोस्ट किया है, हम वास्तव में एक समुदाय के रूप में टिप्पणी करके उन्हें डराने की कोशिश कर सकते हैं और सिर्फ अपने आप को खराब कोड कॉपी कर सकते हैं v_v सभी को इतनी familar होने की उम्मीद न करें StackOverflow शिष्टाचार की जटिलताओं के साथ ... – fresskoma

+0

धन्यवाद लेकिन सीएसएस फ़ाइलों को क्यों जोड़ा जा सकता है? –

4

सभी जटिल जावास्क्रिप्ट के स्थान पर, आप वास्तव में इस सरल CSS साथ प्राप्त कर सकते हैं: बस केवल सामग्री आप प्रिंट करना चाहते हैं के प्रदर्शन के लिए दो सीएसएस फ़ाइलें, अपने सामान्य स्क्रीन प्रदर्शन के लिए एक, और एक अन्य का उपयोग करें। इस बाद की फ़ाइल में, वह सब कुछ छुपाएं जिसे आप मुद्रित नहीं करना चाहते हैं, केवल पॉप अप प्रदर्शित करें।

दोनों सीएसएस फ़ाइलों के media विशेषता परिभाषित करने के लिए याद रखें:

<link rel="stylesheet" href="screen-css.css" media="all" /> 
<link rel="stylesheet" href="print-css.css" media="print" />

स्रोत

2017-03-30 06:48:10

-1

यहाँ मेरी उन्नत संस्करण मुद्रित करने के लिए जब हम सीएसएस फ़ाइलें लोड करना चाहते हैं या वहाँ भाग में छवि संदर्भ हैं कि है।

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

var prtContent = document.getElementById("order-to-print"); 
var WinPrint = window.open('', '', 'left=0,top=0,width=384,height=900,toolbar=0,scrollbars=0,status=0'); 
WinPrint.document.write('<html><head>'); 
WinPrint.document.write('<link rel="stylesheet" href="assets/css/print/normalize.css">'); 
WinPrint.document.write('<link rel="stylesheet" href="assets/css/print/receipt.css">'); 
WinPrint.document.write('</head><body onload="print();close();">'); 
WinPrint.document.write(prtContent.innerHTML); 
WinPrint.document.write('</body></html>'); 
WinPrint.document.close(); 
WinPrint.focus();

स्रोत

2017-07-04 03:29:03 hailong

1

बस उस सामग्री को छिपाने के लिए सीएसएस का उपयोग करें जिसे आप मुद्रित नहीं करना चाहते हैं। उपयोगकर्ता प्रिंट का चयन करता है - पेज "मीडिया =" प्रिंट दिखेगा प्रिंट " सीएसएस सामग्री को छिपाने के लिए निर्देश दिए गए हैं" पेज के लेआउट के बारे में निर्देश के लिए सीएसएस

मीडिया =। "

<!-- CSS for the things we want to print (print view) --> 
<style type="text/css" media="print"> 

#SCREEN_VIEW_CONTAINER{ 
     display: none; 
    } 
.other_print_layout{ 
     background-color:#FFF; 
    } 
</style> 

<!-- CSS for the things we DO NOT want to print (web view) --> 
<style type="text/css" media="screen"> 

    #PRINT_VIEW{ 
     display: none; 
    } 
.other_web_layout{ 
     background-color:#E0E0E0; 
    } 
</style> 

<div id="SCREEN_VIEW_CONTAINER"> 
    the stuff I DO NOT want printed is here and will be hidden - 
    and not printed when the user selects print. 
</div> 

<div id="PRINT_VIEW"> 
    the stuff I DO want printed is here. 
</div>

स्रोत

2018-01-11 21:09:15 Stnfordly

+1

यह अच्छी तरह से काम करता है - और इतना आसान और स्पष्ट है - धन्यवाद! :) –

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

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