HTML को PDF में बदलें

पेज किन चीज़ों तक पहुंच सकता है, और CSS क्या तय करती है

कन्वर्ज़न को नेटवर्क एक्सेस नहीं मिलता और वह कोई स्क्रिप्ट नहीं चलाता, और ये दोनों गायब फ़ीचर नहीं, सुरक्षा के फ़ैसले हैं। जो कन्वर्टर भेजे गए पेज की मांगी हर चीज़ मंगा लेता, उसे आसानी से उन पतों की ओर मोड़ा जा सकता था जिन्हें सिर्फ़ हमारा सर्वर देख सकता है, और जो स्क्रिप्ट चलाता, वह किसी अजनबी का कोड चला रहा होता। इसलिए CDN से लिंक की गई स्टाइलशीट नहीं आती, सामान्य वेब पते वाली इमेज लोड नहीं होती, वेब फ़ॉन्ट चुपचाप बदल दिया जाता है, और जो पेज JavaScript से ख़ुद को बनाता है, वह उसी रूप में कन्वर्ट होता है जो कुछ भी चलने से पहले मार्कअप कहता है। इलाज हमेशा एक ही है: CSS को style ब्लॉक में इनलाइन करें और इमेज को data URI के रूप में एम्बेड करें। ब्राउज़र यह सीधे देते हैं — Firefox में “Save Page As → Web Page, Complete”, या “Save as MHTML” — और एक फ़ाइल में सेव किया गया पेज सही-सही कन्वर्ट होता है।

नतीजे को असल में प्रिंट CSS नियंत्रित करती है, और जानने लायक दूसरी बात यही है। पेज ऐसे लेआउट होता है जैसे प्रिंट हो रहा हो, इसलिए @media print ब्लॉक लागू होता है और सामान्य स्क्रीन स्टाइलशीट शायद नहीं — इसीलिए जिस पेज में नेविगेशन छिपाने का प्रिंट नियम है वह शानदार कन्वर्ट होता है, और जिसमें नहीं है वह पूरी साइट का ढांचा साथ ले आता है। @page काग़ज़ तय करता है: साइज़, ओरिएंटेशन और मार्जिन वहीं से पढ़े जाते हैं। break-before, break-after और break-inside: avoid तय करते हैं कि पेज कहां बंटें, इसलिए कोई टेबल जो टूटनी नहीं चाहिए, या कोई सेक्शन जिसे नए पेज से शुरू होना है, पूरी तरह आपके हाथ में है।

बैकग्राउंड सबसे आम छूटने वाली चीज़ है। ब्राउज़र डिफ़ॉल्ट रूप से बैकग्राउंड रंग और इमेज प्रिंट नहीं करते, इसलिए गहरे रंग का हेडर सफ़ेद कन्वर्ट हो सकता है, जब तक स्टाइलशीट में -webkit-print-color-adjust: exact न हो — बस एक लाइन, और यही ब्रांडेड डॉक्यूमेंट और सादे डॉक्यूमेंट के बीच का फ़र्क़ है। टेक्स्ट असली टेक्स्ट रहता है, लिंक काम करने वाले लिंक रहते हैं, और जहां मार्कअप असली heading एलिमेंट इस्तेमाल करता है वहां हेडिंग PDF बुकमार्क बन सकती हैं।

अगर हमारा सर्वर उपलब्ध न हो, तो पेज यह बताता है और डॉक्यूमेंट को लोकल रूप से दोबारा बनाता है, जो टेक्स्ट, इमेज और सरल लेआउट रखता है, पर जिस चीज़ को असली लेआउट प्रोसेस चाहिए उसे सरल कर देता है — जिनमें grid, flexbox, floats और positioning शामिल हैं। सरल डॉक्यूमेंट लगभग हूबहू कन्वर्ट होता है; डिज़ाइन किया हुआ नहीं।

जब आपको कुछ और चाहिए

लाइव URL कन्वर्ट करने के लिए — जो यह पेज जानबूझकर नहीं कर सकता — वही रेंडरिंग जो हमारे सर्वर पर चलती है, आपके कंप्यूटर पर भी चलती है: chrome --headless --disable-gpu --print-to-pdf=out.pdf https://example.com पेज को उसके नेटवर्क, स्क्रिप्ट और सब कुछ समेत लोड करता है। पूरा फ़र्क़ यही है, और इसे इस्तेमाल करने की वजह भी यही है।

हेडर, फ़ुटर, पेज नंबर और मार्जिन पर असली नियंत्रण के लिए WeasyPrint और Prince CSS Paged Media स्पेसिफ़िकेशन को ठीक से लागू करते हैं: @top-center से चलते हुए हेडर, पेज काउंटर, फ़ुटनोट, और ऐसे क्रॉस-रेफ़रेंस जो पेज नंबर में बदलते हैं। WeasyPrint मुफ़्त है और ज़्यादातर डॉक्यूमेंटेशन पाइपलाइन इसी का इस्तेमाल करती हैं। Chrome इनमें से लगभग कुछ भी सपोर्ट नहीं करता, इसलिए फ़ुटर में “Page 3 of 12” वाली जनरेट की गई रिपोर्ट के लिए इसकी जगह इनमें से कोई एक चाहिए।