javascript प्रिंट<div id="printarea"></ div> केवल?




css printing (21)

मैं संकेतित div कैसे मुद्रित करूं (पेज पर अन्य सभी सामग्री मैन्युअल रूप से अक्षम किए बिना)?

मैं एक नया पूर्वावलोकन संवाद से बचना चाहता हूं, इसलिए इस सामग्री के साथ एक नई विंडो बनाना उपयोगी नहीं है।

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


PrintDiv () फ़ंक्शन कुछ बार सामने आया, लेकिन उस स्थिति में, आप अपने सभी बाध्यकारी तत्वों और इनपुट मानों को खो देते हैं। तो, मेरा समाधान "body_allin" नामक सब कुछ के लिए एक div बनाना है और "body_print" नामक पहले व्यक्ति के बाहर एक और है।

फिर आप इस फ़ंक्शन को कॉल करते हैं:

function printDiv(divName){

    var printContents = document.getElementById(divName).innerHTML;

    document.getElementById("body_print").innerHTML = printContents;

    document.getElementById("body_allin").style.display = "none";
    document.getElementById("body_print").style.display = "";

    window.print();

    document.getElementById("body_print").innerHTML = "";
    document.getElementById("body_allin").style.display = "";
    document.getElementById("body_print").style.display = "none";

}

क्या आप प्रिंट स्टाइलशीट का उपयोग कर सकते हैं, और जिस सामग्री को मुद्रित करना चाहते हैं उसे व्यवस्थित करने के लिए सीएसएस का उपयोग कर सकते हैं? अधिक पॉइंटर्स के लिए इस आलेख को पढ़ें


एचएम ... प्रिंटिंग के लिए स्टाइलशीट के प्रकार का उपयोग करें ... उदाहरण:

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

print.css:

div { display: none; }
#yourdiv { display: block; }

printDiv (divId) : किसी भी पृष्ठ पर किसी भी div को मुद्रित करने के लिए एक सामान्यीकृत समाधान।

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

इस समाधान के लिए कुंजी प्रिंट मीडिया स्टाइल शीट में उचित नियम जोड़ना है ताकि अनुरोधित div (और इसकी सामग्री) मुद्रित की जा सके।

सबसे पहले, सबकुछ दबाने के लिए आवश्यक प्रिंट सीएसएस बनाएं (लेकिन उस तत्व को अनुमति देने के लिए जिसे आप मुद्रित करना चाहते हैं)।

<style type="text/css" media="print">
   body {visibility:hidden; }
   .noprintarea {visibility:hidden; display:none}
   .noprintcontent { visibility:hidden; }
   .print { visibility:visible; display:block; }
</style>

ध्यान दें कि मैंने नए वर्ग के नियम जोड़े हैं:

  • noprintarea आपको अपने div- सामग्री और ब्लॉक दोनों के भीतर तत्वों के मुद्रण को दबाने की अनुमति देता है।
  • noprintcontent आपको अपने div के भीतर तत्वों के मुद्रण को दबाने की अनुमति देता है- सामग्री दबा दी जाती है लेकिन आवंटित क्षेत्र खाली छोड़ दिया जाता है।
  • प्रिंट आपको उन आइटमों की अनुमति देता है जो मुद्रित संस्करण में दिखाई देते हैं लेकिन स्क्रीन पेज पर नहीं। स्क्रीन शैली के लिए इन्हें आमतौर पर "डिस्प्ले: कोई नहीं" होगा।

फिर तीन जावास्क्रिप्ट कार्यों को सम्मिलित करें। पहला प्रिंट प्रिंट स्टाइल शीट को चालू और बंद करता है।

function disableSheet(thisSheet,setDisabled)
{ document.styleSheets[thisSheet].disabled=setDisabled; }   

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

function printDiv(divId)
{
  //  Enable the print CSS: (this temporarily disables being able to print the whole page)
  disableSheet(0,false);
  //  Get the print style sheet and add a new rule for this div
  var sheetObj=document.styleSheets[0];  
  var showDivCSS="visibility:visible;display:block;position:absolute;top:30px;left:30px;";
  if (sheetObj.rules) { sheetObj.addRule("#"+divId,showDivCSS); }
  else                { sheetObj.insertRule("#"+divId+"{"+showDivCSS+"}",sheetObj.cssRules.length); }
  print();
  //  need a brief delay or the whole page will print
  setTimeout("printDivRestore()",100);  
}

अंतिम कार्य जोड़े गए नियम को हटा देता है और प्रिंट शैली को फिर से अक्षम करने के लिए सेट करता है ताकि पूरा पृष्ठ मुद्रित किया जा सके।

function printDivRestore()
{
  // remove the div-specific rule
  var sheetObj=document.styleSheets[0];  
  if (sheetObj.rules) { sheetObj.removeRule(sheetObj.rules.length-1); }
  else                { sheetObj.deleteRule(sheetObj.cssRules.length-1); }
  //  and re-enable whole page printing
  disableSheet(0,true);
}

करने के लिए एकमात्र अन्य चीज है कि एक लाइन को अपने ऑनलोड प्रोसेसिंग में जोड़ना ताकि प्रिंट स्टाइल प्रारंभ में अक्षम हो जिससे पूरे पृष्ठ प्रिंटिंग की इजाजत हो।

<body onLoad='disableSheet(0,true)'>

फिर, अपने दस्तावेज़ में कहीं से भी, आप एक div प्रिंट कर सकते हैं। बस एक बटन या जो भी से printDiv ("thedivid") जारी करें।

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

नोट: मेरे कार्यान्वयन में, यह पहली स्टाइल शीट होना चाहिए। शीट संदर्भ (0) को उचित शीट संख्या में बदलें यदि आपको इसे बाद में शीट अनुक्रम में बनाना है।


मुद्रण के लिए एक विशेष स्टाइलशीट का प्रयोग करें

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

और उसके बाद प्रत्येक टैग को "noprint" श्रेणी जोड़ें, जिसमें वह सामग्री है जिसे आप मुद्रित नहीं करना चाहते हैं।

सीएसएस उपयोग में

.noprint {
  display: none;
}

मेरे पास न्यूनतम कोड के साथ एक बेहतर समाधान है।

अपने प्रिंट करने योग्य भाग को एक div के अंदर एक आईडी के साथ रखें:

<div id="printableArea">
      <h1>Print me</h1>
</div>

<input type="button" onclick="printDiv('printableArea')" value="print a div!" />

फिर एक ऑनक्लिक (जैसा कि ऊपर दिखाया गया है) की तरह एक ईवेंट जोड़ें, और जैसा मैंने ऊपर किया है, div की आईडी को पास करें।

अब चलिए एक बहुत ही सरल जावास्क्रिप्ट बनाते हैं:

function printDiv(divName) {
     var printContents = document.getElementById(divName).innerHTML;
     var originalContents = document.body.innerHTML;

     document.body.innerHTML = printContents;

     window.print();

     document.body.innerHTML = originalContents;
}

ध्यान दें कि यह कितना आसान है? कोई पॉपअप नहीं, कोई नई विंडो नहीं, कोई पागल स्टाइल नहीं, jquery जैसी कोई जेएस लाइब्रेरी नहीं। वास्तव में जटिल समाधानों के साथ समस्या (उत्तर जटिल नहीं है और जो मैं संदर्भित कर रहा हूं) यह तथ्य है कि यह कभी भी सभी ब्राउज़रों में अनुवाद नहीं करेगा! यदि आप शैली को अलग करना चाहते हैं, तो स्टाइलशीट लिंक (मीडिया = "प्रिंट") में मीडिया विशेषता जोड़कर चेक किए गए उत्तर में दिखाए गए अनुसार करें।

कोई फ्लाफ, हल्के वजन, यह सिर्फ काम करता है।


सीएसएस 3 के साथ आप निम्न का उपयोग कर सकते हैं:

body *:not(#printarea) {
    display: none;
}

वर्तमान पृष्ठ को प्रभावित किए बिना एक और दृष्टिकोण और प्रिंटिंग के दौरान यह सीएसएस भी जारी रहता है। यहां चयनकर्ता विशिष्ट div चयनकर्ता होना चाहिए जो हमें मुद्रित करने की आवश्यकता है।

printWindow(selector, title) {
   var divContents = $(selector).html();
   var $cssLink = $('link');
   var printWindow = window.open('', '', 'height=' + window.outerHeight * 0.6 + ', width=' + window.outerWidth  * 0.6);
   printWindow.document.write('<html><head><h2><b><title>' + title + '</title></b></h2>');
   for(var i = 0; i<$cssLink.length; i++) {
    printWindow.document.write($cssLink[i].outerHTML);
   }
   printWindow.document.write('</head><body >');
   printWindow.document.write(divContents);
   printWindow.document.write('</body></html>');
   printWindow.document.close();
   printWindow.onload = function () {
            printWindow.focus();
            setTimeout( function () {
                printWindow.print();
                printWindow.close();
            }, 100);  
        }
}

यहां कुछ समय दिखाया गया है कि बाहरी सीएसएस इस पर लागू हो जाता है।


यदि आप केवल इस div को मुद्रित करना चाहते हैं, तो आपको निर्देश का उपयोग करना होगा:

@media print{
    *{display:none;}
    #mydiv{display:block;}
}

मेरे मामले में मुझे एक पृष्ठ के अंदर एक छवि मुद्रित करना पड़ा। जब मैंने समाधान का उपयोग किया, तो मेरे पास 1 खाली पृष्ठ था और दूसरा चित्र दिखा रहा था। उम्मीद है कि यह किसी की मदद करेगा।

यहां इस्तेमाल किया गया सीएसएस है:

@media print {
  body * {
    visibility: hidden;
  }

  #not-print * {
    display: none;
  }

  #to-print, #to-print * {
    visibility: visible;
  }

  #to-print {
    display: block !important;
    position: absolute;
    left: 0;
    top: 0;
    width: auto;
    height: 99%;
  }
}

मेरा एचटीएमएल है:

<div id="not-print" >
  <header class="row wrapper page-heading">

  </header>

  <div class="wrapper wrapper-content">
    <%= image_tag @qrcode.image_url,  size: "250x250" , alt: "#{@qrcode.name}" %>
  </div>
</div>

<div id="to-print" style="display: none;">
  <%= image_tag @qrcode.image_url,  size: "300x300" , alt: "#{@qrcode.name}" %>
</div>

मेरे पास एक बटन के साथ कई छवियां थीं और एक छवि के साथ प्रत्येक div को मुद्रित करने के लिए बटन पर क्लिक करने की आवश्यकता थी। यह समाधान काम करता है अगर मैंने अपने ब्राउज़र में कैश अक्षम कर दिया है, और छवि आकार क्रोम में नहीं बदलता है:

        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;
    }

<div id="printableArea">
      <h1>Print me</h1>
</div>

<input type="button" onclick="printDiv('printableArea')" value="print a div!" />

सैंड्रो की विधि बहुत अच्छी काम करती है।

मैंने इसे कई प्रिंटमे लिंक जोड़ने की अनुमति देने के लिए tweaked, विशेष रूप से टैब्ड पृष्ठों में उपयोग और पाठ का विस्तार करने के लिए।

function processPrint(printMe){ <- यहां एक चर के लिए कॉलिंग

var printReadyElem = document.getElementById(printMe); <- एक चर के लिए पूछने के लिए printMe के आसपास उद्धरण हटा दिया

<a href="javascript:void(processPrint('divID'));">Print</a> <- <a href="javascript:void(processPrint('divID'));">Print</a> आईडी को div आईडी में बदलने के लिए फ़ंक्शन पर मुद्रित करने के लिए div ID को पास करना। एकल उद्धरण की आवश्यकता है


@ केविन फ्लोरिडा यदि आपके पास एक ही कक्षा के साथ कई divs हैं, तो आप इसे इस तरह उपयोग कर सकते हैं:

 <div style="display:none">
   <div id="modal-2" class="printableArea">
     <input type="button" class="printdiv-btn" value="print a div!" />
   </div>
 </div>

मैं Colorbox आंतरिक सामग्री प्रकार का उपयोग कर रहा था

$(document).on('click', '.printdiv-btn', function(e) {
    e.preventDefault();

    var $this = $(this);
    var originalContent = $('body').html();
    var printArea = $this.parents('.printableArea').html();

    $('body').html(printArea);
    window.print();
    $('body').html(originalContent);
});

यहां केवल एक सामान्य समाधान है, केवल सीएसएस का उपयोग करके, जिसे मैंने काम करने के लिए सत्यापित किया है।

@media print {
  body * {
    visibility: hidden;
  }
  #section-to-print, #section-to-print * {
    visibility: visible;
  }
  #section-to-print {
    position: absolute;
    left: 0;
    top: 0;
  }
}

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

visibility का उपयोग बेहतर काम करता है क्योंकि आप वंशजों के लिए दृश्यता चालू कर सकते हैं। अदृश्य तत्व अभी भी लेआउट को प्रभावित करते हैं, इसलिए मैं ऊपर-बाईं ओर section-to-print ले जाता हूं ताकि यह ठीक से प्रिंट हो।


JQuery के साथ यह उतना आसान है जितना:

w=window.open();
w.document.write($('.report_left_inner').html());
w.print();
w.close();

<script type="text/javascript">
   function printDiv(divId) {
       var printContents = document.getElementById(divId).innerHTML;
       var originalContents = document.body.innerHTML;
       document.body.innerHTML = "<html><head><title></title></head><body>" + printContents + "</body>";
       window.print();
       document.body.innerHTML = originalContents;
   }
</script>


चरण 1: अपने हेड टैग के अंदर निम्न जावास्क्रिप्ट लिखें

<script language="javascript">
function PrintMe(DivID) {
var disp_setting="toolbar=yes,location=no,";
disp_setting+="directories=yes,menubar=yes,";
disp_setting+="scrollbars=yes,width=650, height=600, left=100, top=25";
   var content_vlue = document.getElementById(DivID).innerHTML;
   var docprint=window.open("","",disp_setting);
   docprint.document.open();
   docprint.document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"');
   docprint.document.write('"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">');
   docprint.document.write('<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">');
   docprint.document.write('<head><title>My Title</title>');
   docprint.document.write('<style type="text/css">body{ margin:0px;');
   docprint.document.write('font-family:verdana,Arial;color:#000;');
   docprint.document.write('font-family:Verdana, Geneva, sans-serif; font-size:12px;}');
   docprint.document.write('a{color:#000;text-decoration:none;} </style>');
   docprint.document.write('</head><body onLoad="self.print()"><center>');
   docprint.document.write(content_vlue);
   docprint.document.write('</center></body></html>');
   docprint.document.close();
   docprint.focus();
}
</script>

चरण 2: ऑनक्लिक ईवेंट द्वारा PrintMe ('DivID') फ़ंक्शन को कॉल करें।

<input type="button" name="btnprint" value="Print" onclick="PrintMe('divid')"/>
<div id="divid">
here is some text to print inside this div with an id 'divid'
</div>

अब तक सभी उत्तरों में त्रुटिपूर्ण हैं - वे या तो class="noprint" जोड़ना शामिल हैं या class="noprint" करने योग्य के भीतर गड़बड़ कर #printable

मुझे लगता है कि गैर-प्रिंट करने योग्य सामान के चारों ओर एक रैपर बनाने का सबसे अच्छा समाधान होगा:

<head>
    <style type="text/css">

    #printable { display: none; }

    @media print
    {
        #non-printable { display: none; }
        #printable { display: block; }
    }
    </style>
</head>
<body>
    <div id="non-printable">
        Your normal page contents
    </div>

    <div id="printable">
        Printer version
    </div>
</body>

बेशक यह सही नहीं है क्योंकि इसमें आपके एचटीएमएल में चीजों को थोड़ा सा स्थानांतरित करना शामिल है ...


  1. आईडी प्रिंट प्रिंट करने के लिए जो भी तत्व आप प्रिंट करना चाहते हैं उसे printMe

  2. इस स्क्रिप्ट को अपने हेड टैग में शामिल करें:

    <script language="javascript">
        var gAutoPrint = true;
    
        function processPrint(){
    
        if (document.getElementById != null){
        var html = '<HTML>\n<HEAD>\n';
        if (document.getElementsByTagName != null){
        var headTags = document.getElementsByTagName("head");
        if (headTags.length > 0) html += headTags[0].innerHTML;
        }
    
        html += '\n</HE' + 'AD>\n<BODY>\n';
        var printReadyElem = document.getElementById("printMe");
    
        if (printReadyElem != null) html += printReadyElem.innerHTML;
        else{
        alert("Error, no contents.");
        return;
        }
    
        html += '\n</BO' + 'DY>\n</HT' + 'ML>';
        var printWin = window.open("","processPrint");
        printWin.document.open();
        printWin.document.write(html);
        printWin.document.close();
    
        if (gAutoPrint) printWin.print();
        } else alert("Browser not supported.");
    
        }
    </script>
    
  3. समारोह को कॉल करें

    <a href="javascript:void(processPrint());">Print</a>
    

आप इसका उपयोग कर सकते हैं: http://vikku.info/codesnippets/javascript/print-div-content-print-only-the-content-of-an-html-element-and-not-the-whole-document/

या visibility:visible उपयोग करें visibility:visible और visibility:hidden सीएसएस संपत्ति @media print{}

'डिस्प्ले: कोई भी' सभी नेस्टेड 'डिस्प्ले: ब्लॉक' को छुपाएगा। यह समाधान नहीं है।


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

HTML:

<div id='printarea'>
    <p>This is a sample text for printing purpose.</p>
    <input type='button' id='btn' value='Print' onclick='printFunc();'>
</div>
<p>Do not print.</p>

सीएसएस:

function printFunc() {
    var divToPrint = document.getElementById('printarea');
    var htmlToPrint = '' +
        '<style type="text/css">' +
        'table th, table td {' +
        'border:1px solid #000;' +
        'padding;0.5em;' +
        '}' +
        '</style>';
    htmlToPrint += divToPrint.outerHTML;
    newWin = window.open("");
    newWin.document.write("<h3 align='center'>Print Page</h3>");
    newWin.document.write(htmlToPrint);
    newWin.print();
    newWin.close();
    }




dhtml