A4 पेपर साइज पेज (s) में HTML पेज कैसे बनाएं?

Question

क्या उदाहरण के लिए, MS Word में A4 आकार के पेज की तरह, HTML पेज बनाना संभव है?

अनिवार्य रूप से, मैं ब्राउज़र में HTML पृष्ठ को दिखाने में सक्षम होना चाहता हूं, और A4 आकार के पृष्ठ के आयामों में सामग्री को रेखांकित करना चाहता हूं।

सरलता के लिए, मैं यह मान रहा हूं कि HTML पृष्ठ में केवल पाठ (कोई चित्र आदि) नहीं होगा और <br>उदाहरण के लिए कोई टैग नहीं होगा ।

इसके अलावा, जब HTML पेज प्रिंट होता है, तो यह A4- आकार के पेपर पेज के रूप में सामने आएगा।

Comments

आप कर सकते हैं: github.com/delight-im/HTML-Sheets-of-Paper

— caw

की संभावित डूप: stackoverflow.com/questions/16649943/css-to-set-a4-paper-size

— मार्क बोल्डर

असली "एचटीएमएल प्रिंट के लिए" comig है! Stackoverflow.com/q/10641667/287948 और W3C के CSS स्तर 3 विखंडन मॉड्यूल पर सभी इतिहास देखें , जो कि आ रहा है!

— पीटर क्रूस

ऐसा करने का इरादा क्या था? वेब प्रौद्योगिकियों के लिए एमएस ऑफिस छोड़ रहे हैं? कम से कम कि मैं क्या कोशिश कर रहा हूं, लेकिन अभी भी कुछ इनपुट की आवश्यकता है कैसे । इस सवाल का जवाब इस कहानी ने शुरू किया।

— स्टीफन

Answer 1

युग से पहले, नवंबर 2005 में, AlistApart.com ने एक लेख प्रकाशित किया कि कैसे उन्होंने HTML और CSS के अलावा कुछ भी नहीं का उपयोग करके एक पुस्तक प्रकाशित की। देखें: http://alistapart.com/article/boom

यहाँ उस लेख का एक अंश दिया गया है:

CSS2 में पृष्ठांकित मीडिया (कागज की चादरें) की धारणा है, जैसा कि निरंतर मीडिया (स्क्रॉलबार) के विपरीत है। शैली पत्रक पृष्ठों और उनके मार्जिन का आकार निर्धारित कर सकते हैं। पेज टेम्प्लेट को नाम दिए जा सकते हैं और तत्व यह बता सकते हैं कि वे किस पेज को प्रिंट करना चाहते हैं। इसके अलावा, स्रोत दस्तावेज़ में तत्व पृष्ठ विराम को बाध्य कर सकते हैं। यहाँ हमारे द्वारा उपयोग की गई स्टाइल शीट से एक स्निपेट है:

@page {
   size: 7in 9.25in;
   margin: 27mm 16mm 27mm 16mm;
}

यूएस-आधारित प्रकाशक होने के कारण, हमें इंच में पृष्ठ का आकार दिया गया। हम, यूरोपीय होने के नाते, मीट्रिक माप के साथ जारी रहे। सीएसएस दोनों को स्वीकार करता है।

पृष्ठ का आकार और मार्जिन सेट करने के बाद, हमें यह सुनिश्चित करने की आवश्यकता है कि सही स्थानों पर पृष्ठ विराम हैं। निम्नलिखित अंश दिखाते हैं कि अध्याय और परिशिष्ट के बाद पृष्ठ विराम कैसे उत्पन्न होते हैं:

div.chapter, div.appendix {
    page-break-after: always;
}

इसके अलावा, हमने नाम पृष्ठ घोषित करने के लिए CSS2 का उपयोग किया:

div.titlepage {
  page: blank;
}

यही है, शीर्षक पृष्ठ "रिक्त" नाम वाले पृष्ठों पर मुद्रित किया जाना है। CSS2 ने नामित पृष्ठों की अवधारणा का वर्णन किया है, लेकिन उनका मूल्य केवल तब स्पष्ट हो जाता है जब हेडर और फुटर उपलब्ध होते हैं।

वैसे भी ...

जब से आप A4 प्रिंट करना चाहते हैं, आपको पाठ्यक्रम के विभिन्न आयामों की आवश्यकता होगी:

@page {
    size: 21cm 29.7cm;
    margin: 30mm 45mm 30mm 45mm;
     /* change the margins as you want them to be. */
}

आलेख पृष्ठ-विराम सेट करने जैसी चीज़ों में गोता लगाता है, इसलिए आप इसे पूरी तरह से पढ़ना चाहते हैं।

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

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

EDIT (26-02-2015)

आज, मैं SmashingMagazine पर एक और, हाल के लेख पर ठोकर खाने के लिए हुआ, जो HTML और सीएसएस के साथ प्रिंट के लिए डिजाइन करने में भी गोता लगाता है ... बस अगर आप अभी तक एक और ट्यूटोरियल का उपयोग कर सकते हैं।

EDIT (30-10-2018)

यह मेरे ध्यान में लाया गया है कि sizeसीएसएस 3 वैध नहीं है, जो वास्तव में सही है - मैंने केवल लेख में उद्धृत कोड दोहराया है (जैसा कि नोट किया गया) अच्छा था पुराने सीएसएस 2 (जो कि उस वर्ष को देखते हैं जब आप लेख को देखते हैं और इस उत्तर को पहले प्रकाशित किया गया था)। वैसे भी, यहां आपकी कॉपी-और-पेस्ट सुविधा के लिए वैध CSS3 कोड है:

@media print {
    body{
        width: 21cm;
        height: 29.7cm;
        margin: 30mm 45mm 30mm 45mm; 
        /* change the margins as you want them to be. */
   } 
}

यदि आपको लगता है कि आपको वास्तव में पिक्सेल की आवश्यकता है ( आपको वास्तव में पिक्सेल का उपयोग करने से बचना चाहिए ), तो आपको फ़ाइल के लिए सही DPI चुनने का ध्यान रखना होगा

• 72 डीपीआई (वेब) = 595 एक्स 842 पिक्सल
• 300 डीपीआई (प्रिंट) = 2480 एक्स 3508 पिक्सल
• 600 डीपीआई (उच्च गुणवत्ता वाला प्रिंट) = 4960 एक्स 7016 पिक्सल

फिर भी, मैं परेशानी से बचूंगा और आकार देने के लिए बस cm(सेंटीमीटर) या mm(मिलीमीटर) का उपयोग करूंगा क्योंकि यह उस ग्लिच को प्रदान करने से बचता है जो आपके द्वारा उपयोग किए जाने वाले क्लाइंट पर निर्भर करता है।

Comments

वर्तमान मानकों से मेल खाने के लिए इस उत्तर को अपडेट करने के लिए धन्यवाद!

— जंप्स 4fun

ठीक है, लेकिन

— ए.कॉम

@ A.com कोई px नहीं है जो DPI पर निर्भर करेगा ... यही वजह है कि CSS इन स्पष्ट माप इकाइयों का समर्थन करता है जिन्हें cmएट अल कहा जाता है । मैं आपको सलाह देता हूं कि आप लिंक किए गए लेख और / या कम से कम मेरे उत्तर को पढ़ें। ऐसा करने से आप वास्तव में अपने प्रश्न पर ध्यान देंगे, वास्तव में इसका कोई मतलब नहीं है। यदि आप अभी भी स्पष्ट नहीं हैं, तो आप अपने प्रश्न को एक नए प्रश्न के रूप में पोस्ट करना चाह सकते हैं। यह एक क्यू एंड ए साइट है, एक मंच नहीं है। \ o /

— ई-सुशी

Answer 2

वेब ब्राउज़र को A4 के समान पिक्सेल आयामों के साथ प्रदर्शित करने के लिए मजबूर करना काफी आसान होगा। हालांकि, जब चीजें प्रदान की जाती हैं, तो कुछ झगड़े हो सकते हैं।

अपने मॉनिटर के प्रदर्शन को 72 डीपीआई मानकर, आप कुछ इस तरह से जोड़ सकते हैं:

<!DOCTYPE html>
<html>
  <head>
    <style>
    body {
        height: 842px;
        width: 595px;
        /* to centre page on screen*/
        margin-left: auto;
        margin-right: auto;
    }
    </style>
  </head>
  <body>
  </body>
</html>

Comments

विल डीन के सुझाव के बाद (जो बहुत समझ में आता है) मिलीमीटर का उपयोग करके, आप ब्राउज़र को पिक्सेल की चौड़ाई / ऊंचाई की गणना करने के लिए मजबूर कर सकते हैं: शरीर {ऊँचाई: 420 मिमी; चौड़ाई: 297 मिमी; ...}

— टिम मैकनामारा

A4 वास्तव में 210x297 मिमी है।

— चारोनेंस

तो, अंत में एक चित्र DINA4:body { height:297mm; width:210mm; margin-left:auto; margin-right:auto; }

— daVe

अब इस पर काफी काम किया गया है और जबकि 210x297 आयाम अच्छे हैं, उन्हें ए 4 पृष्ठ के लिए पूर्ण रूप से फिट नहीं माना जाना चाहिए । एक अच्छा परीक्षण है-> क्रोम से सीधे पीडीएफ प्रिंट करें और पूर्वावलोकन पृष्ठ अंगूठे के माध्यम से स्क्रॉल करें; कोई मार्जिन निर्धारित नहीं होने के बावजूद, अतिप्रवाह से बचने के लिए पूरी ऊँचाई कम होनी चाहिए -> जिसके कारण सभी सम-विषम पृष्ठ रिक्त हों।

— cbmtrx 19

क्या होगा यदि हमारे पास गतिशील सामग्री है जो 3-4 या अधिक पृष्ठों तक हो सकती है?

— जाजपब

Answer 3

ए 4 का आकार 210x297 मिमी है

तो आप सीएसएस के साथ उन आकारों को फिट करने के लिए HTML पेज सेट कर सकते हैं:

html,body{
    height:297mm;
    width:210mm;
}

Comments

क्या होगा यदि हमारे पास गतिशील सामग्री है जो 3-4 या अधिक पृष्ठों तक हो सकती है?

— जाजपब

Answer 4

प्रत्येक पृष्ठ के साथ अनुभाग बनाएं, और मार्जिन, ऊंचाई और चौड़ाई को समायोजित करने के लिए नीचे दिए गए कोड का उपयोग करें।

यदि आप A4 साइज़ को प्रिंट कर रहे हैं।

फिर उपयोगकर्ता

Size : 8.27in and 11.69 inches

@page Section1 {
    size: 8.27in 11.69in; 
    margin: .5in .5in .5in .5in; 
    mso-header-margin: .5in; 
    mso-footer-margin: .5in; 
    mso-paper-source: 0;
}

div.Section1 {
    page: Section1;
} 

फिर इसमें अपनी सभी सामग्री के साथ एक div बनाएँ।

<div class="Section1"> 
    type your content here... 
</div>

या

@media print {
    .page-break { 
        height: 0; 
        page-break-before: always; 
        margin: 0; 
        border-top: none; 
    }
}

body, p, a,
span, td { 
    font-size: 9pt;
    font-family: Arial, Helvetica, sans-serif;
}

body {
    margin-left: 2em; 
    margin-right: 2em;
}

.page {
    height: 947px;
    padding-top: 5px;
    page-break-after: always;   
    font-family: Arial, Helvetica, sans-serif;
    position: relative;
    border-bottom: 1px solid #000;
}

Comments

क्या आप सुनिश्चित हैं कि यह काम कर रहा है? मैं इस नवीनतम फ़ायरफ़ॉक्स और क्रोम में पुन: पेश नहीं कर सका।

— दान

हां, ज्यादातर मैं क्रोम के लिए विकास कर रहा हूं ... मेरे साथ ठीक काम कर रहा हूं।

— पीर अब्दुल

मुझे @page Section1Chrome 41.0.2272.77 के साथ काम करने की अनुमति नहीं मिल सकती है। क्या आपको वाकई यकीन है कि आपका जवाब काम करता है? data:text/html,<style>@page x{size:100pt 200pt}</style><div style="page:x">x</div>एक पूर्वावलोकन देखने और खोलने के लिए उदाहरण के लिए प्रयास करें । मुझे उस और के बीच कोई अंतर नहीं दिखता data:text/html,x। जब मैं इसके @page xसाथ प्रतिस्थापित @pageकरता हूं , तब यह काम करता है, लेकिन यह पृष्ठ-विशिष्ट चयनकर्ता नहीं है।

— रॉब डब्ल्यू

उन लोगों के लिए जो दस्तावेज़ों में सीएसएस डालने के लिए उपयोग नहीं करते थे (लेखन के समय अपने आप में), आप इस कोड को <style> </ style> टैग में डालते हैं और फिर div कहते हैं (जैसे <div class = पेज> Stuff </ div > <div class = पेज> अधिक सामान </ div>) जहां "सामान" और "अधिक सामान" ऐसी सामग्री है जो एक ही पृष्ठ में समाहित होनी है।

— mkingsbu

Answer 5

मैंने HTML का उपयोग उन रिपोर्टों को उत्पन्न करने के लिए किया है जो वास्तविक पेपर पर वास्तविक आकारों में सही ढंग से प्रिंट-आउट करते हैं।

यदि आप सीएसएस फ़ाइल में अपनी इकाइयों के रूप में मिमी का सावधानीपूर्वक उपयोग करते हैं तो आपको ठीक होना चाहिए, कम से कम एकल पृष्ठों के लिए। हालांकि लोग अपने ब्राउज़र में प्रिंट ज़ूम को बदलकर आपको खराब कर सकते हैं।

मुझे लगता है कि मैं जो कुछ भी कर रहा था, वह मुझे याद था, मैं अकेला था, इसलिए मुझे पेजेशन के बारे में चिंता करने की ज़रूरत नहीं थी।

Answer 6

मैंने इस समाधान को Google पर खोज करने के बाद देखा, "A4 CSS पेज टेम्पलेट" (codepen.io) के लिए खोजें। यह ब्राउज़र में ए 4 (ए 3, ए 5, भी पोर्ट्रेट) आकार क्षेत्र दिखाता है <पेज> टैग का उपयोग करके। इस टैग के अंदर सामग्री दिखाई गई है, लेकिन ब्राउज़र क्षेत्र के संबंध में पूर्ण स्थिति अभी भी है।

body {
  background: rgb(204,204,204); 
}
page {
  background: white;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
page[size="A4"] {  
  width: 21cm;
  height: 29.7cm; 
}
page[size="A4"][layout="portrait"] {
  width: 29.7cm;
  height: 21cm;  
}
@media print {
  body, page {
    margin: 0;
    box-shadow: 0;
  }
}

<page size="A4">A4</page>
<page size="A4" layout="portrait">A4 portrait</page>

यह मेरे लिए किसी अन्य सीएसएस / जेएस-लाइब्रेरी को शामिल किए बिना काम करता है। वर्तमान ब्राउज़रों (IE, FF, Chrome) के लिए काम करता है।

Comments

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

— लोफिएलसिंकी

पुरानी गायों को खाई से बाहर खींचने का मतलब नहीं है, लेकिन मेरा मानना ​​है कि बॉक्स-शैडो होना चाहिए box-shadow: none;और 0 नहीं

— NoobishPro

मेरे लिए यह काम करता है और मुझे ऊंचाई

— बदलनी है

क्या होगा यदि हमारे पास गतिशील सामग्री है जो 3-4 या अधिक पृष्ठों तक हो सकती है?

— जाजपब

Answer 7

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

अपने सामान्य में style.css:

table.tableclassname {
  width: 400px;
}

अपने में print.css:

table.tableclassname {
  width: 16 cm;
}

Answer 8

PPI और DPI से कोई फर्क नहीं पड़ता कि कोई दस्तावेज़ किसी ब्राउज़र को कैसे प्रिंट करेगा। प्रिंटर स्क्रीन डॉट पिच या छवियों की डीपीआई पर कोई जानकारी नहीं लेता है। यदि आप छवियों को प्रिंट कर रहे हैं तो वे स्क्रीन पर प्रदर्शित होने के अनुपात में समान आकार में प्रिंट करेंगे। ब्राउज़र का प्रिंट प्रोसेसर, जो कि बाकी दस्तावेज़ है, जो कुछ भी डीपीआई है, 72dpi की तरह कुछ से छवियों के DPI को कम करेगा। छवि को आधे पृष्ठ की चौड़ाई के रूप में प्रदर्शित करता है, फिर इसका लगभग 4 "चौड़ा भौतिक रूप से। छवि का पिक्सेल चौड़ाई ब्राउज़र में सही ढंग से प्रदर्शित करने के लिए लगभग 300px होगा, जब तक यह नाममात्र 300DPI पर प्रिंट करता है, तब तक प्रोसेसर ने पिक्सेल जोड़े हैं। और छवि लगभग 1200px तक बढ़ जाएगी जो कि 300 डीपीआई 4 "है।

जब पाठ जैसे वेक्टर या गैर पिक्सेल आधारित तत्वों की बात आती है, तो प्रिंटर ड्राइवर से अपना डीपीआई चुनता है जो स्क्रीन डॉट पिच या ब्राउज़र की चौड़ाई आदि से संबंधित नहीं है यदि ब्राउज़र 3000px चौड़ा है, तो प्रिंट प्रोसेसर उपयुक्त के रूप में पाठ को लपेट देगा।

heres प्रिंट डिस्प्ले बनाने में क्या मुश्किल है: प्रत्येक ब्राउज़र और प्रिंटर टेक्स्ट साइज़ (pt, em, px) और स्पेस को अपने तरीके से व्याख्या करेगा। आपके द्वारा उपयोग किए जाने वाले प्रिंटर, ब्राउज़र और शायद यहां तक ​​कि ओएस के आधार पर, आपको प्रति पृष्ठ एक अलग मात्रा में लाइनें और वर्ण मिलेंगे। इसलिए यदि आप अपने ब्राउज़र और प्रिंटर का उपयोग करके अपने कंप्यूटर पर परीक्षण करते हैं और यह पता लगाते हैं कि आप टेक्स्ट को 640x900px पर एक बॉक्स में प्रदर्शित कर सकते हैं और इसके प्रिंट पर एकदम सही, अगले आदमी जो प्रिंट करने की कोशिश करता है, वह संभवतः इसे अलग तरह से प्रिंट करवाएगा। वास्तव में प्रत्येक प्रिंटर और ब्राउज़र को हर बार समान होने के लिए बाध्य करने का कोई तरीका नहीं है।

पिक्सल और मोरसो को डीपीआई भूल जाते हैं, केवल एक चीज जिसके लिए आप पिक्सल का उपयोग कर सकते हैं, एक टेबल चौड़ाई सेट कर रहा है जो आपके प्रिंटर पर प्रिंट करने योग्य क्षेत्र की चौड़ाई का अनुकरण करता है। उस स्थिति में मैंने पाया कि 640px चौड़ा करीब है।

Comments

कई पृष्ठों को पढ़ें और वे सभी सुझाव देते हैं कि बढ़ते डीपीआई का परिणाम छोटे आकार में होगा जब छपाई (3000 पीएक्स / 300 डीपीआई = 10 इंच)। लेकिन जब मेरे क्रोम ब्राउज़र से छपाई होती है, तो 600 डीपीआई और 1200 डीपीआई बिल्कुल कागज पर समान आकार की ओर ले जाते हैं। वास्तव में उलझन में था जब तक मैंने यह नहीं पढ़ा!

— वांग शेंग

Answer 9

इसी तरह की समस्या की तलाश में मुझे यह मिला - http://www.indigorose.com/forums/archive/index.php/t-13334.html

A4 एक दस्तावेज़ प्रारूप है, एक स्क्रीन छवि के रूप में जो छवि रिज़ॉल्यूशन पर निर्भर करने वाली है, उदाहरण के लिए A4 आकार का दस्तावेज़:

• 72 डीपीआई (वेब) = 595 एक्स 842 पिक्सल
• 300 डीपीआई (प्रिंट) = 2480 एक्स 3508 पिक्सल (यह "ए 4" है जैसा कि मैं जानता हूं, "210 मिमी एक्स 297 मिमी @ 300 डीपीआई")
• 600 डीपीआई (प्रिंट) = 4960 एक्स 7016 पिक्सल

Answer 10

मुझे पता है कि यह विषय काफी पुराना है लेकिन मैं उस विषय के बारे में अपना अनुभव साझा करना चाहता हूं। दरअसल, मैं एक ऐसे मॉड्यूल की खोज कर रहा था जो मेरी दैनिक रिपोर्ट में मेरी मदद कर सके। मैं HTML + CSS (वर्ड, लेटेक्स, OO, ...) के बजाय कुछ दस्तावेज़ और कुछ रिपोर्ट लिख रहा हूँ। ऑब्जेक्ट को उन्हें ए 4 पेपर पर प्रिंट करना होगा ताकि इसे दोस्तों के साथ साझा किया जा सके, ... खोज के बजाय, मैंने एक साधारण काम को लागू करने के लिए एक छोटा सा मजाकिया कोडिंग सत्र तय किया जो "पेज", पेज नंबर, सारांश, हेडर को संभाल सके। , पाद लेख, .... अंत में, मैंने इसे ~~ 2h में किया और मुझे पता है कि यह अब तक का सबसे अच्छा उपकरण नहीं है, लेकिन यह मेरे उद्देश्य के लिए लगभग ठीक है। आप मेरे रेपो पर इस परियोजना पर एक नज़र डाल सकते हैं और अपने विचारों को साझा करने में संकोच न करें। यह शायद वह नहीं है जिसे आप 100% खोज रहे हैं, लेकिन मुझे लगता है कि यह मॉड्यूल आपकी मदद कर सकता है।

मूल रूप से मैं शरीर का एक पृष्ठ बनाता हूं "चौड़ाई: 200 मिमी;" और ऊंचाई का कंटेनर: 290 मिमी (ए 4 से छोटा)। फिर मैंने पेज-ब्रेक-आफ्टर का उपयोग किया: हमेशा; इसलिए ब्राउज़र का "प्रिंट" विकल्प पता है कि पृष्ठों को कब विभाजित करना है।

रेपो: https://github.com/kursion/jsprint

Answer 11

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

इसके बजाय, मैं स्क्रीन पर मौजूद सामग्री के आधार पर पीडीएफ बनाने और डाउनलोड करने और / या मुद्रण के लिए पीडीएफ की सेवा करने की सलाह दूंगा। यद्यपि अधिकांश उपलब्ध पीडीएफ लाइब्रेरी का भुगतान किया जाता है, लेकिन बुनियादी पीडीएफ बनाने के लिए कुछ मुफ्त विकल्प उपलब्ध हैं।

Answer 12

मैंने 1998 के बाद से A4 पृष्ठों पर मुद्रित करने के लिए वाणिज्यिक रिपोर्टों में 680px का उपयोग किया है । 700px सही तरीके से मार्जिन के आकार पर निर्भर नहीं कर सकता है। आधुनिक ब्राउज़र प्रिंटर पर पेज को फिट करने के लिए पेज को सिकोड़ सकते हैं, लेकिन यदि आप 680 पिक्सेल का उपयोग करते हैं तो आप लगभग किसी भी ब्राउज़र में सही ढंग से प्रिंट करेंगे।

यह आपके लिए HTML कोड स्निपेट चलाएं और डी परिणाम देखें:

window.print();

<table width=680 border=1 cellpadding=20 cellspacing=0>
<tr><th>#</th><th>name</th></tr>
<tr align=center><td>1</td><td>DONALD TRUMP</td></tr>
<tr align=center><td>2</td><td>BARACK OBAMA</td></tr>
</table>

JSFiddle:

https://jsfiddle.net/ajofmm7r/

Comments

पीएक्स में एक पूर्ण पृष्ठ के लिए ऊंचाई क्या है?

— कावेरीम

Answer 13

करने के कई तरीके:

html,body{
    height:297mm;
    width:210mm;
}


html,body{
    height:29.7cm;
    width:21cm;
}

html,body{
    height: 842px;
    width: 595px;
}

Answer 14

ए 4 पृष्ठ के अनुपात को मानने के लिए अपने लेआउट को सेट करना पूरी तरह से संभव है। आपको केवल उसी के अनुसार चौड़ाई और ऊँचाई निर्धारित करनी होगी (संभवत: जाँच करें window.innerHeightऔर window.innerWidthहालाँकि मुझे यकीन नहीं है कि यह विश्वसनीय है)।

मुश्किल हिस्सा ए 4 प्रिंटिंग के साथ है। उदाहरण के लिए जावास्क्रिप्ट केवल window.printविधि के साथ मुद्रण पृष्ठों का समर्थन करता है । जैसा कि @Prutswonder ने वेबपेज से एक पीडीएफ बनाने का सुझाव दिया है, शायद ऐसा करने का सबसे परिष्कृत तरीका है (पहली जगह में पीडीएफ प्रलेखन की आपूर्ति के अलावा)। हालाँकि, यह उतना तुच्छ नहीं है जितना कि कोई सोच सकता है। यहां एक लिंक दिया गया है जिसमें HTML से पीडीएफ बनाने के लिए एक सभी खुले स्रोत जावा वर्ग का वर्णन है: http://www.javaworld.com/javaworld/jw-04-2006/jw-0410-html.html ।

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