शीर्ष लेख और पाद लेख निकालें window.print () से

109

मैं मुद्रण पृष्ठ के लिए window.print () का उपयोग कर रहा हूं, लेकिन मुझे शीर्ष लेख और पाद लेख में पृष्ठ शीर्षक, फ़ाइल पथ, पृष्ठ संख्या और दिनांक शामिल हैं। उन्हें कैसे हटाया जाए?

मैंने प्रिंट स्टाइलशीट भी आजमाई।

#header, #nav, .noprint
{
display: none;
}

कृपया मदद कीजिए। धन्यवाद।

css  printing 
— Viralk
स्रोत
7
वे तत्व उपयोगकर्ता के ब्राउज़र सेटिंग्स के लिए विशिष्ट हैं। मुझे नहीं लगता कि आप सीएसएस या जावास्क्रिप्ट के माध्यम से उन्हें हटाने में सक्षम होंगे।
— माइकल बेर्कोव्स्की
मुझे लगता है कि इस प्रश्न को एक स्पष्टीकरण की आवश्यकता है: क्या आप HTML के हेडर और पाद लेख तत्वों को हटाने की कोशिश कर रहे हैं जो स्क्रीन पर प्रदर्शित होते हैं या क्या आप प्रिंट फ़ंक्शन द्वारा जोड़े गए हेडर और पाद को समाप्त करना चाहते हैं?
— एलनऑब्जेक्ट

जवाबों:

149

Chrome में इस स्वचालित शीर्ष लेख / पाद लेख का उपयोग करना संभव है

@page { margin: 0; }

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

@media print {
  @page { margin: 0; }
  body { margin: 1.6cm; }
}

जैसा कि मार्टिन ने एक टिप्पणी में कहा है, अगर पृष्ठ में एक लंबा तत्व है जो पिछले एक पृष्ठ (जैसे एक बड़ी तालिका) को स्क्रॉल करता है, तो मार्जिन को अनदेखा किया जाता है और मुद्रित संस्करण अजीब लगेगा।

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

— आम की धुन
स्रोत
2
किसी कारण से, body { margin: 1.6cm; }मेरे लिए सही मार्जिन की अनदेखी कर रहा था (शायद इसलिए कि मैं उपयोग कर रहा था text-align:right), इसलिए इसके बजाय मैंने <div class="container">अपनी सामग्री के लिए बनाया और .container { margin: 1.6cm; }इसके बजाय उपयोग किया।
— rybo111
8
मैं क्रोम 33 के साथ यह कोशिश कर रहा हूं। यह बहुत अच्छा काम करता है, लेकिन सावधान रहें, क्योंकि body { margin: 1.6cm; }- चूंकि यह पूरे दस्तावेज़ के लिए एक मार्जिन है - बहुत पहले और अंतिम को छोड़कर, मल्टी-पेज दस्तावेज़ों के लिए ऊर्ध्वाधर मार्जिन का सम्मान नहीं करेगा। अफसोस की बात है कि मैं वर्कअराउंड के बारे में नहीं सोच सकता।
— पोउमोरेनो
अरे @ डिगो, मैं आपके सुझाव से खुश हूं और मेरे हेडर पाद को हटा दिया गया था लेकिन मेरा प्रिंट पेज बढ़ गया था। "बॉडी {मार्जिन: 1.6 सेमी;}" सिर्फ 1.6 सेमी बदलकर 1.0 सेमी और यह काम कर रहा है .. :) हैप्पी कोडिंग
— विशाल किरी
3
यहाँ एक और अधिक व्यापक उत्तर है: stackoverflow.com/questions/1960939/…
— jedison
पेज मार्जिन को हटाना और बॉडी मार्जिन को जोड़ना मेरे लिए एक खाली पेज उत्पन्न कर रहा था। मैंने बॉडी मार्जिन को पैडिंग में बदल दिया और यह काम कर गया।
— एंड्रे गुइमारेस सकटा
21

मुझे यकीन है कि इस कोड को आपकी सीएसएस फ़ाइल में जोड़ने से समस्या हल हो जाएगी

<style type="text/css" media="print">
    @page 
    {
        size: auto;   /* auto is the initial value */
        margin: 0mm;  /* this affects the margin in the printer settings */
    }
</style>

इसके बारे में अधिक जानने के लिए आप इस पर जा सकते हैं

— Rudias
स्रोत
3
नहीं। यह काम नहीं कर रहा है। यह वह मार्जिन सेट कर रहा है जो वह है। यह हेडर और फुटर पर अभी भी url और दिनांक समय प्रदर्शित कर रहा है
— शिक्षार्थी
क्रोम और फ़ायरफ़ॉक्स के लिए काम करता है, लेकिन आईई 11. नहीं
— सैमी
21

फ़ायरफ़ॉक्स:

  • में moznomarginboxesविशेषता जोड़ें<html>

उदाहरण :

<html moznomarginboxes mozdisallowselectionprint>
— l2aelba
स्रोत
6
फ़ायरफ़ॉक्स ४ not (अगस्त २०१६) जारी होने के बाद यह काम नहीं कर रहा है: Bugzilla.mozilla.org/show_bug.cgi?id=1260480
— अल्जुलु
यह मेरे लिए काम नहीं करता है, एफएफ 61, लेकिन @ पृष्ठ {मार्जिन: 0; } समाधान एफएफ में भी काम करने लगता है।
— Kiko
11

आज मेरा सहयोगी उसी मुद्दे पर लड़खड़ा गया।

"मार्जिन: 0" के रूप में क्रोमियम आधारित ब्राउज़र के लिए समाधान काम करता है, तथापि, इंटरनेट एक्सप्लोरर पाद लेख @page मार्जिन शून्य करने के लिए सेट कर रहे हैं, भले ही मुद्रित करने के लिए जारी है।

समाधान (हैक का अधिक) @ पृष्ठ पर नकारात्मक मार्जिन डालना था।

@page {margin:0 -6cm}
html {margin:0 6cm}

कृपया ध्यान दें कि नकारात्मक अक्ष केवल X के लिए Y अक्ष के लिए काम नहीं करेगा

आशा करता हूँ की ये काम करेगा।

— निक पानोव
स्रोत
8

CSS मानक कुछ उन्नत स्वरूपण को सक्षम करता है। सीएसएस में एक @ पृष्ठ निर्देश है जो कुछ स्वरूपण को सक्षम करता है जो केवल पृष्ठांकित मीडिया (जैसे कागज) पर लागू होता है। Http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html देखें । 

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Print Test</title>
    <style type="text/css" media="print">
        @page 
        {
            size: auto;   /* auto is the current printer page size */
            margin: 0mm;  /* this affects the margin in the printer settings */
        }

        body 
        {
            background-color:#FFFFFF; 
            border: solid 1px black ;
            margin: 0px;  /* the margin on the content before printing */
       }
    </style>
</head>
<body>
  <div>Top line</div>
  <div>Line 2</div>
</body>
</html>
स्निपेट का विस्तार करें

और फ़ायरफ़ॉक्स के लिए इसका इस्तेमाल करते हैं

फ़ायरफ़ॉक्स में, https://bug743252.bugzilla.mozilla.org/attachment.cgi?id=714383 (देखें पृष्ठ स्रोत :: टैग HTML)।

अपने कोड में, के <html>साथ बदलें<html moznomarginboxes mozdisallowselectionprint>.

— होसेन गाम
स्रोत
4 
@media print {
    .footer,
    #non-printable {
        display: none !important;
    }
    #printable {
        display: block;
    }
}
— अब्दुल अब्दुल्ला
स्रोत
यह ऐसा करने का उचित तरीका है। यहां तक ​​कि मेरे मामले में एक iframe संदर्भ में, यह महान काम करता है।
— ट्विस्टो
2

यह सबसे सरल उपाय होगा। मैंने इंटरनेट में अधिकांश समाधानों की कोशिश की लेकिन इससे मुझे मदद मिली।

@print{
    @page :footer {color: #fff }
    @page :header {color: #fff}
}
— Yasitha
स्रोत
11
यह कुछ नहीं करता है।
— रात
1

@page { margin: 0; }क्रोम और फ़ायरफ़ॉक्स में ठीक काम करता है। मुझे सीएसएस के माध्यम से IE को ठीक करने का कोई तरीका नहीं मिला है। लेकिन आप IE में पेज सेटअप में अपनी मशीन पर जा सकते हैं और मार्जिन को 0. पर सेट कर सकते हैं। alt दबाएं और फिर ऊपरी बाएं कोने में फ़ाइल मेनू और आपको पेज सेटअप मिलेगा। यह केवल एक समय में एक मशीन के लिए काम करता है ...

— सम्मी
स्रोत
0

1. क्रोम और IE के लिए

<script language="javascript">
function printDiv(divName) {
var printContents = document.getElementById(divName).innerHTML;
var originalContents = document.body.innerHTML;
document.getElementById('header').style.display = 'none';
document.getElementById('footer').style.display = 'none';
document.body.innerHTML = printContents;

window.print();


document.body.innerHTML = originalContents;
}

</script>
<div id="div_print">
<div id="header" style="background-color:White;"></div>
<div id="footer" style="background-color:White;"></div>
</div>
  1. फायरफॉक्स के लिए के रूप में l2aelba ने कहा ,

उदाहरण में moznomarginboxes विशेषता जोड़ें:

<html moznomarginboxes mozdisallowselectionprint>
— Nikhilus
स्रोत
उपरोक्त कोड में <div id = "शीर्ष लेख" शैली = "पृष्ठभूमि-रंग: सफेद;"> </ div> <div id = "पाद लेख" शैली = "पृष्ठभूमि-रंग: सफेद;"> </ div> वैकल्पिक हैं ।
— निखिलस
0

मैं एक html पृष्ठ के शीर्ष लेख और पाद लेख को निकालने का प्रयास कर रहा था जिसे मैंने स्वयं मुद्रित किया था।

इस पृष्ठ पर किसी भी समाधान ने मेरे लिए काम नहीं किया, लेकिन केवल अपने स्वयं के पाद लेख को परिभाषित करके, जैसा कि यहां बताया गया है कि फ़ायरफ़ॉक्स अपने स्वयं के हेडर और पाद लेख नहीं जोड़ेगा।

यह दुर्भाग्य से क्रोम पर काम नहीं करता है।

सीएसएस में:

@media screen {
  div.divFooter {
    display: none;
  }
}
@media print {
  div.divFooter {
    position: fixed;
    bottom: 0;
  }
}

इसे अपने HTML में जोड़ें:

<div class="divFooter">
<p>UNCLASSIFIED</p>
</div>
``
— lwinkler
स्रोत
-1

यदि आप इस बिंदु तक स्क्रॉल करना चाहते हैं, तो मुझे फ़ायरफ़ॉक्स के लिए एक समाधान मिला। यह पाद और हेडर के बिना एक विशिष्ट div से सामग्री प्रिंट करेगा। आप अपनी इच्छानुसार कस्टमाइज़ कर सकते हैं।

सबसे पहले, इस ऐडऑन को डाउनलोड और इंस्टॉल करें: JSPrintSetup ।

दूसरे, इस फ़ंक्शन को लिखें: 

<script>
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(elem);
    mywindow.document.write('</body></html>');
    mywindow.document.close(); // necessary for IE >= 10
    mywindow.focus(); // necessary for IE >= 10*/

   //jsPrintSetup.setPrinter('PDFCreator'); //set the printer if you wish
   jsPrintSetup.setSilentPrint(1);

   //sent empty page header
   jsPrintSetup.setOption('headerStrLeft', '');
   jsPrintSetup.setOption('headerStrCenter', '');
   jsPrintSetup.setOption('headerStrRight', '');

   // set empty page footer
   jsPrintSetup.setOption('footerStrLeft', '');
   jsPrintSetup.setOption('footerStrCenter', '');
   jsPrintSetup.setOption('footerStrRight', '');

   // print my window silently. 
   jsPrintSetup.printWindow(mywindow);
   jsPrintSetup.setSilentPrint(1); //change to 0 if you want print dialog

    mywindow.close();

    return true;
}
</script>

तीसरा, आपके कोड में, जहाँ भी आप प्रिंट कोड लिखना चाहते हैं, यह करें (मैंने JQuery का उपयोग किया है। आप सादे जावास्क्रिप्ट का उपयोग कर सकते हैं):

<script>
$("#print").click(function () {
    var contents = $("#yourDivToPrint").html();
    PrintElem(contents);
})
</script>

जाहिर है, आपको क्लिक करने के लिए लिंक की आवश्यकता है:

<a href="#" id="print">Print my Div</a>

और आपका div प्रिंट करने के लिए:

<div id="yourDivToPrint">....</div>
— योशिय्याह
स्रोत
-3

आपको कोई कोड लिखने की जरूरत नहीं है। पहली बार में window.print () कॉल करने से पहले अपने ब्राउज़र की प्रिंट सेटिंग्स बदलें। उदाहरण के लिए फ़ायरफ़ॉक्स में:

  1. मेनू बार देखने के लिए Alt या F10 दबाएं
  2. फ़ाइल, फिर पेज सेटअप पर क्लिक करें
  3. टैब मार्जिन और हेडर / फ़ुटर्स का चयन करें
  4. रिक्त -> छवि के लिए URL बदलें

और IE के लिए एक और उदाहरण (मैं पिछले संस्करणों के लिए IE 11 का उपयोग कर रहा हूं आप इस पेज पर यूआरएल को प्रिंट करने से फ़ायरफ़ॉक्स या इंटरनेट एक्सप्लोरर को देख सकते हैं ):

  1. मेनू बार देखने के लिए Alt या F10 दबाएं
  2. फ़ाइल, फिर पेज सेटअप पर क्लिक करें
  3. शीर्ष लेख और पाद लेख अनुभाग में रिक्त URL बदलें।
— अलिर्ज़ा अज़ामी
स्रोत
हालांकि यह लिंक प्रश्न का उत्तर दे सकता है, लेकिन उत्तर के आवश्यक भागों को शामिल करना और संदर्भ के लिए लिंक प्रदान करना बेहतर है। लिंक-केवल उत्तर अमान्य हो सकते हैं यदि लिंक किए गए पृष्ठ बदल जाते हैं। - समीक्षा से
— उत्तरजीविता
सुझाव के लिए धन्यवाद उत्तरजीविताचिन। मैंने कुछ मिनट पहले अपना उत्तर संपादित किया :)
— alireza azami
हम्मम ... मुझे अपने सभी उपयोगकर्ताओं के आसपास चलने और अपने ब्राउज़र (हालांकि वे जो भी उपयोग करते हैं) इस एक ऐप का ध्यान रखने के लिए अपडेट नहीं करते हैं, खासकर अगर वे ग्रह के दूसरी तरफ रहते हैं। इसके अलावा, क्या होगा अगर उन्हें दूसरे ऐप के लिए सेटिंग्स वापस चाहिए? यह कोई जवाब नहीं है।
— पॉल
इस दृष्टिकोण में क्रॉस-ब्राउज़र की कार्यक्षमता का अभाव है जो पेज / ऐप में चित्रित होता है।
— किलस्क्रीन
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.