HTML से लैंडस्केप प्रिंटिंग

244

मेरे पास एक HTML रिपोर्ट है, जिसे कई स्तंभों के कारण मुद्रित परिदृश्य की आवश्यकता है। यह ऐसा करने का एक तरीका है, उपयोगकर्ता को दस्तावेज़ सेटिंग्स को बदलने के बिना?

और ब्राउज़रों के बीच क्या विकल्प हैं।

html css printing

— doekman
स्रोत

379

अपने CSS में आप नीचे दिखाए गए अनुसार @page प्रॉपर्टी सेट कर सकते हैं।

@media print{@page {size: landscape}}

@पेज सीएसएस 2.1 विनिर्देश का हिस्सा है, हालांकि यह इस sizeसवाल के जवाब से उजागर नहीं होता है @ पेज {आकार: परिदृश्य} अप्रचलित है? :

CSS 2.1 अब आकार विशेषता को निर्दिष्ट नहीं करता है। CSS3 पेजेड मीडिया मॉड्यूल के लिए वर्तमान कार्य प्रारूप इसे निर्दिष्ट करता है (लेकिन यह मानक या स्वीकृत नहीं है)।

जैसा कि कहा गया है कि आकार विकल्प CSS 3 ड्राफ्ट विशिष्टता से आता है । सिद्धांत रूप में इसे पृष्ठ आकार और अभिविन्यास दोनों पर सेट किया जा सकता है, हालांकि मेरे नमूने में आकार छोड़ा गया है।

समर्थन फ़ायरफ़ॉक्स में शुरू की गई बग रिपोर्ट के साथ बहुत मिश्रित है , अधिकांश ब्राउज़र इसका समर्थन नहीं करते हैं।

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

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

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

<style type="text/css" media="print">
    .page
    {
     -webkit-transform: rotate(-90deg); 
     -moz-transform:rotate(-90deg);
     filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    }
</style>

अंतिम विकल्प जो मैंने पाया है वह एक पीडीएफ में लैंडस्केप वर्जन तैयार करना है। जब उपयोगकर्ता चयन करता है तो आप इसे इंगित कर सकते हैं प्रिंट इसे पीडीएफ प्रिंट करता है। हालाँकि मुझे IE7 में ऑटो प्रिंट कार्य के लिए यह नहीं मिला।

<link media="print" rel="Alternate" href="print.pdf">

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

— जॉन
स्रोत

28

अजीब है कि यह कहता है कि 'आकार' परिदृश्य हो सकता है, जब वह वास्तव में एक 'अभिविन्यास' हो।

— मैग्नस स्मिथ

1

@page sizeसभी आधुनिक ब्राउज़रों पर काम करने के लिए प्रतीत नहीं होता है, केवल फ़ायरफ़ॉक्स। जहां तक मैंने देखा है क्रोम और ओपेरा दोनों इसकी अवहेलना करते हैं।

— जस्टिन 17०

2

size: landscapeहै नहीं , CSS2.1 का हिस्सा हालांकि @pageनियम हैं। हालाँकि, यह CSS3 का हिस्सा है। पुष्टि के लिए, W3C CSS Validator का उपयोग करने का प्रयास करें @page {size: landscape}और परिणाम दर्ज करें और "प्रोफाइल" के साथ परिणाम की तुलना करें। 2.1 बनाम स्तर 3 पर सेट करें।

— daiscog

1

जब आपके पास एक div होता है जो पृष्ठ की 100 चौड़ाई या ऊंचाई पर कब्जा कर लेता है, तो रोटेशन div को चित्र पृष्ठ के स्थान पर नहीं बनाता है, लेकिन एक लैन्सस्केप एक घुमाया जाता है। तो div के कुछ हिस्से पृष्ठ से बाहर हैं।

— ओलिवर

6

@AbeerSul - ईमानदार होने के लिए, CSS के बारे में, IE में क्या काम करता है ?)

— टोनी

27

मेरा समाधान:

<style type="text/css" media="print">
    @page { 
        size: landscape;
    }
    body { 
        writing-mode: tb-rl;
    }
</style>

यह काम करता है IE, FirefoxऔरChrome

— एडुआर्डो क्युमो
स्रोत

1

क्या होगा अगर मैं निश्चित रूप classसे पूरे परिदृश्य में होना चाहता हूं और पूरे पृष्ठ पर नहीं?

— SearchForKnowledge

2

@SearchForKnowledge - यह css3 का रूपांतरण होगा: रोटेट (90deg)।

— टूलमेकरसैट

समझ नहीं आया कि मैं क्या गलत कर रहा हूं, लेकिन इससे पूरा पृष्ठ क्रोम में टूट जाता है। {}:; TB-rl} {शरीर लेखन-मोड चित्र @page {आकार} इस लाइन जो मैं कोड से कॉपी किया @media प्रिंट है

— एक्स-मानव

मेरे लिए केवल इस @ पृष्ठ {आकार: परिदृश्य को जोड़ना; } काम करता है।

— कुमार एम।

1

2018 में अभी भी मानक WebBrowers घटकों के साथ बढ़िया काम करता है। धन्यवाद।

— केन बेकोव

14

यह केवल पृष्ठ सामग्री को घुमाने के लिए पर्याप्त नहीं है। यहां एक सही सीएसएस है जो सबसे ब्राउज़रों (क्रोम, फ़ायरफ़ॉक्स, IE9 +) में काम करता है।

पहला सेट बॉडी margin0 पर, क्योंकि अन्यथा पेज मार्जिन उन लोगों से बड़ा होगा जो आप प्रिंट डायलॉग में सेट करते हैं। backgroundपृष्ठों को देखने के लिए रंग भी सेट करें ।

body {
  margin: 0;
  background: #CCCCCC;
}

margin, borderऔर backgroundपृष्ठों की कल्पना करने के लिए आवश्यक हैं।

paddingआवश्यक प्रिंट मार्जिन पर सेट होना चाहिए। प्रिंट संवाद में आपको समान मार्जिन (इस उदाहरण में 10 मिमी) सेट करना होगा।

div.portrait, div.landscape {
  margin: 10px auto;
  padding: 10mm;
  border: solid 1px black;
  overflow: hidden;
  page-break-after: always;
  background: white;
}

A4 पृष्ठ का आकार 210 मिमी x 297 मिमी है। आपको आकार से प्रिंट मार्जिन घटाना होगा। और पृष्ठ की सामग्री का आकार निर्धारित करें:

div.portrait {
  width: 190mm;
  height: 276mm;
}
div.landscape {
  width: 276mm;
  height: 190mm;
}

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

हम किसी भी जरूरत नहीं है margin, border, padding, backgroundमुद्रित पृष्ठ पर है, इसलिए उन्हें हटाने:

@media print {
  body {
    background: none;
    -ms-zoom: 1.665;
  }
  div.portrait, div.landscape {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
  }
  div.landscape {
    transform: rotate(270deg) translate(-276mm, 0);
    transform-origin: 0 0;
  }
}

ध्यान दें कि परिवर्तन की उत्पत्ति है 0 0! इसके अलावा लैंडस्केप पेज की सामग्री को 276 मिमी नीचे ले जाना चाहिए!

यदि आपके पास पोर्ट्रेट और लैन्सस्केप पृष्ठों का मिश्रण है तो IE पेजों को ज़ूम आउट कर देगा। हम इसे -ms-zoom1.665 पर सेट करके ठीक करते हैं । यदि आप इसे 1.6666 पर सेट करते हैं या ऐसा कुछ होता है तो पेज कंटेंट का सही बॉर्डर कभी-कभी क्रॉप हो सकता है।

यदि आपको IE8- या अन्य पुराने ब्राउज़रों का समर्थन चाहिए -webkit-transform, जिनका आप उपयोग कर सकते हैं -moz-transform,, filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3)। लेकिन आधुनिक पर्याप्त ब्राउज़रों के लिए इसकी आवश्यकता नहीं है।

यहाँ एक परीक्षण पृष्ठ है:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style>
      ...Copy all styles here...
    </style>
  </head>
  <body>
    <div class="portrait">A portrait page</div>
    <div class="landscape">A landscape page</div>
  </body>
</html>

— डेनिस
स्रोत

बहुत बहुत धन्यवाद, वेब पृष्ठों के साथ एक आकर्षण (क्रोम का उपयोग किया गया) की तरह काम करता है जिसमें परिदृश्य और चित्र मोड दोनों का मिश्रण होता है।

— zcahfg2

Div.portrait, div.landscape कहाँ से हैं?

— zcahfg2

क्या यह IE 11 में किसी के लिए काम करता है? लगता है सभी तत्व बंद हैं।

— mzonerz

1

@ mzonerz मैंने अभी IE 11 में परीक्षण किया है, यह ठीक काम करता है। मैंने उत्तर के अंत में एक परीक्षण html जोड़ा। कृपया ध्यान दें कि आपको मुद्रण सेटिंग में पेज मार्जिन को 10 मिमी तक सेट करना चाहिए। यदि आपको एक अलग पेज मार्जिन की आवश्यकता है, तो आपको निम्नलिखित मानों को अपडेट करना होगा: पैडिंग: 10 मिमी; चौड़ाई: 190 मिमी; ऊंचाई: 190 मिमी;

— डेनिस

@Denis आपके प्रयासों के लिए धन्यवाद .. वास्तव में यह एकमात्र समाधान है जो अब तक मेरे लिए काम कर रहा है..nice !!, जो लोग इस समाधान को शेयरपॉइंट में एकीकृत करते हैं इंट्रानेट साइटों को संगतता दृश्य सेटिंग्स को बंद करने की आवश्यकता हो सकती है।

— mzonerz

13

सीएसएस-चर्चा विकी से उद्धृत

@ पृष्ठ नियम को CSS2 से CSS2.1 के दायरे में काट दिया गया है। पूर्ण CSS2 @ पृष्ठ नियम को केवल ओपेरा (और तब भी बगली) में लागू किया गया था। मेरे अपने परीक्षण से पता चलता है कि IE और फ़ायरफ़ॉक्स बिल्कुल भी @पृष्ठ का समर्थन नहीं करते हैं। अब-अप्रचलित CSS2 युक्ति सेक्शन 13.2.2 के अनुसार, उपयोगकर्ता की ओरिएंटेशन सेटिंग को ओवरराइड करना संभव है और (उदाहरण के लिए) लैंडस्केप में फोर्स प्रिटिंग लेकिन संबंधित "आकार" प्रॉपर्टी को CSS2.1 से हटा दिया गया है, जो इस तथ्य के अनुरूप है कोई भी वर्तमान ब्राउज़र इसका समर्थन नहीं करता है। इसे CSS3 पेजेड मीडिया मॉड्यूल में फिर से शामिल किया गया है लेकिन ध्यान दें कि यह केवल एक वर्किंग ड्राफ्ट है (जुलाई 2009 में)।

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

— अहमद अलफी
स्रोत

4

वह "सीएसएस-चर्चा विकी" है, न कि "विकिपीडिया"।

— 16

12

अपने सीएसएस को जोड़ने की कोशिश करें:

@page {
  size: landscape;
}

— उपकरण
स्रोत

2

क्या यह आपके लिए किसी भी ब्राउज़र के साथ काम करता है? IE8 और Firefox3.5 के साथ प्रिंट प्रीव्यू में कोई अंतर नहीं आया।

— डेनियल बॉलिंजर

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

— gizmo

इस पर निम्नलिखित के लिए धन्यवाद। यह मेरे लिए वास्तविक मुद्रण के साथ भी काम नहीं करता है। क्या मुझे कुछ याद आया? मेरी परीक्षण फ़ाइल निम्नानुसार है: (मुझे टिप्पणी बॉक्स में फिट करने के लिए पैराग्राफ सामग्री को छोटा करना है) <html> <head> <title> लैंडस्केप परीक्षण पृष्ठ </ शीर्षक> <शैली> @ पेज {आकार: परिदृश्य; } </ शैली> </ सिर> <शरीर> <p> लोरम इप्सम डोलर अमेट, ... </ p> </ body> </ html>

— डैनियल बॉलिंजर

मैंने इस पृष्ठ पर दिखाए गए @Page नियम और अन्य साइटों से दिखाए गए प्रत्येक संयोजन की कोशिश की है, साथ ही ओ'रिली के HTML / XHTML में उदाहरण: निश्चित गाइड, पाँचवाँ संस्करण। मैं IE8, फ़ायरफ़ॉक्स 3.6 या क्रोम 7.0 में काम करने के लिए इसे प्राप्त करने में सक्षम नहीं हूं।

— पॉल कीस्टर

मुझे इसका 2012 पता है ... लेकिन इस जवाब से मुझे मदद मिली ... IE8 के लिए लैंडस्केप विकल्प का समर्थन करने के लिए ... धन्यवाद

— विक्रम

11

sizeसंपत्ति आप के रूप में उल्लेख के बाद क्या कर रहे है। मुद्रण करते समय अपने पृष्ठ का अभिविन्यास और आकार दोनों सेट करने के लिए, आप निम्नलिखित का उपयोग कर सकते हैं:

/* ISO Paper Size */
@page {
  size: A4 landscape;
}

/* Size in mm */    
@page {
  size: 100mm 200mm landscape;
}

/* Size in inches */    
@page {
  size: 4in 6in landscape;
}

यहां @पृष्ठ दस्तावेज़ का लिंक दिया गया है ।

— robstarbuck
स्रोत

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

— कैरम

8

आप CSS 2 @ पृष्ठ नियम का उपयोग करने में सक्षम हो सकते हैं जो आपको परिदृश्य के लिए 'आकार' गुण सेट करने की अनुमति देता है ।

— इयान ऑक्सले
स्रोत

5

आप गैर-मानक IE- केवल सीएसएस विशेषता लेखन-मोड का भी उपयोग कर सकते हैं

div.page    { 
   writing-mode: tb-rl;
}

— yann.kmm
स्रोत

1

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

— डेनियल बॉलिंजर

2

-webkit-transform: rotate(-90deg); -moz-transform:rotate(-90deg);
     filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

फ़ायरफ़ॉक्स 16.0.2 में काम नहीं कर रहा है, लेकिन यह क्रोम में काम कर रहा है

— सतीश
स्रोत

2

मैंने लैंडस्केप सेटिंग के साथ एक रिक्त MS दस्तावेज़ बनाया और फिर इसे नोटपैड में खोला। मेरे html पेज पर कॉपी और पेस्ट किया गया

<style type="text/css" media="print">
   @page Section1
    {size:11 8.5in;
    margin:.5in 13.6pt 0in 13.6pt;
    mso-header-margin:.5in;
    mso-footer-margin:.5in;
    mso-paper-source:4;}
div.Section1
    {page:Section1;}
</style>



<div class="Section1"> put  text / images / other stuff  </div>

प्रिंट पूर्वावलोकन पृष्ठों को परिदृश्य आकार में दिखाता है। यह IE और Chrome पर ठीक काम कर रहा है, FF पर परीक्षण नहीं किया गया है।

— शंकर
स्रोत

1

मैंने एक बार इस समस्या को हल करने की कोशिश की, लेकिन मेरे सभी शोध मुझे ActiveX नियंत्रण / प्लग-इन की ओर ले गए। कोई चाल नहीं है कि ब्राउज़र (वैसे भी 3 साल पहले) ने किसी भी प्रिंट सेटिंग्स (प्रतियों की संख्या, पेपर आकार) को बदलने की अनुमति दी है।

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

और हाँ, लोग अभी भी IE6 का उपयोग कर रहे हैं।

— मैग्नस स्मिथ
स्रोत

1

<style type="text/css" media="print">
.landscape { 
    width: 100%; 
    height: 100%; 
    margin: 0% 0% 0% 0%; filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=1); 
} 
</style>

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

यह तालिका केवल परिदृश्य में प्रिंट करेगी और अन्य सभी पृष्ठ केवल पोर्ट्रेट मोड में प्रिंट होंगे। लेकिन समस्या यह है कि यदि टेबल का आकार पृष्ठ की चौड़ाई से अधिक है तो हम कुछ पंक्तियों को ढीला कर सकते हैं और कभी-कभी हेडर भी छूट जाते हैं। सावधान रहे।

आपका दिन शुभ हो।

शुक्रिया, नवीन मेट्टापल्ली।

— नवीन मेट्टापल्ली
स्रोत

1

यह स्क्रीन की सामग्री को 90 डिग्री तक घुमा देता है लेकिन प्रिंटआउट अभी भी प्रोट्रेट प्रारूप में निकलता है। दोनों दुनिया के सबसे बुरे, कम से कम ie8 में।

— arame3333

1

मैंने डेनिस के उत्तर की कोशिश की और कुछ समस्याओं को मारा (चित्र पृष्ठों को लैंडस्केप पृष्ठों के बाद ठीक से प्रिंट नहीं किया गया), इसलिए यहां मेरा समाधान है:

body {
  margin: 0;
  background: #CCCCCC;
}

div.page {
  margin: 10px auto;
  border: solid 1px black;
  display: block;
  page-break-after: always;
  width: 209mm;
  height: 296mm;
  overflow: hidden;
  background: white;
}

div.landscape-parent {
  width: 296mm;
  height: 209mm;
}

div.landscape {
  width: 296mm;
  height: 209mm;
}

div.content {
  padding: 10mm;
}

body,
div,
td {
  font-size: 13px;
  font-family: Verdana;
}

@media print {
  body {
    background: none;
  }
  div.page {
    width: 209mm;
    height: 296mm;
  }
  div.landscape {
    transform: rotate(270deg) translate(-296mm, 0);
    transform-origin: 0 0;
  }
  div.portrait,
  div.landscape,
  div.page {
    margin: 0;
    padding: 0;
    border: none;
    background: none;
  }
}

<div class="page">
  <div class="content">
    First page in Portrait mode
  </div>
</div>
<div class="page landscape-parent">
  <div class="landscape">
    <div class="content">
      Second page in Landscape mode (correctly shows horizontally in browser and prints rotated in printer)
    </div>
  </div>
</div>
<div class="page">
  <div class="content">
    Third page in Portrait mode
  </div>
</div>

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

— अर्कादि बोलोतोव
स्रोत

0

यह भी मेरे लिए काम किया:

@media print and (orientation:landscape) { … }

— नवीन रौनियार
स्रोत

2

आपने किन ब्राउज़रों का परीक्षण किया?

— माइक कॉर्मेंडी

0

यदि आप प्रिंट करने से पहले स्क्रीन पर लैंडस्केप देखना चाहते हैं, साथ ही प्रिंट भी कर रहे हैं, तो अपनी सीएसएस में, आप चौड़ाई को 900px, और ऊंचाई को 612px पर सेट कर सकते हैं।

ओपी ने ए 4 आकार का उल्लेख नहीं किया। मुझे लगता है कि यह मेरी संख्या के ऊपर लेटर का आकार है।

— नीला पानी
स्रोत

-1

आप निम्नलिखित की कोशिश कर सकते हैं:

@page {
    size: auto
}

— sherz
स्रोत