182

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

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

कृपया ध्यान दें:

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

इसी तरह, यदि आप एक मुख्यधारा ब्राउज़र के बारे में जानते हैं जिसमें ऐसा करने के खिलाफ विशिष्ट प्रतिबंध हैं, तो यह भी सहायक है, लेकिन कुछ काफी अप-टू-डेट प्रलेखन की सराहना की जाएगी। (केवल यह कहना कि "XYZ की सुरक्षा नीति के खिलाफ जाता है" बहुत आश्वस्त नहीं है जब XYZ ने पिछले तीन वर्षों में उक्त नीति में महत्वपूर्ण बदलाव किए हैं)।

अंत में, जब मैं कहता हूं कि "डिफ़ॉल्ट प्रिंट सेटिंग्स बदलें" मेरा मतलब हमेशा के लिए नहीं है, सिर्फ मेरे पेज के लिए है, और मैं विशेष रूप से मार्जिन, हेडर और पाद प्रिंट करने के लिए कह रहा हूं।

मुझे बहुत जानकारी है कि CSS पेज ओरिएंटेशन के साथ-साथ पेज मार्जिन को बदलने का विकल्प प्रदान करता है। कई संघर्षों में से एक फ़ायरफ़ॉक्स के साथ है। अगर मैंने पेज मार्जिन को 1 इंच पर सेट किया है, तो यह इसे उस आधे इंच तक जोड़ देता है, जो पहले से ही लगा हुआ है।

मैं अपने ग्राहक की साइट पर पीडीएफ के उपयोग को कम करना चाहता हूं, लेकिन प्रस्तुति पर उल्लंघन (साथ ही विश्वसनीयता की कमी) उनका मुख्य चिंता का विषय है।

— एंथोनी
स्रोत

क्या कोई विशेष कारण है कि आप ऐसा क्यों करना चाहते हैं? यदि आप आवश्यकता कहते हैं, तो शायद एक और संभव समाधान हो सकता है ... मेरे लिए उपयोगकर्ता सेटिंग्स बदलना एक अच्छा समाधान नहीं दिखता है ...

— Nivas

1

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

— एंथनी

मैं देखता हूं कि आपने उत्तर को समाधान के रूप में जांचा है, लेकिन यह केवल क्रोम में काम करता है। क्या आप एक सही समाधान क्रॉस-ब्राउज़र प्राप्त कर पाए हैं? या कम से कम कुछ ब्राउज़रों में? क्योंकि मेरे पास एक ही मुद्दा है

— मविली

@mavili क्रॉस-ब्राउज़र समाधान के लिए stackoverflow.com/a/23778125/453605 देखें ।

— Marcello Nuccio

200

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

नकारात्मक पक्ष यह है कि विभिन्न ब्राउज़रों में व्यवहार सुसंगत नहीं है। सफारी अभी भी प्रिंटर पेज मार्जिन सेट करने का समर्थन नहीं करता है, लेकिन अन्य सभी प्रमुख ब्राउज़र अब इसका समर्थन करते हैं।

@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 initial value */
        margin: 0mm;  /* this affects the margin in the printer settings */
    }

    html
    {
        background-color: #FFFFFF; 
        margin: 0px;  /* this affects the margin on the html before sending to printer */
    }

    body
    {
        border: solid 1px blue ;
        margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */
    }
    </style>
</head>
<body>
  <div>Top line</div>
  <div>Line 2</div>
</body>
</html>

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

यह फ़ायरफ़ॉक्स 3.6 , IE 7 , सफारी 5.1.7 या Google क्रोम 4.1 में काम नहीं करता है ।

@ पेज मार्जिन सेट करने पर IE 8 , ओपेरा 10 , Google क्रोम 21 और फ़ायरफ़ॉक्स 19 में प्रभाव पड़ता है ।
यद्यपि इन ब्राउज़रों में आपकी सामग्री के लिए पृष्ठ मार्जिन सही तरीके से सेट किया गया है, लेकिन शीर्ष लेख या पाद लेख को छुपाने की कोशिश में व्यवहार आदर्श नहीं है।

यह विभिन्न ब्राउज़रों में कैसा व्यवहार करता है:

में इंटरनेट एक्सप्लोरर , मार्जिन वास्तव में इस मुद्रण के लिए सेटिंग्स में 0mm के लिए सेट है, और यदि आप पूर्वावलोकन कर आप डिफ़ॉल्ट के रूप में 0mm मिल जाएगा, लेकिन उपयोगकर्ता पूर्वावलोकन में बदल सकते हैं।
आपको लगता है कि पेज की सामग्री वास्तव में कर रहे हैं देखेंगे तैनात सही ढंग से, लेकिन ब्राउज़र प्रिंट शीर्ष लेख और पाद गैर पारदर्शी पृष्ठभूमि के साथ दिखाया गया है, और इसलिए प्रभावी रूप से उस स्थिति में पृष्ठ की सामग्री छिपा।
में फ़ायरफ़ॉक्स नए संस्करण है, यह है तैनात सही ढंग से, लेकिन दोनों शीर्ष लेख / पाद लेख पाठ और सामग्री पाठ, प्रदर्शित किया जाता है तो यह ब्राउज़र शीर्ष पाठ का एक बुरा मिश्रण और आपके पेज की सामग्री की तरह दिखता है।
में ओपेरा , पेज की सामग्री खाल हैडर मानक सीएसएस और सामग्री के साथ शीर्ष / पाद स्थिति संघर्ष में एक गैर-पारदर्शी पृष्ठभूमि का उपयोग करते समय। काफी अच्छा है, लेकिन अजीब लग रहा है अगर मार्जिन एक छोटे से मूल्य पर सेट होता है जो हेडर को आंशिक रूप से दिखाई देता है। इसके अलावा पेज मार्जिन ठीक से सेट नहीं है।
में क्रोम नए संस्करण, ब्राउज़र शीर्ष लेख और पाद @page मार्जिन इतना छोटा सेट है, तो छिपा हुआ है कि सामग्री के साथ शीर्ष / पाद स्थिति विरोध करता है। मेरी राय में, यह ठीक यही है कि यह कैसे व्यवहार करना चाहिए।

तो निष्कर्ष यह है कि हैडर / पाद लेख को छिपाने के संबंध में क्रोम का सबसे अच्छा कार्यान्वयन है।

— भय
स्रोत

1

स्पष्ट करने के लिए, यह फ़ायरफ़ॉक्स 21 या IE10 के साथ हेडर को हटाने के लिए प्रतीत नहीं होता है, हालांकि मुझे संदेह है कि इससे हेडर / फ़ूटर को जगह नहीं लेने का कारण बना। यह Chrome 28 के साथ काम करता है।

— amh15

2

मैंने नए ब्राउज़र संस्करणों को प्रतिबिंबित करने के लिए अपडेट किया है। क्रोम ने अब इसका सबसे अच्छा कार्यान्वयन किया है।

— विस्मयकारी

@SearchForKnowledge: हाँ, जैसा कि मैंने कहा है - यदि आप आईई में यह कैसे व्यवहार करते हैं, इसके विवरण के तहत मेरा उत्तर पढ़ें: "आप देखेंगे कि पृष्ठ की सामग्री वास्तव में सही ढंग से पोस्ट की गई है, लेकिन ब्राउज़र प्रिंट हेडर और पाद पृष्ठ छुपा रहा है उस स्थिति में सामग्री। " मैं कहता हूं कि IE 8 में इसका "प्रभाव है", ऐसा नहीं है कि यह काम करता है जैसे हम चाहते हैं ... मैं इसे स्पष्ट करने के लिए अपने उत्तर को संपादित करूंगा।

— विस्मय

हेडर निकालता है, लेकिन बाईं ओर भी। इसलिए मेरा सारा पाठ अब पृष्ठ के किनारे पर है।

— मित्तल

7

यह समाधान केवल काम नहीं करता है सब पर है, क्योंकि @pageमार्जिन और bodyमार्जिन मौलिक रूप से अलग चीजें हैं: bodyमार्जिन पर ही लागू होती पूरे शरीर यानी प्रथम पृष्ठ के शीर्ष और पिछले पृष्ठ के निचले भाग,। सभी मध्यवर्ती पृष्ठों के लिए, शीर्ष / तल पर अभी भी एक शून्य मार्जिन होगा।

— कोनराड रुडोल्फ

86

क्रोम और ओपेरा के किसी भी हाल के संस्करण, साथ ही फ़ायरफ़ॉक्स 48 अल्फा 1 और अधिक से अधिक

आप पृष्ठ मार्जिन को एक आकार में सेट कर सकते हैं जो पाठ को निष्क्रिय करने के लिए बहुत छोटा है ताकि इसे निष्क्रिय कर सकें ( विस्मय के उत्तर से उधार ):

@page {
  size: auto;  /* auto is the initial value */
  margin: 0mm; /* this affects the margin in the printer settings */
}
html {
  background-color: #FFFFFF;
  margin: 0px; /* this affects the margin on the HTML before sending to printer */
}
body {
  border: solid 1px blue;
  margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */
}

<ol>
  <li>
    <a href="data:,No Javascript :-(" target="_blank">Middle-click to open in new tab</a>
  </li>
  <li>
    <a href="javascript:print()">Print</a>
  </li>
</ol><!-- Hack to work around stack snippet restrictions --><script type=application/javascript>document.links[0].href="data:text/html;charset=utf-8,"+encodeURIComponent('<!doctype html>'+document.documentElement.outerHTML)</script>

स्निपेट का विस्तार करें

फ़ायरफ़ॉक्स के संस्करणों के लिए 48 अल्फा 1 तक

आप इसमें एक mozNoMarginBoxesविशेषता जोड़ सकते हैं<html>URL, पेज नंबर और अन्य चीजों को रोकने के टैग में फ़ायरफ़ॉक्स पेज मार्जिन पर प्रिंट होने से जोड़ता है।

यह फ़ायरफ़ॉक्स 29 और बाद में काम कर रहा है। आप यहां अंतर का स्क्रीन शॉट देख सकते हैं , या लाइव उदाहरण के लिए यहां देख सकते हैं।

ध्यान दें कि पाठ में हाशिये से हटाने के लिए mozDisallowSelectionPrintउदाहरण में विशेषता की आवश्यकता नहीं है; देखें कि PDF.js में mozdisallowselectionprint विशेषता क्या है?।

अन्य ब्राउज़रों

दुर्भाग्य से, इंटरनेट एक्सप्लोरर में इस समस्या को हल करने का कोई तरीका नहीं है, इसलिए आपको पीडीएफ का सहारा लेना होगा या उपयोगकर्ताओं को मार्जिन ग्रंथों को अक्षम करने के लिए कहना होगा।

वही सफारी के लिए जाता है; @ लॉज़ पेरेज़ की एक टिप्पणी के अनुसार , सफारी के सबसे हाल के संस्करण (8, 9.1 और 10) अभी भी समर्थन नहीं करते हैं @page मार्जिन ग्रंथों को दबाने के लिए हैं।

मुझे एज पर कुछ भी नहीं मिल रहा है और मेरे पास परीक्षण के लिए विंडोज 10 इंस्टॉलेशन उपलब्ध नहीं है।

— user2428118
स्रोत

5

ईमानदारी से, मैं इससे सहमत हूं। यदि आप "सिस्टम संवाद" का उपयोग करके प्रिंट करते हैं तो भी यह क्रोम में काम करता है। बस यह सुनिश्चित कर लें कि <!DOCTYPE html> <html moznomarginboxes mozdisallowselectionprint>सेट हो गया है। स्रोत:https://bug743252.bugzilla.mozilla.org/attachment.cgi?id=714383

— पीटर

3

फ़ायरफ़ॉक्स पर बढ़िया काम करता है। तो @page{ size: auto; margin: 3mm; } क्रोम और सफारी का समर्थन करने के लिए इसने मेरे लिए एक क्रॉस-ब्राउज़र समाधान किया।

— क्लेन Dililva

एफएफ में मुद्रित सामग्री में अवांछित जानकारी / सामग्री को हटाने के लिए यह समाधान वास्तव में अच्छी तरह से काम करता है। धन्यवाद!

— वरवरा जोंस

यह बहुत अच्छा है, लेकिन IE के बारे में क्या?

— संतोष

1

मैंने सफारी 8, 9.1 और 10 पर इस स्निपेट का परीक्षण किया और यह सफारी के उन संस्करणों में हेडर या फुटर को नहीं हटाता है।

— लुइस पेरेज़

21

जैसा कि @Awe ने ऊपर कहा था, यह समाधान है, जो क्रोम में काम करने की पुष्टि करता है !!

बस यह सुनिश्चित करें कि यह प्रमुख टैग है:

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

    body 
    {
        background-color:#FFFFFF; 
        border: solid 1px black ;
        margin: 0px;  /* this affects the margin on the content before sending to printer */
   }
</style>
</head>

— काम करता है
स्रोत

3

यह एक बहुत अच्छा उपाय है! हाशिये को हटाता है और शीर्ष लेख और पाद को निकालता है। मेरा एकमात्र परिवर्तन तब padding: 0.25in 0.5in;शरीर की शैलियों में जोड़ना था ताकि मेरे पास सटीक मार्जिन हो जो मुझे एक अच्छे, साफ प्रिंट के लिए चाहिए। Chrome v25 में काम करना, और इस विशेष परियोजना के लिए शुक्र है कि हम अंत-उपयोगकर्ताओं को कुछ आधुनिक ब्राउज़रों से चुनने के लिए कह सकते हैं।

— चार्ली श्लिसेर

2

दुर्भाग्य से यह बहु-पृष्ठ प्रिंटआउट के साथ समस्याओं का कारण बनता है। पृष्ठ के निचले भाग में स्थित पाठ बंद हो जाता है।

— जोनाथन

सिंगल पेज आउटपुट के साथ क्रोम 67.0.3396.99 और फ़ायरफ़ॉक्स 62.0b5 पर पूरी तरह से काम करता है।

— 20-28 को किलस्क्रीन

16

मेरे पास एक क्लाइंट से ऐसा ही अनुरोध है जो हेडर, पेज नंबर और html फूटर को हटाना चाहता है। इस मामले में, क्लाइंट एक HTML पृष्ठ प्रस्तुत कर रहा है जो औपचारिक प्रमाण पत्र के रूप में दोगुना हो सकता है। जोड़ा गया URL, पृष्ठ और, शीर्ष लेख अप्रासंगिक हैं और अंतिम उत्पाद को छोड़ देने वाले से कमतर हैं। कुछ मायनों में, यह सिर्फ सस्ता दिखता है।

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

यदि CSS मीडिया = प्रिंट का समर्थन करता है, तो उसे संपूर्ण एंड-यूज़र प्रिंट अनुभव को नियंत्रित करने की क्षमता का समर्थन करना चाहिए। मैं सराहना करता हूं कि ब्राउज़र जोड़े गए फ़ील्ड प्रदान करते हैं, लेकिन, सीएसएस को समग्र प्रिंट अनुभव को नियंत्रित करने की अनुमति क्यों नहीं दी जाती है-यदि वह वांछित है। 90% समाधान तीन और क्षेत्रों के साथ 100% हो सकता है! एक सरल:

#BrowserPrintDefaults{display:none}

पर्याप्त होगा।

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

— सीएएल
स्रोत

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

— एंथनी

1

यह @Pageप्रिंटर मार्जिन सेट करने के लिए निर्देश का उपयोग करके एक आधिकारिक CSS मानक है (जो html पृष्ठ के बॉडी मार्जिन के समान नहीं है)। वर्तमान में यह सफारी को छोड़कर सभी प्रमुख ब्राउज़रों द्वारा समर्थित है, लेकिन यह शीर्ष लेख / पाद लेख को कैसे प्रभावित करता है। सबसे अच्छा कार्यान्वयन ओपेरा और क्रोम में हैं।

— खौफ

6

इस कोड का प्रयास करें, मेरे लिए 100% काम करता है:
के लिए लैंडस्केप:

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

@page{
  size: auto A4 landscape;
  margin: 3mm;
}

</style>
</head>

के लिए portait:

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

@page{
  size: auto;
  margin: 3mm;
}

</style>
</head>

— आयस बॉय
स्रोत

1

सीएसएस पृष्ठ के नियम हाशिये पर सेट होंगे, लेकिन ब्राउज़र द्वारा बनाए गए हेडर और फूटर (पेज URL, पेज नंबर, आदि) को न हटाएं

— एंथनी

0

चूंकि आपने "उनके ब्राउज़र के भीतर" और फ़ायरफ़ॉक्स का उल्लेख किया है, यदि आप इंटरनेट एक्सप्लोरर का उपयोग कर रहे हैं, तो आप रजिस्ट्री में मान को अस्थायी रूप से सेट करके पृष्ठ शीर्ष लेख / पाद लेख को अक्षम कर सकते हैं, यहां देखें एक उदाहरण के लिए । AFAIK मैंने अन्य ब्राउज़रों के भीतर ऐसा करने का तरीका नहीं सुना है। डैनियल और मिकेल के जवाब दोनों एक-दूसरे से टकराते दिख रहे हैं, मुझे लगता है कि हेडफ़ोन / फ़ुटर्स को हटाने या उन्हें अनुकूलित करने के लिए फ़ायरफ़ॉक्स के लिए रजिस्ट्री में कहीं न कहीं एक समान सेटिंग हो सकती है। क्या आपने इसकी जाँच की है?

आशा है कि यह मदद करता है और खुश छुट्टियाँ, सादर, टॉम।

— t0mm13b
स्रोत

1

IE7 + में, आप प्रिंट पूर्वावलोकन में एक साधारण बटन क्लिक द्वारा शीर्ष लेख / पाद लेख को अक्षम कर सकते हैं। इसे रजिस्ट्री में करने की आवश्यकता नहीं है!

— भय

0

@पृष्ठ मार्जिन: 0 मिमी अब फ़ायरफ़ॉक्स 19.0a2 (2012-12-07) में काम करता है।

— thinsoldier
स्रोत

0

मैंने वेब पेज में कुछ सीएसएस का उपयोग करके अपनी समस्या को हल किया।

<style media="print">
   @page {
      size: auto;
      margin: 0;
  }
</style>

— कबीर हुसैन
स्रोत

0

इसने मेरे लिए लगभग 1cm मार्जिन के साथ काम किया

@page 
{
    size:  auto;   /* auto is the initial value */
    margin: 0mm;  /* this affects the margin in the printer settings */
}
html
{
    background-color: #FFFFFF; 
    margin: 0mm;  /* this affects the margin on the html before sending to printer */
}
body
{
    padding:30px; /* margin you want for the content */
}

— अफ़्शिन
स्रोत

पृष्ठ से ब्राउज़र प्रिंट विकल्प (हेडर, फुटर, मार्जिन) अक्षम करना?

यह विभिन्न ब्राउज़रों में कैसा व्यवहार करता है:

क्रोम और ओपेरा के किसी भी हाल के संस्करण, साथ ही फ़ायरफ़ॉक्स 48 अल्फा 1 और अधिक से अधिक

फ़ायरफ़ॉक्स के संस्करणों के लिए 48 अल्फा 1 तक

अन्य ब्राउज़रों