كيفية تحويل HTML إلى PDF
إنشاء ملفات PDF من HTML مفيد لإنتاج الفواتير والتقارير والرسائل والشهادات — أي مستند تريد التحكّم في تخطيطه بـ CSS لكن توزيعه كملف PDF.
كيفية تحويل HTML إلى PDF
- الصق HTML الخاص بك — أدخل كود HTML، بما في ذلك CSS مضمَّن أو علامات
<style>، في المحرّر. يمكن أن يتضمّن الكود بنية الصفحة الكاملة مع الرؤوس والجداول والصور والأنماط. - عاين النتيجة — تعرض المعاينة الحية بدقة كيف سيظهر ملف PDF أثناء كتابتك. اضبط HTML وCSS حتى تتطابق النتيجة مع توقّعاتك.
- أنشئ ونزّل — انقر على زر الإنشاء لإنشاء ملف PDF في متصفّحك، ثم نزّله فورًا.
ما يمكنك إنشاؤه
- الفواتير والإيصالات — جداول منظّمة مع هوية الشركة وبنود وإجماليات
- التقارير — مستندات منسّقة بالعناوين والفقرات والرسوم البيانية وجداول البيانات
- الشهادات — تخطيطات منسّقة بخطوط مخصّصة وحدود ونص ممركز
- الرسائل — مراسلات مهنية مع رأس الصفحة والمحتوى ومنطقة التوقيع
- السير الذاتية — تخطيطات أنيقة تُصدَّر إلى PDF نظيف لطلباتك
نصائح تنسيق لإخراج PDF
استخدم أنماطًا مضمَّنة أو علامات <style> — لا يتم تحميل أوراق الأنماط الخارجية. ضع كل CSS الخاص بك إما مضمَّنًا على العناصر، أو في كتلة <style> داخل HTML.
حدّد هوامش الصفحة — استخدم @page { margin: 20mm; } في CSS للتحكّم في المساحة حول محتواك في ملف PDF.
استخدم وحدات مناسبة للطباعة — mm وcm وpt أكثر قابلية للتنبؤ في ملفات PDF من px أو rem. استخدم mm للهوامش والتباعدات التي يجب أن تتطابق مع الأبعاد المادية.
تجنّب التخطيطات التي تعتمد على نافذة العرض — تعمل عروض النسبة المئوية والعروض البكسلية الثابتة بشكل أفضل. قد لا تتصرّف الوحدات المرتبطة بنافذة العرض (vw، vh) كما هو متوقّع في ملف PDF.
نصائح
- عاين أولًا — تحقّق دائمًا من المعاينة الحية قبل الإنشاء. التكرار على HTML أسرع بكثير من إعادة إنشاء ملف PDF في كل مرة.
- استخدم base64 للصور — حوّل الصور إلى Data URI base64 لضمان تضمينها في ملف PDF. قد تفشل عناوين URL الخارجية بسبب قيود CORS.
- ابقَ بسيطًا — قد لا تظهر تخطيطات CSS المعقّدة (الشبكات المتداخلة، العناصر المتموضعة المتراكبة) بشكل مثالي. تنتج التخطيطات الأبسط ملفات PDF أكثر موثوقية.
- اختبر فواصل الصفحات — للمستندات متعدّدة الصفحات، استخدم
page-break-before: alwaysللتحكّم في مكان بدء الصفحات الجديدة.
الأسئلة الشائعة
هل يحافظ ملف PDF على نمط CSS الخاص بي؟
نعم. يقدّم المحوّل HTML الخاص بك بـ CSS المطبَّق، بما في ذلك الألوان والخطوط والهوامش والتخطيط. يبدو ملف PDF مثل صفحة الويب المعروضة، وليس الكود المصدر الخام.
هل يمكنني تضمين صور في ملف PDF؟
نعم. استخدم صور base64 (Data URI) لأكثر النتائج موثوقية. قد تعمل عناوين URL للصور الخارجية إذا كانت متاحة ومتوافقة مع CORS.
هل يتم إرسال HTML الخاص بي إلى خادم؟
لا. يحدث التحويل بالكامل في متصفّحك. لا يغادر الكود وملف PDF الذي تم إنشاؤه جهازك أبدًا.
ما ميزات CSS المدعومة؟
CSS القياسي، بما في ذلك التخطيطات والألوان والخطوط والخلفيات والحدود والجداول، مدعوم جيدًا. قد تكون الميزات المتقدّمة مثل CSS Grid والرسوم المتحركة المعقّدة وبعض حالات Flexbox الحدّية محدودة.