एक DIV की सामग्री प्रिंट करें

335

DIV की सामग्री को प्रिंट करने का सबसे अच्छा तरीका क्या है?

javascript  jquery  html  printing 
— usertest
स्रोत
— गाबे
1
प्रिंट से आपका क्या मतलब है? एक भौतिक प्रिंटर में के रूप में?
— यूरी फकटोरोविच
एक प्रिंटर के रूप में "प्रिंट"? या दस्तावेज़ में?
— एड स्कीबोर
मुझे अब तक का सबसे अच्छा प्लगइन मिला है जिसे etimbo github.com/etimbo/jquery-print-preview-plugin
— MaxI
3
बस किसी के लिए एक संदर्भ के रूप में एक div मुद्रण के इस सवाल के समाधान के लिए खोज करने की कोशिश कर रहा है। मुझे निम्नलिखित उत्तर बहुत ही उपयोगी लगे: stackoverflow.com/a/7532581/405117
— विक्रम

जवाबों:

517

पिछले संस्करण में थोड़ा बदलाव - CHROME पर परीक्षण किया गया

function PrintElem(elem)
{
    var mywindow = window.open('', 'PRINT', 'height=400,width=600');

    mywindow.document.write('<html><head><title>' + document.title  + '</title>');
    mywindow.document.write('</head><body >');
    mywindow.document.write('<h1>' + document.title  + '</h1>');
    mywindow.document.write(document.getElementById(elem).innerHTML);
    mywindow.document.write('</body></html>');

    mywindow.document.close(); // necessary for IE >= 10
    mywindow.focus(); // necessary for IE >= 10*/

    mywindow.print();
    mywindow.close();

    return true;
}
— बिल पैत्ज़के
स्रोत
8
यह एक त्वरित उपाय है। आदर्श समाधान मुद्रण के लिए एक अलग सीएसएस का उपयोग करना है। शायद आप अपनी समस्या के विवरण (आवश्यकताओं) के बारे में विस्तार से बता सकते हैं।
— बिल पेत्ज़के
6
आप पॉपअप विंडो में स्टाइलशीट का संदर्भ ले सकते हैं। <Head> टैग: mywindow.document.write ('<लिंक rel = "स्टाइलशीट" href = "main.css" प्रकार = "text / css" />') के बीच कोड की एक और पंक्ति जोड़ें;
— बिल पैत्ज़के
5
@ राहिल इसे बदलकर: mywindow.document.close (); mywindow.focus (); mywindow.print (); mywindow.close ();
— ROFLwTIME
3
^ newwindow.focus जोड़ें (); क्रॉस-ब्राउज़र को प्रिंट करने में सक्षम करने के लिए।
— जैकमोनी
7
यह कभी-कभी होता है यदि प्रिंट पूर्वावलोकन लोड करने में विफल रहता है, हो सकता है कि जब प्रिंट करने के लिए सामग्री काफी बड़ी हो (मैंने इसे केवल क्रोम के साथ देखा था, जबकि एक ही पृष्ठ फ़ायरफ़ॉक्स में पूर्णता छापता है, हालांकि मैं इसे फ़ायरफ़ॉक्स या अन्य ब्राउज़र में भी नहीं कर सकता हूं)। सबसे अच्छा तरीका है कि मैं विंडोज़ लोड होने के बाद ही प्रिंट (और पास) चलाऊं। तो इसके बाद: इसे mywindow.document.write(data);जोड़ें: mywindow.document.write('<script type="text/javascript">$(window).load(function() { window.print(); window.close(); });</script>');और हटा दें: mywindow.print();औरmywindow.close();
— Fabius
164

मुझे लगता है कि एक बेहतर उपाय है। पूरे दस्तावेज़ को कवर करने के लिए अपना div बनाएं, लेकिन केवल तभी जब वह प्रिंट हो:

@media print {
    .myDivToPrint {
        background-color: white;
        height: 100%;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        margin: 0;
        padding: 15px;
        font-size: 14px;
        line-height: 18px;
    }
}
— ईसा पूर्व।
स्रोत
बिल्कुल सही, एक पॉपअप की तुलना में बहुत अच्छा।
— ग्रीनवेबदेव
5
दुर्भाग्य से, यह IE में अपेक्षित रूप से काम नहीं करेगा, इसे देखें: stackoverflow.com/questions/975129/…
— jarek.jpa
16
सामग्री जो कई पृष्ठों पर ओवरफ्लो होनी चाहिए, क्रोम में छंटनी लगती है।
— इस्माईल स्मरनॉउन
IE पर आपको बाकी दस्तावेज़ छिपाने की आवश्यकता है। निम्नानुसार संशोधित करना काम करेगा: @मीडिया प्रिंट {बॉडी * {प्रदर्शन: कोई नहीं; } .myDivToPrint {प्रदर्शन: ब्लॉक; पृष्ठभूमि-रंग: सफेद; ऊंचाई: 100%; चौड़ाई: 100%; स्थिति: निश्चित; शीर्ष: 0; बायां: 0; मार्जिन: 0; गद्दी: 15 पीएक्स; फ़ॉन्ट-आकार: 14 पीएक्स; लाइन-ऊंचाई: 18 पीएक्स; }}
— RonnBlack
2
आपको z-index लगाने की आवश्यकता हो सकती है: 9999999; यदि आपके पास अन्य तत्व उच्चतर हैं।
— एडम एम।
43

हालाँकि यह @gabe द्वारा कहा गया है , यदि आप jQuery का उपयोग कर रहे हैं, तो आप मेरे printElementप्लगइन का उपयोग कर सकते हैं ।

यहाँ एक नमूना है , और यहाँ प्लगइन के बारे में अधिक जानकारी है ।

उपयोग सीधे आगे है, बस एक jQuery चयनकर्ता के साथ एक तत्व को पकड़ो और इसे प्रिंट करें:

$("#myDiv").printElement();

मुझे उम्मीद है यह मदद करेगा!

— एरिक
स्रोत
14
8 साल बाद, यह "a.browser अपरिभाषित है" का उत्पादन करेगा क्योंकि .browser कॉल को jquery 1.9 में हटा दिया गया है
— KingsInnerSoul
1
@KingsInnerSoul jQuery उपयोगकर्ताओं के साथ असभ्य नहीं है, ये समय उनके लिए काफी कठोर है; पी
— अलेक्जेंड्रे डब्युटकोर्ट
22

Jquery का उपयोग करते हुए, बस इस फ़ंक्शन का उपयोग करें:

<script>
function printContent(el){
var restorepage = $('body').html();
var printcontent = $('#' + el).clone();
$('body').empty().html(printcontent);
window.print();
$('body').html(restorepage);
}
</script>

आपका प्रिंट बटन इस तरह दिखेगा:

<button id="print" onclick="printContent('id name of your div');" >Print</button>

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

<script>
function printContent(el){
var restorepage = $('body').html();
var printcontent = $('#' + el).clone();
var enteredtext = $('#text').val();
$('body').empty().html(printcontent);
window.print();
$('body').html(restorepage);
$('#text').html(enteredtext);
}
</script>
<textarea id="text"></textarea>
— गैरी हेस
स्रोत
$ ( 'शरीर') एचटीएमएल (restorepage)। काम नहीं करेगा क्योंकि उस समय शरीर का कोई तत्व उपलब्ध नहीं है। इसलिए इसे लोकेशन के साथ बदलना बेहतर होगा। लोड ();
— डिबगर
यदि आप पृष्ठ को पुनः लोड करते हैं, तो आप किसी भी जानकारी को प्रपत्रों, या किसी अन्य सेटिंग में हटा देंगे, जो वहां होनी चाहिए। यह पूरी तरह से ठीक काम करता है। यदि आप कोड को देखने के लिए समय लेंगे, तो आप देखेंगे कि वेरिएबल पेज को रिप्लेस करने के लिए सभी पेज की जानकारी उपलब्ध है। मेरे कोड को संपादित करने की कोशिश करना बंद करें और या तो अपने लिए परीक्षण करें या जानें कि फ़ंक्शन के प्रत्येक भाग क्या करते हैं।
— गैरी हेस
यह बेहतर है। इसमें पृष्ठ डिज़ाइन शामिल है, जो ऊपर उल्लिखित उन लोगों के विपरीत है जहाँ मुझे अभी भी हेडर आदि से सीएसएस लिंक डालने की आवश्यकता है!
— जॉर्ज़
जिस तरह से आप गुजर चुके हैं elवह भयानक है, खासकर जब से jQ का उपयोग कर रहा है। बस पास करने selectorऔर हार्ड कोडित से छुटकारा पाने के लिए बेहतर है#
— रोजा
मैंने हमेशा इस पद्धति का उपयोग किया आज मैंने देखा कि यह एंड्रॉइड डिवाइस (Google क्रोम) पर ठीक से काम नहीं कर रहा है। पृष्ठ का मुद्रण योग्य क्षेत्र हर बार बदलता है और इसमें कुछ अतिरिक्त भाग होते हैं el। मुझे लगता है कि जब शरीर को बहाल किया जा रहा है तो प्रिंट कमांड भेजा जाता है।
— अली शेखपुर
18

यहां से http://forums.asp.net/t/1261525.aspx

<html>

<head>
    <script language="javascript">
        function printdiv(printpage) {
            var headstr = "<html><head><title></title></head><body>";
            var footstr = "</body>";
            var newstr = document.all.item(printpage).innerHTML;
            var oldstr = document.body.innerHTML;
            document.body.innerHTML = headstr + newstr + footstr;
            window.print();
            document.body.innerHTML = oldstr;
            return false;
        }
    </script>
    <title>div print</title>
</head>

<body>
    //HTML Page //Other content you wouldn't like to print
    <input name="b_print" type="button" class="ipt" onClick="printdiv('div_print');" value=" Print ">

    <div id="div_print">

        <h1 style="Color:Red">The Div content which you want to print</h1>

    </div>
    //Other content you wouldn't like to print //Other content you wouldn't like to print
</body>

</html>
— huston007
स्रोत
1
यह पाद लेख को 2 भागों में विभाजित करने के लिए एक संशोधन की आवश्यकता है। क्योंकि ब्रूज़र वर्तमान पृष्ठ के मुख्य छोर के रूप में "</ body>" का उपयोग करता है। var footstr1 = "</"; var footstr2 = "बॉडी>"; var footerstr = footstr1 + footstr12;
— मिर्ज़ई
13

मैं Bill Paetzkeएक div प्रिंट छवियों का जवाब देने के लिए इस्तेमाल किया, लेकिन यह गूगल क्रोम के साथ काम नहीं किया

मैं सिर्फ myWindow.onload=function(){यह काम करने के लिए इस लाइन को जोड़ने की जरूरत है और यहाँ पूर्ण कोड है

<html>
<head>
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.min.js"> </script>
    <script type="text/javascript">
        function PrintElem(elem) {
            Popup($(elem).html());
        }

        function Popup(data) {
            var myWindow = window.open('', 'my div', 'height=400,width=600');
            myWindow.document.write('<html><head><title>my div</title>');
            /*optional stylesheet*/ //myWindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
            myWindow.document.write('</head><body >');
            myWindow.document.write(data);
            myWindow.document.write('</body></html>');
            myWindow.document.close(); // necessary for IE >= 10

            myWindow.onload=function(){ // necessary if the div contain images

                myWindow.focus(); // necessary for IE >= 10
                myWindow.print();
                myWindow.close();
            };
        }
    </script>
</head>
<body>
    <div id="myDiv">
        This will be printed.
        <img src="image.jpg"/>
    </div>
    <div>
        This will not be printed.
    </div>
    <div id="anotherDiv">
        Nor will this.
    </div>
    <input type="button" value="Print Div" onclick="PrintElem('#myDiv')" />
</body>
</html>

अगर किसी को सिर्फ आईडी के साथ एक डिव प्रिंट करने की आवश्यकता होती है, तो उसे jquery को लोड करने की आवश्यकता नहीं है

यहाँ यह करने के लिए शुद्ध जावास्क्रिप्ट कोड है

<html>
<head>
    <script type="text/javascript">
        function PrintDiv(id) {
            var data=document.getElementById(id).innerHTML;
            var myWindow = window.open('', 'my div', 'height=400,width=600');
            myWindow.document.write('<html><head><title>my div</title>');
            /*optional stylesheet*/ //myWindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
            myWindow.document.write('</head><body >');
            myWindow.document.write(data);
            myWindow.document.write('</body></html>');
            myWindow.document.close(); // necessary for IE >= 10

            myWindow.onload=function(){ // necessary if the div contain images

                myWindow.focus(); // necessary for IE >= 10
                myWindow.print();
                myWindow.close();
            };
        }
    </script>
</head>
<body>
    <div id="myDiv">
        This will be printed.
        <img src="image.jpg"/>
    </div>
    <div>
        This will not be printed.
    </div>
    <div id="anotherDiv">
        Nor will this.
    </div>
    <input type="button" value="Print Div" onclick="PrintDiv('myDiv')" />
</body>
</html>

मुझे आशा है कि यह किसी की मदद कर सकता है

— रॉबर्ट
स्रोत
यह मेरे लिए काम किया! कैमलकेस ने मुझे काट लिया, हालांकि मूल उत्तर "मायविंडो" बनाम "मायविंडो" का उपयोग करता है। धन्यवाद!
— opcode
12 
function printdiv(printdivname) {
    var headstr = "<html><head><title>Booking Details</title></head><body>";
    var footstr = "</body>";
    var newstr = document.getElementById(printdivname).innerHTML;
    var oldstr = document.body.innerHTML;
    document.body.innerHTML = headstr+newstr+footstr;
    window.print();
    document.body.innerHTML = oldstr;
    return false;
}

यह divआपके इच्छित क्षेत्र को प्रिंट करेगा और सामग्री को वापस उसी तरह सेट करेगा जैसा वह था। printdivnameहै divमुद्रित करने के लिए।

— टेकी
स्रोत
यह पाद लेख को 2 भागों में विभाजित करने के लिए एक संशोधन की आवश्यकता है। क्योंकि ब्रूज़र वर्तमान पृष्ठ के मुख्य छोर के रूप में "</ body>" का उपयोग करता है। var footstr1 = "</"; var footstr2 = "बॉडी>"; var footerstr = footstr1 + footstr12;
— मिर्ज़ई
यह सरल है! लेकिन हाँ, आपको मिर्ज़ई से हैक करने की ज़रूरत है, बॉडी टैग टूटने की संभावना है और आप टूटे हुए स्वरूपण को प्राप्त करेंगे। हैक के साथ, यह बहुत अच्छा काम करता है! विशेष प्रिंट शैलियों की सुविधा के लिए आप अपने स्वयं के आंतरिक आवरण को भी जोड़ सकते हैं। यह स्वीकृत उत्तर होना चाहिए।
— user2662680
9

एक अलग प्रिंट स्टाइलशीट बनाएं जो आपके द्वारा मुद्रित की जाने वाली सामग्री को छोड़कर अन्य सभी तत्वों को छुपाता है। 'media="print"जब आप इसे लोड करते हैं तो इसका उपयोग करें :

<link rel="stylesheet" type="text/css" media="print" href="print.css" />

यह आपको प्रिंटआउट के लिए पूरी तरह से अलग स्टाइलशीट लोड करने की अनुमति देता है।

यदि आप पृष्ठ के लिए ब्राउज़र के प्रिंट डायलॉग को प्रदर्शित करने के लिए बाध्य करना चाहते हैं, तो आप इसे JQuery का उपयोग करके लोड पर कर सकते हैं:

$(function() { window.print(); });

या किसी अन्य घटना से आप ट्रिगर करना चाहते हैं जैसे कि एक बटन क्लिक करने वाला उपयोगकर्ता।

— कार्ल रुस्मन
स्रोत
2
हाँ, यह भी काम करेगा; यह कठिन है - ठीक है, असंभव - यह जानने के लिए कि परिदृश्य क्या है।
— नुकीले
मैं मानता हूं कि एक अलग सीएसएस आदर्श समाधान है। और div की सामग्री को एक नई विंडो में कॉपी करना एक त्वरित समाधान है।
— बिल पैत्ज़के
9

मुझे लगता है कि अब तक प्रस्तावित समाधानों में निम्नलिखित कमियां हैं:

  1. CSS मीडिया क्वेरी समाधान मान लेते हैं कि प्रिंट करने के लिए केवल एक div है।
  2. जावास्क्रिप्ट समाधान केवल कुछ ब्राउज़रों पर काम करते हैं।
  3. मूल विंडो सामग्री को नष्ट करने और एक गड़बड़ पैदा करता है।

मैंने ऊपर के समाधानों में सुधार किया है। यहाँ कुछ ऐसा है जो मैंने परीक्षण किया है जो निम्नलिखित लाभों के साथ वास्तव में अच्छी तरह से काम करता है।

  1. IE, क्रोम, सफारी और फ़ायरफ़ॉक्स सहित सभी ब्राउज़रों पर काम करता है।
  2. मूल विंडो को नष्ट और पुनः लोड नहीं करता है।
  3. एक पेज में DIV के किसी भी नंबर को प्रिंट कर सकते हैं।
  4. त्रुटि प्रवण स्ट्रिंग से बचने के लिए html टेम्प्लेट का उपयोग करता है।

नोट करने के लिए मुख्य बिंदु:

  1. नए बनाए गए विंडो पर एक ओलोड = "window.print ()" होना चाहिए।
  2. माता-पिता से targetwindow.close () या targetwindow.print () को कॉल न करें।
  3. सुनिश्चित करें कि आप targetwindow.document.close () और target.focus () करें
  4. मैं jquery का उपयोग कर रहा हूं, लेकिन आप सादे जावास्क्रिप्ट का उपयोग करके भी यही तकनीक कर सकते हैं।
  5. आप इसे यहाँ क्रिया देख सकते हैं http://math.tools/table/multiplication । आप प्रत्येक बॉक्स को अलग से प्रिंट कर सकते हैं, बॉक्स हैडर पर प्रिंट बटन पर क्लिक करके।

<script id="print-header" type="text/x-jquery-tmpl">
   <html>
   <header>
       <title>Printing Para {num}</title>
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
       <style>
          body {
            max-width: 300px;
          }
       </style>
   </header>
   <body onload="window.print()">
   <h2>Printing Para {num} </h2>
   <h4>http://math.tools</h4>
</script>
<script id="print-footer" type="text/x-jquery-tmpl">
    </body>
    </html>
</script>
<script>
$('.printthis').click(function() {
   num = $(this).attr("data-id");
   w = window.open();
   w.document.write(
                   $("#print-header").html().replace("{num}",num)  +
                   $("#para-" + num).html() +
                   $("#print-footer").html() 
                   );
   w.document.close();
   w.focus();
   //w.print(); Don't do this otherwise chrome won't work. Look at the onload on the body of the newly created window.
   ///w.close(); Don't do this otherwise chrome won't work
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a class="btn printthis" data-id="1" href="#" title="Print Para 1"><i class="fa fa-print"></i> Print Para 1</a>
<a class="btn printthis" data-id="2" href="#" title="Print Para 2"><i class="fa fa-print"></i> Print Para 2</a>
  
<p class="para" id="para-1">
  Para 1 : Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  

<p class="para" id="para-2">
  Para 2 : Lorem 2 ipsum 2 dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
स्निपेट का विस्तार करें

— dors
स्रोत
यह उत्कृष्ट था और स्वीकृत परिणामों की तुलना में क्रॉस-ब्राउज़र पर काम करना बेहतर था!
— dama_do_bling
7

मैंने इस परिदृश्य को संबोधित करने के लिए एक प्लगइन लिखा है। मैं वहाँ प्लगइन्स से नाखुश था, और कुछ अधिक व्यापक / विन्यास करने के लिए तैयार था।

https://github.com/jasonday/printThis

— जेसन
स्रोत
1
आपकी कड़ी मेहनत जेसन के लिए बहुत बहुत धन्यवाद ..... !! वास्तव में मेरी अधिक परियोजनाओं में उपयोग करने जा रहा है। क्या एक मन उड़ाने प्लगइन आदमी ......
6

स्वीकृत समाधान काम नहीं कर रहा था। Chrome एक रिक्त पृष्ठ मुद्रित कर रहा था क्योंकि यह समय में छवि को लोड नहीं कर रहा था। यह दृष्टिकोण काम करता है:

संपादित करें: ऐसा प्रतीत होता है कि स्वीकृत समाधान मेरी पोस्ट के बाद संशोधित किया गया था। क्यों होता है पतन? यह समाधान भी काम करता है।

    function printDiv(divName) {

        var printContents = document.getElementById(divName).innerHTML;
        w = window.open();

        w.document.write(printContents);
        w.document.write('<scr' + 'ipt type="text/javascript">' + 'window.onload = function() { window.print(); window.close(); };' + '</sc' + 'ript>');

        w.document.close(); // necessary for IE >= 10
        w.focus(); // necessary for IE >= 10

        return true;
    }
— जिंदादिल प्यार
स्रोत
4

मुझे पता है कि यह एक पुराना प्रश्न है, लेकिन मैंने इस समस्या को हल कर दिया है w jQuery। 

function printContents(id) {
    var contents = $("#"+id).html();

    if ($("#printDiv").length == 0) {
      var printDiv = null;
      printDiv = document.createElement('div');
      printDiv.setAttribute('id','printDiv');
      printDiv.setAttribute('class','printable');
      $(printDiv).appendTo('body');
    }

    $("#printDiv").html(contents);

    window.print();

    $("#printDiv").remove();
}

सीएसएस

  @media print {
    .non-printable, .fancybox-outer { display: none; }
    .printable, #printDiv { 
        display: block; 
        font-size: 26pt;
    }
  }
— जाज का
स्रोत
3

हालांकि @BC का उत्तर किसी एक पृष्ठ को छापने के लिए सबसे अच्छा था।

लेकिन ctrl + P के साथ एक ही समय में A4 आकार के कई पेज प्रिंट करने के लिए निम्नलिखित समाधान मदद कर सकते हैं। 

@media print{
html *{
    height:0px!important;
    width:0px !important;
    margin: 0px !important;
    padding: 0px !important;
    min-height: 0px !important;
    line-height: 0px !important;
    overflow: visible !important;
    visibility: hidden ;


}


/*assing myPagesClass to every div you want to print on single separate A4 page*/

 body .myPagesClass {
    z-index: 100 !important;
    visibility: visible !important;
    position: relative !important;
    display: block !important;
    background-color: lightgray !important;
    height: 297mm !important;
    width: 211mm !important;
    position: relative !important;

    padding: 0px;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    orphans: 0!important;
    widows: 0!important;
    overflow: visible !important;
    page-break-after: always;

}
@page{
    size: A4;
    margin: 0mm ;
    orphans: 0!important;
    widows: 0!important;
}}
— अर्सलन
स्रोत
2
  • एक नई विंडो खोलें
  • नई विंडो के डॉक्यूमेंट ऑब्जेक्ट को खोलें और उसमें एक साधारण डॉक्यूमेंट लिखें, जिसमें आपके द्वारा दी गई और आवश्यक HTML हेडर आदि कुछ भी नहीं है - आप अपनी सामग्री के आधार पर डॉक्यूमेंट को स्टाइलशीट में रखना चाहते हैं।
  • Window.print () कॉल करने के लिए नए पेज में एक स्क्रिप्ट डालें
  • स्क्रिप्ट को ट्रिगर करें
— नुकीले
स्रोत
2

यहाँ मेरा jquery प्रिंट प्लगइन है

(function ($) {

$.fn.printme = function () {
    return this.each(function () {
        var container = $(this);

        var hidden_IFrame = $('<iframe></iframe>').attr({
            width: '1px',
            height: '1px',
            display: 'none'
        }).appendTo(container);

        var myIframe = hidden_IFrame.get(0);

        var script_tag = myIframe.contentWindow.document.createElement("script");
        script_tag.type = "text/javascript";
        script = myIframe.contentWindow.document.createTextNode('function Print(){ window.print(); }');
        script_tag.appendChild(script);

        myIframe.contentWindow.document.body.innerHTML = container.html();
        myIframe.contentWindow.document.body.appendChild(script_tag);

        myIframe.contentWindow.Print();
        hidden_IFrame.remove();

    });
};
})(jQuery);
— karaxuna
स्रोत
2

यदि आप मूल दस्तावेज़ (इनलाइन शैलियों सहित) से सभी शैलियों को प्राप्त करना चाहते हैं, तो आप इस दृष्टिकोण का उपयोग कर सकते हैं।

  1. पूरा दस्तावेज़ कॉपी करें
  2. शरीर को उस तत्व से बदलें, जिसे आप प्रिंट करना चाहते हैं।

कार्यान्वयन:

class PrintUtil {
  static printDiv(elementId) {
    let printElement = document.getElementById(elementId);
    var printWindow = window.open('', 'PRINT');
    printWindow.document.write(document.documentElement.innerHTML);
    setTimeout(() => { // Needed for large documents
      printWindow.document.body.style.margin = '0 0';
      printWindow.document.body.innerHTML = printElement.outerHTML;
      printWindow.document.close(); // necessary for IE >= 10
      printWindow.focus(); // necessary for IE >= 10*/
      printWindow.print();
      printWindow.close();
    }, 1000)
  }   
}
— स्टीफन नॉरबर्ग
स्रोत
2
मुझे नहीं पता कि यह सबसे अच्छा समाधान है, लेकिन यह पूरी तरह से काम करता है। धन्यवाद!
— BRogers
2

नोट: यह केवल jQuery सक्षम साइटों के साथ काम करता है

इस शांत चाल के साथ यह बहुत सरल है। इसने मेरे लिए Google Chrome ब्राउज़र में काम किया । फ़ायरफ़ॉक्स अभ्यस्त आप एक प्लगइन के बिना पीडीएफ के लिए प्रिंट करने के लिए अनुमति देते हैं।

  1. सबसे पहले, निरीक्षक (Ctrl + Shift + I) / (Cmd + विकल्प + I) का उपयोग करके खोलें।
  2. इस कोड को कंसोल में टाइप करें:
var jqchild = document.createElement('script');
jqchild.src = "https://cdnjs.cloudflare.com/ajax/libs/jQuery.print/1.5.1/jQuery.print.min.js";
document.getElementsByTagName('body')[0].appendChild(jqchild);
$("#myDivWithStyles").print(); // Replace ID with yours
  1. यह प्रिंट डायलॉग लॉन्च करता है। एक भौतिक प्रिंट लें या इसे पीडीएफ (क्रोम में) में सेव करें। किया हुआ!

तर्क सरल है। हम एक नया स्क्रिप्ट टैग बना रहे हैं और इसे बॉडी टैग बंद करने के सामने संलग्न कर रहे हैं। हमने HTML में एक jQuery प्रिंट एक्सटेंशन इंजेक्ट किया। MyDivWithStyles को अपनी खुद की Div टैग आईडी से बदलें । अब यह प्रिंट करने योग्य वर्चुअल विंडो तैयार करने की देखभाल करता है।

इसे किसी भी साइट पर आज़माएं। कभी-कभी केवल चेतावनी कभी-कभी लिखित रूप से सीएसएस शैलियों के लापता होने का कारण बन सकती है। लेकिन हमें ज्यादातर समय सामग्री मिलती है।

— नरेन येलावुला
स्रोत
1

ओपेरा में, कोशिश करें:

    print_win.document.write('</body></html>');
    print_win.document.close(); // This bit is important
    print_win.print();
    print_win.close();
— तिमिर
स्रोत
1

यहाँ एक IFrame समाधान है जो IE और Chrome के लिए काम करता है:

function printHTML(htmlString) {
    var newIframe = document.createElement('iframe');
    newIframe.width = '1px';
    newIframe.height = '1px';
    newIframe.src = 'about:blank';

    // for IE wait for the IFrame to load so we can access contentWindow.document.body
    newIframe.onload = function() {
        var script_tag = newIframe.contentWindow.document.createElement("script");
        script_tag.type = "text/javascript";
        var script = newIframe.contentWindow.document.createTextNode('function Print(){ window.focus(); window.print(); }');
        script_tag.appendChild(script);

        newIframe.contentWindow.document.body.innerHTML = htmlString;
        newIframe.contentWindow.document.body.appendChild(script_tag);

        // for chrome, a timeout for loading large amounts of content
        setTimeout(function() {
            newIframe.contentWindow.Print();
            newIframe.contentWindow.document.body.removeChild(script_tag);
            newIframe.parentElement.removeChild(newIframe);
        }, 200);
    };
    document.body.appendChild(newIframe);
}
— kofifus
स्रोत
1

किसी भी HTML तत्व पर उपयोग करने के लिए कुछ सामान्य बनाया गया 

HTMLElement.prototype.printMe = printMe;
function printMe(query){             
     var myframe = document.createElement('IFRAME');
     myframe.domain = document.domain;
     myframe.style.position = "absolute";
     myframe.style.top = "-10000px";
     document.body.appendChild(myframe);
     myframe.contentDocument.write(this.innerHTML) ;
     setTimeout(function(){
        myframe.focus();
        myframe.contentWindow.print();
        myframe.parentNode.removeChild(myframe) ;// remove frame
     },3000); // wait for images to load inside iframe
     window.focus();
}
//usage
document.getElementById('xyz').printMe();
document.getElementsByClassName('xyz')[0].printMe();

उम्मीद है की यह मदद करेगा।

— गौरव
स्रोत
1

मैंने @BillPaetski को क्वेरीसेलेक्टर का उपयोग करने, वैकल्पिक सीएसएस जोड़ने, मजबूर एच 1 टैग को हटाने और शीर्षक को वैकल्पिक रूप से निर्दिष्ट करने या खिड़की से खींचने के लिए संशोधित किया। यह किसी भी अधिक ऑटो-प्रिंट नहीं करता है और इंटर्ल्स को उजागर करता है ताकि वे आवरण समारोह में या जैसा चाहें वैसा बाहर निकल सकें।

केवल दो निजी संस्करण tmpWindow और tmpDoc हैं, हालांकि मेरा मानना ​​है कि शीर्षक, सीएसएस और एलएमएम एक्सेस भिन्न हो सकते हैं यह माना जाना चाहिए कि सभी फ़ंक्शन तर्क निजी हैं।

कोड: 
function PrintElem(elem, title, css) {
    var tmpWindow = window.open('', 'PRINT', 'height=400,width=600');
    var tmpDoc = tmpWindow.document;

    title = title || document.title;
    css = css || "";

    this.setTitle = function(newTitle) {
        title = newTitle || document.title;
    };

    this.setCSS = function(newCSS) {
        css = newCSS || "";
    };

    this.basicHtml5 = function(innerHTML) {
        return '<!doctype html><html>'+(innerHTML || "")+'</html>';
    };

    this.htmlHead = function(innerHTML) {
        return '<head>'+(innerHTML || "")+'</head>';
    };

    this.htmlTitle = function(title) {
        return '<title>'+(title || "")+'</title>';
    };

    this.styleTag = function(innerHTML) {
        return '<style>'+(innerHTML || "")+'</style>';
    };

    this.htmlBody = function(innerHTML) {
        return '<body>'+(innerHTML || "")+'</body>';
    };

    this.build = function() {
        tmpDoc.write(
            this.basicHtml5(
                this.htmlHead(
                    this.htmlTitle(title) + this.styleTag(css)
                ) + this.htmlBody(
                    document.querySelector(elem).innerHTML
                )
            )
        );
        tmpDoc.close(); // necessary for IE >= 10
    };

    this.print = function() {
        tmpWindow.focus(); // necessary for IE >= 10*/
        tmpWindow.print();
        tmpWindow.close();
    };

    this.build();
    return this;
}
उपयोग: 
DOMPrinter = PrintElem('#app-container');
DOMPrinter.print();
— MrMesees
स्रोत
इसके अलावा, यह <input>तत्वों के मूल्यों की नकल नहीं करता है । मैं इसका उपयोग कैसे कर सकता हूं जिसमें उपयोगकर्ता ने टाइप किया है।
— मैल्कम सल्वाडोर
@ Malky.Kid कृपया सोचें कि आप क्या पूछ रहे हैं। आप एक फार्म प्रिंट करना चाहते हैं, तो आप प्रपत्र तत्वों पर कलंक घटनाओं हुक, और विशेषता मान, डिफ़ॉल्ट और की innerText चयनित निर्धारित करने की आवश्यकता <input>, <select>, <textarea>Compontents उनके क्रम मूल्य किया जाना है। विकल्प हैं, लेकिन यह इस स्क्रिप्ट के साथ कोई समस्या नहीं है, लेकिन एक समस्या यह है कि ब्राउज़र कैसे काम करते हैं, और innerHTMLइनपुट, कैनवास आदि के साथ दस्तावेजों की संपत्ति प्राप्त करते हैं
— MrMesees
मैं पहले से ही के माध्यम से एक समाधान पर आ गया हूँ .attr('value',)। मैंने इसे textarea (एप्लाइड करके) और चेकबॉक्स ( .attr('checked',)) के लिए भी किया है । मुझे खेद है कि अगर मैं जो पूछ रहा था उसके बारे में पर्याप्त नहीं सोच रहा था।
— मैल्कम साल्वाडोर
वर्ग के साथ साझा करने की देखभाल? शायद एक टिप्पणी में टिप्पणी या कुछ। मैं इसे बढ़ा दूंगा।
— मिसेज़
0

नीचे दिए गए कोड उन सभी प्रासंगिक नोड्स को कॉपी करते हैं जो क्वेरी चयनकर्ता द्वारा लक्षित होते हैं, उनकी शैलियों की प्रतियां स्क्रीन पर दिखाई देती हैं, क्योंकि सीएसएस चयनकर्ताओं को लक्षित करने के लिए उपयोग किए जाने वाले कई मूल तत्व गायब हो जाएंगे। यह थोड़ा अंतराल का कारण बनता है अगर बहुत सारी शैलियों के साथ बच्चे के नोड्स होते हैं।

आदर्श रूप से आपके पास एक प्रिंट स्टाइल शीट तैयार होगी, लेकिन यह उन मामलों के लिए है, जहां कोई प्रिंट स्टाइल शीट नहीं डाली गई है और आप स्क्रीन पर देखे गए प्रिंट करना चाहते हैं।

यदि आप इस पृष्ठ पर ब्राउज़र कंसोल में नीचे की वस्तुओं को कॉपी करते हैं तो यह इस पृष्ठ पर सभी कोड स्निपेट को प्रिंट करेगा।

+function() {
    /**
     * copied from  /programming/19784064/set-javascript-computed-style-from-one-element-to-another
     * @author Adi Darachi https://stackoverflow.com/users/2318881/adi-darachi
     */
    var copyComputedStyle = function(from,to){
        var computed_style_object = false;
        //trying to figure out which style object we need to use depense on the browser support
        //so we try until we have one
        computed_style_object = from.currentStyle || document.defaultView.getComputedStyle(from,null);

        //if the browser dose not support both methods we will return null
        if(!computed_style_object) return null;

            var stylePropertyValid = function(name,value){
                        //checking that the value is not a undefined
                return typeof value !== 'undefined' &&
                        //checking that the value is not a object
                        typeof value !== 'object' &&
                        //checking that the value is not a function
                        typeof value !== 'function' &&
                        //checking that we dosent have empty string
                        value.length > 0 &&
                        //checking that the property is not int index ( happens on some browser
                        value != parseInt(value)

            };

        //we iterating the computed style object and compy the style props and the values
        for(property in computed_style_object)
        {
            //checking if the property and value we get are valid sinse browser have different implementations
                if(stylePropertyValid(property,computed_style_object[property]))
                {
                    //applying the style property to the target element
                        to.style[property] = computed_style_object[property];

                }   
        }   

    };


    // Copy over all relevant styles to preserve styling, work the way down the children tree.
    var buildChild = function(masterList, childList) {
        for(c=0; c<masterList.length; c++) {
           var master = masterList[c];
           var child = childList[c];
           copyComputedStyle(master, child);
           if(master.children && master.children.length > 0) {
               buildChild(master.children, child.children);
           }
        }
    }

    /** select elements to print with query selector **/
    var printSelection = function(querySelector) {
        // Create an iframe to make sure everything is clean and ordered.
        var iframe = document.createElement('iframe');
        // Give it enough dimension so you can visually check when modifying.
        iframe.width = document.width;
        iframe.height = document.height;
        // Add it to the current document to be sure it has the internal objects set up.
        document.body.append(iframe);

        var nodes = document.querySelectorAll(querySelector);
        if(!nodes || nodes.length == 0) {
           console.error('Printing Faillure: Nothing to print. Please check your querySelector');
           return;
        }

        for(i=0; i < nodes.length; i++) {

            // Get the node you wish to print.
            var origNode = nodes[i];

            // Clone it and all it's children
            var node = origNode.cloneNode(true);

            // Copy the base style.
            copyComputedStyle(origNode, node);

            if(origNode.children && origNode.children.length > 0) {
                buildChild(origNode.children, node.children);
            }

            // Add the styled clone to the iframe. using contentWindow.document since it seems the be the most widely supported version.

            iframe.contentWindow.document.body.append(node);
        }
        // Print the window
        iframe.contentWindow.print();

        // Give the browser a second to gather the data then remove the iframe.
        window.setTimeout(function() {iframe.parentNode.removeChild(iframe)}, 1000);
    }
window.printSelection = printSelection;
}();
printSelection('.default.prettyprint.prettyprinted')
— Tschallacka
स्रोत
0

यह वास्तव में पुरानी पोस्ट है लेकिन यहाँ मेरा एक अपडेट है जो मैंने सही उत्तर का उपयोग करके बनाया है। मेरा समाधान भी jQuery का उपयोग करें।

इसका मतलब यह है कि उचित प्रिंट दृश्य का उपयोग करना, उचित स्वरूपण के लिए सभी स्टाइलशीट को शामिल करना और सबसे ब्राउज़रों में भी समर्थित होना।

function PrintElem(elem, title, offset)
{
    // Title constructor
    title = title || $('title').text();
    // Offset for the print
    offset = offset || 0;

    // Loading start
    var dStart = Math.round(new Date().getTime()/1000),
        $html = $('html');
        i = 0;

    // Start building HTML
    var HTML = '<html';

    if(typeof ($html.attr('lang')) !== 'undefined') {
        HTML+=' lang=' + $html.attr('lang');
    }

    if(typeof ($html.attr('id')) !== 'undefined') {
        HTML+=' id=' + $html.attr('id');
    }

    if(typeof ($html.attr('xmlns')) !== 'undefined') {
        HTML+=' xmlns=' + $html.attr('xmlns');
    }

    // Close HTML and start build HEAD
    HTML+='><head>';

    // Get all meta tags
    $('head > meta').each(function(){
        var $this = $(this),
            $meta = '<meta';

        if(typeof ($this.attr('charset')) !== 'undefined') {
            $meta+=' charset=' + $this.attr('charset');
        }

        if(typeof ($this.attr('name')) !== 'undefined') {
            $meta+=' name=' + $this.attr('name');
        }

        if(typeof ($this.attr('http-equiv')) !== 'undefined') {
            $meta+=' http-equiv=' + $this.attr('http-equiv');
        }

        if(typeof ($this.attr('content')) !== 'undefined') {
            $meta+=' content=' + $this.attr('content');
        }

        $meta+=' />';

        HTML+= $meta;
        i++;

    }).promise().done(function(){

        // Insert title
        HTML+= '<title>' + title  + '</title>';

        // Let's pickup all CSS files for the formatting
        $('head > link[rel="stylesheet"]').each(function(){
            HTML+= '<link rel="stylesheet" href="' + $(this).attr('href') + '" />';
            i++;
        }).promise().done(function(){
            // Print setup
            HTML+= '<style>body{display:none;}@media print{body{display:block;}}</style>';

            // Finish HTML
            HTML+= '</head><body>';
            HTML+= '<h1 class="text-center mb-3">' + title  + '</h1>';
            HTML+= elem.html();
            HTML+= '</body></html>';

            // Open new window
            var printWindow = window.open('', 'PRINT', 'height=' + $(window).height() + ',width=' + $(window).width());
            // Append new window HTML
            printWindow.document.write(HTML);

            printWindow.document.close(); // necessary for IE >= 10
            printWindow.focus(); // necessary for IE >= 10*/
console.log(printWindow.document);
            /* Make sure that page is loaded correctly */
            $(printWindow).on('load', function(){                   
                setTimeout(function(){
                    // Open print
                    printWindow.print();

                    // Close on print
                    setTimeout(function(){
                        printWindow.close();
                        return true;
                    }, 3);

                }, (Math.round(new Date().getTime()/1000) - dStart)+i+offset);
            });
        });
    });
}

बाद में आपको सरल कुछ इस तरह की आवश्यकता होती है:

$(document).on('click', '.some-print', function() {
    PrintElem($(this), 'My Print Title');
    return false;
});

कोशिश करो।

— इविजन स्टीफन स्टिपिक
स्रोत
-1

सबसे अच्छे उत्तर के रूप में भी, जैसा कि आपको इमेज को प्रिंट करने की आवश्यकता है, जैसा कि मैंने किया था:

यदि आप छवि प्रिंट करना चाहते हैं, तो:

function printElem(elem)
    {
        Popup(jQuery(elem).attr('src'));
    }

    function Popup(data) 
    {
        var mywindow = window.open('', 'my div', 'height=400,width=600');
        mywindow.document.write('<html><head><title>my div</title>');
        mywindow.document.write('</head><body >');
        mywindow.document.write('<img src="'+data+'" />');
        mywindow.document.write('</body></html>');

        mywindow.print();
        mywindow.close();

        return true;
    }
— गोरान जैकोवल्जेविक
स्रोत
आपको loadपॉपअप पर एक घटना याद आ रही है । इसके बिना आप एक खाली पेज प्रिंट करेंगे क्योंकि छवि लोड नहीं हुई है। =>$(popup).load(function(){ popup.focus(); popup.print(); });
— टिम वर्मालेन
-4

यह करने का सबसे अच्छा तरीका यह होगा कि डिव की सामग्री को सर्वर में जमा किया जाए और एक नई विंडो खोली जाए जहां सर्वर उन सामग्रियों को नई विंडो में डाल सके।

यदि वह विकल्प नहीं है, तो आप उस div को छोड़कर पृष्ठ पर सब कुछ छिपाने के लिए जावास्क्रिप्ट जैसी क्लाइंट-साइड भाषा का उपयोग करने का प्रयास कर सकते हैं और फिर पृष्ठ प्रिंट कर सकते हैं ...

— सोनी लड़का
स्रोत
1
इसे सर्वर पर उछालने की आवश्यकता नहीं है। आप एक ब्राउज़र विंडो खोल सकते हैं और सामग्री सेट कर सकते हैं और प्रिंट कमांड प्राप्त कर सकते हैं।
— जोनाथन फॉस्ट
आप क्लाइंट से एक नई विंडो बना सकते हैं।
— नुकीले
1
जोनाथन: मुझे वह समाधान पसंद है। क्या आपके पास कोई उदाहरण कोड है?
— यूजरस्ट
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.