रूबी में एक सर्वर पर पीडीएफ उत्पन्न करना

एक महीने पहले की तुलना में थोड़ा अधिक, मुझे रूबी डेवलपर्स की एक टीम में एक स्टार्ट-अप में एक लेआउट डिजाइनर मिला। इतना भाग्यशाली कि टीम बहुत अच्छी थी और पढ़ाई करने की मेरी इच्छा एक अच्छे विशेषज्ञ को पाने की उनकी इच्छा से मेल खाती थी।

HTML लेआउट में स्वयं का थोड़ा मूल्य है और केवल एक चीज नहीं है जो लेआउट डिजाइनर को लोड कर सकता है।

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

रूबी के लिए जनरेटर विकल्प

रूबी टूलबॉक्स वेबसाइट के अनुसार, पीडीएफ फाइलें बनाने के लिए दो मूलभूत दृष्टिकोण हैं:

• उस पर wkhtmltopdf और विभिन्न आवरण
• झींगा

पहले विकल्प में एचटीएमएल पेज जेनरेट करना और उसे पीडीएफ में बदलना शामिल है, जबकि दूसरा अनुमति देता है, वास्तव में, कैनवास के साथ काम करना और अतिरिक्त परतों के साथ एक दस्तावेज तैयार करना।

मैंने प्रॉन का उपयोग करने का विकल्प चुना (अधिकांश भाग के लिए, निश्चित रूप से, क्योंकि पीडीएफ फाइल का पिछला संस्करण इस तरह से उत्पन्न हुआ था) भले ही मुझे HTML और CSS की परिचित दुनिया से उभरना पड़ा हो

जो लोग रुचि रखते हैं, मैं आपको हैबरकट के लिए आमंत्रित करता हूं।

प्रॉन के साथ काम करने की विशेषताएं

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

पेज सेटिंग्स

सबसे पहले मैं आया था पेपर आकार। डिफ़ॉल्ट रूप से। प्रॉन नए दस्तावेज़ के लिए लेटर पेपर आकार का उपयोग करता है।

इसके अलावा, मार्जिन फ़ील्ड, एक पृष्ठभूमि छवि निर्दिष्ट करना संभव है।

यह भी याद रखने योग्य है कि हम पिक्सेल के साथ काम नहीं कर रहे हैं, लेकिन टाइपोग्राफिक वस्तुओं के साथ।

img = "#{Prawn::DATADIR}/images/background.jpg" Prawn::Document.generate('hello.pdf', :page_size => "A4", :margin => 20, :background => img) do |pdf| pdf.text 'Hello World!' end 

यह कोड 20-पॉइंट मार्जिन, एक बैकग्राउंड इमेज बैकग्राउंड.जेपीजी और टेक्स्ट 'हैलो वर्ल्ड' के साथ A4- आकार की शीट पर hello.pdf नामक एक दस्तावेज बनाता है।

पाठ ब्लॉक आउटपुट

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

यदि कोड में मैंने पहले उद्धृत किया था 'हैलो वर्ल्ड!' 'हैलो हबर!' तब हम उचित रूप से फोंट के साथ एक समस्या प्राप्त करते हैं।

हमारी परियोजना में, हम मालिकाना फ़ॉन्ट प्रोक्सिमा नोवा का उपयोग करते हैं। जनरेटर के लिए यह जानने के लिए कि हम किस फ़ॉन्ट का उपयोग करना चाहते हैं और हम किस पाठ शैली के साथ काम करेंगे, हमें स्पष्ट रूप से फ़ॉन्ट निर्दिष्ट करना होगा।

 font_families: { proxima: { bold: "assets/fonts/proximanova-bold-webfont.ttf", normal: "assets/fonts/proximanova-reg-webfont.ttf", light: "assets/fonts/ProximaNova-Light.ttf" } } Prawn::Document.generate('hello.pdf') do |pdf| pdf.font_families.update("Proxima Nova" => @opts[:font_families][:proxima]) pdf.font "Proxima Nova", size: 12, style: bold pdf.text 'Hello World!' end 

यह कोड फ़ॉन्ट proximanova-bold-webfont.ttf का उपयोग करते हुए समान पाठ, 12 अंकों के आकार में आउटपुट करेगा।

फ़ॉन्ट रंग दस्तावेज़ विशेषता fill_color के माध्यम से सेट किया गया है और इसमें एक हेक्साडेसिमल मान हो सकता है।

 fill_color = "ffffff" 

इसके अलावा, आप डिफॉल्ट_लीडिंग के माध्यम से या टेक्स्ट ब्लॉक में सीधे लीडिग पैरामीटर निर्दिष्ट करके लाइन रिक्ति निर्दिष्ट कर सकते हैं। पैराग्राफ के बीच इंडेंटेशन के माध्यम से निर्दिष्ट किया जाता है : इंडेंट_परगेट्स ।

जब ग्रंथों की छपाई होती है, तो अक्सर एक अटूट स्थान का उपयोग किया जाता है। और चूंकि हम एक HTML दस्तावेज़ के साथ काम नहीं कर रहे हैं, जहां आप बस & nbsp निर्दिष्ट कर सकते हैं; फिर आपको ट्रिक्स पर जाना होगा और एक विशेष विधि का विकल्प देना होगा: प्रॉन :: टेक्स्ट :: एनबीएसपी ।

झींगा भी ऐसे मापदंडों को समझता है जैसे : कर्लिंग और : किरन और अक्षर रिक्ति के लिए क्रमशः character_spacing । Kerning या तो सही या गलत स्वीकार करता है, जबकि character_spacing बिंदुओं में निर्दिष्ट होता है।

 default_leading 5 text string, :kerning => true, :character_spacing => 5 move_down 20 text string, :leading => 10, :indent_paragraphs => 60 move_down 20 text string + '#{Prawn::Text::NBSP * 10}' + string 

यह कोड 5 बिंदुओं के लिए लाइन स्पेसिंग सेट करता है, कर्निंग और लेटर के साथ 5 पॉइंट्स के साथ एक लाइन प्रदर्शित करता है, कर्सर को 20 पॉइंट्स से कम करता है, 10 पॉइंट्स की लाइन स्पेसिंग और 60 पॉइंट्स के एक पैराग्राफ रिक्ति के साथ एक लाइन प्रदर्शित करता है। कर्सर को 20 अन्य बिंदुओं से नीचे ले जाता है और दो लाइनों को दस अलग-अलग स्थानों से अलग दिखाता है।

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

 text " <font size='18'></font>  " + "<font name='Courier'>  </font>  font  " + "<font character_spacing='2'> </font>. ", :inline_format => true 

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

स्थिति

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

 text_box 'test', :at[10,100] 

यह कोड पृष्ठ के बाईं ओर पृष्ठ के निचले भाग से 10 अंक और नीचे से 100 बिंदुओं पर स्ट्रिंग 'परीक्षण' को आउटपुट करेगा।

ग्राफिक आदिम

हमारे डिजाइनर द्वारा तैयार किए गए लेआउट में बहुत सारे ग्राफिक तत्व थे जो मैं वास्तव में छवियों के साथ एम्बेड नहीं करना चाहता था। यह ऐसे मामलों के लिए है कि जनरेटर ग्राफिक प्राइमेटिव्स के साथ काम करने की क्षमता प्रदान करता है - लाइनें ( क्षैतिज_ रेखा, ऊर्ध्वाधर_ रेखा), सर्कल ( fill_circle और stro_circle ) और बहुभुज ( fill_polygon और stro_colygon ) के साथ और बिना भरें।

भरण रंग का उपयोग पाठ के रंग के समान किया जाता है और fill_color के माध्यम से भी सेट किया जाता है, समोच्च लाइनों का रंग स्ट्रोक_ रंग के माध्यम से निर्दिष्ट किया जाता है । इसके अलावा, आप लाइन की चौड़ाई लाइन_ऑर्डर पैरामीटर के माध्यम से निर्दिष्ट कर सकते हैं

यहां एक फ़ंक्शन का एक उदाहरण है जो एक स्ट्रोक, एक केंद्र रेखा और एक त्रिकोण सूचक के साथ एक सर्कल खींचता है

 def draw_circle_part(colors, left, top, pdf) pdf do fill_color colors['circle_1'] fill_polygon [left['circles_left'], top['polygon_2_top']], [left['line_1'], top['polygon_1_top']], [left['line_2'], top['polygon_1_top']] fill_color colors['circle_2'] fill_circle [left['circles_left'], top['circles_top']], 28 stroke_color colors['circle_3'] line_width 1.5 stroke_circle [left['circles_left'], top['circles_top']], 28 stroke_color colors['circle_4'] stroke do horizontal_line left['line_1'], left['line_2'], :at => top['circles_top'] end line_width 1 end end 

इसके अलावा, यह घटता और मनमाना लाइनों को खींचने में सक्षम होने के लिए उपयोगी हो सकता है। ऐसा करने के लिए, एक निर्दिष्ट बिंदु से दूसरे बिंदु पर रेखाएं और घटता खींचने के लिए स्ट्रोक.लाइन और स्ट्रोक.काउंटर विधियों का उपयोग करें, साथ ही साथ वर्तमान कर्सर स्थिति से लाइनों के लिए स्ट्रोक. line_to और stro.curve_to बिंदु पर। इसके अलावा, आप घटता के लिए पैरामीटर सेट कर सकते हैं : सीमाएं , उन बिंदुओं को दर्शाती हैं जिनके माध्यम से वक्र गुजरेंगे। इसके अलावा, बेजियर ट्रांसफॉर्मेशन का उपयोग निर्माण के लिए किया जाएगा।

 stroke do line [300,200], [400,50] curve [500, 0], [400, 200], :bounds => [[600, 300], [300, 390]] end 

छवि

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

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

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

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

 image "assets/images/details.png", :at => [25, 641], :height => 22 image "assets/images/prawn.png", :scale => 0.7, :position => :right, :vposition => 100 

टेबल

तालिकाओं का उपयोग किए बिना रसीद बनाना लगभग असंभव है। झींगा टेबल बनाने के लिए दो तरीके प्रदान करता है: टेबल और मेक_टेबल । दोनों विधियाँ केवल अंतर के साथ एक तालिका बनाती हैं जो तालिका तालिका बनाने के तुरंत बाद रेंडरिंग विधि को कॉल करती है, जबकि make_table केवल बनाई गई तालिका को वापस करता है।
तालिका बनाने के लिए सबसे सुविधाजनक तरीका विधि में डेटा सरणियों की एक सरणी को पास करना है, जहां प्रत्येक आंतरिक सरणी एक एकल पंक्ति है। यदि आप सरणी के लिए make_table के माध्यम से बनाई गई एक वस्तु को पास करते हैं, तो तालिका के अंदर एक तालिका बनाई जाएगी।
कुंजी के साथ तालिका में हैश ट्रांसफर करना भी संभव है: छवियों के लिए चित्र और स्वरूपित पाठ डालने के लिए सामग्री ।

 cell_1 = make_cell(:content => "this row content comes directly ") cell_2 = make_cell(:content => "from cell objects") two_dimensional_array = [ ["..."], ["subtable from an array"], ["..."] ] my_table = make_table([ ["..."], ["subtable from another table"], ["..."] ]) image_path = "#{Prawn::DATADIR}/images/stef.jpg" table([ ["just a regular row", "", "", "blah blah blah"], [cell_1, cell_2, "", ""], ["", "", two_dimensional_array, ""], ["just another regular row", "", "", ""], [{:image => image_path}, "", my_table, ""]]) 

यह कोड इस तरह की तालिका (प्रलेखन से उदाहरण) का उत्पादन करेगा:

आप तालिका के लिए निम्नलिखित विकल्प निर्दिष्ट कर सकते हैं:

• : स्थिति - छवि के समान, सापेक्ष स्थिति के साथ, तालिका को किनारों के साथ या केंद्र में संरेखित करता है, या दस्तावेज़ की बाईं सीमा से इंडेंट करता है
• : column_widths - प्रत्येक स्तंभ के आयामों के साथ या तो एक सरणी स्वीकार करता है, या एक वस्तु जिसमें कुंजी कॉलम संख्या है, और मान चौड़ाई है (उदाहरण के लिए {2 => 240})
• : चौड़ाई - तालिका की चौड़ाई। डिफ़ॉल्ट रूप से, तालिका में सामग्री की एक चौड़ाई होती है
• : row_colors - पंक्तियों के लिए रंगों की एक सरणी। यदि सारणी में तालिका में पंक्तियों की तुलना में कम रंग होते हैं, तो रंग को सरणी से चक्रीय रूप से लिया जाएगा।

इसके अलावा, आप कक्षों के लिए पैरामीटर सेट कर सकते हैं:

• : पैडिंग - सीएसएस के साथ सादृश्य द्वारा, यह कोशिकाओं की सीमाओं से सामग्री का इंडेंटेशन सेट करता है और सीएसएस की तरह, पैरामीटर ऑर्डर में जाते हैं [ऊपरी इंडेंट, राइट इंडेंट, लोअर इंडेंट, लेफ्ट इंडेंट]
• : बॉर्डर्स - बॉर्डर की एक सरणी जो सेल में सेट की जाएगी। डिफ़ॉल्ट रूप से, सभी सीमाएँ दिखाई देती हैं।

यह तालिका गुणों की पूरी सूची नहीं है, लेकिन वे झींगे में टेबल के साथ खुद को परिचित करने और अधिकांश लागू समस्याओं को हल करने के लिए पर्याप्त हैं।

निष्कर्ष

इस जनरेटर के साथ काम करने के परिणामों के आधार पर, मैं निम्नलिखित कह सकता हूं - मेरे विशिष्ट झींगे कार्य के लिए, भले ही आपको जिस कोड को पीढ़ी के लिए टाइप करने की आवश्यकता हो वह बहुत बोझिल लग रहा है, यह लगभग पूरी तरह से आया था, क्योंकि रसीद के पास परियोजना में एक मार्ग नहीं है, और उत्पन्न होता है बैक से प्राप्त JSON डेटा सेट से।
निजी तौर पर, मेरे लिए यह सुविधाजनक था कि मैं अलग-अलग कार्यों में झींगे कोड के ब्लॉक को दोहराता और बस उन्हें सही स्थानों पर बुलाता, जो सेट आए डेटा सेट को पार्स करने के लिए रूबी कोड का उपयोग करता, वस्तुओं के माध्यम से पुनरावृत्ति करता, जो HTML में करने के लिए बहुत समस्याग्रस्त है।

एक दस्तावेज़ का एक उदाहरण जो मुझे मुश्किल मार्गों पर दो यात्रियों के डेटा के साथ मिला, यहां डाउनलोड किया जा सकता है: ई-टिकट

हालाँकि, यदि आप साइट पर किसी मौजूदा पृष्ठ का एक पीडीएफ संस्करण उपलब्ध कराना चाहते हैं, तो पीडीएफकिट का उपयोग करना अधिक आसान और लाभदायक है, जो निर्दिष्ट HTML पृष्ठ से सीधे पीडीएफ फाइलों को बना सकता है।