تحويل HTML إلى PDF — الصق الكود واحفظه PDF
حوّل كود HTML إلى PDF بمقاس الورق والهوامش التي تختارها
تعمل في متصفحك · لا يُرفع أي شيء
الصق جزءًا (<div>…) أو مستندًا كاملًا (<html>…). من المستند الكامل يُستخدم محتوى <body> وكتل <style> فقط.
أنماط تريد إضافتها. تُطبَّق قواعد @media print أيضًا.
حفاظًا على الأمان والخصوصية، لا تُطلب أبدًا الصور والخطوط وملفات CSS التي ليست بعناوين data: أو blob:، ولا تُشغَّل السكربتات. لا تتوفر ميزة تحويل صفحة ويب من عنوانها.
المعاينة (العرض القابل للطباعة)
أدخل HTML لتظهر المعاينة.
في نافذة الطباعة اختر «حفظ بتنسيق PDF» وجهةً. يحتفظ ملف PDF بنص حقيقي يمكن البحث فيه، ويقرر المتصفح فواصل الصفحات.
يقطّع المعاينة إلى صور بحجم الصفحة. يُنزَّل مباشرة دون نافذة، لكن لا يمكن البحث في النص أو نسخه، وقد تنقسم الصفحة في منتصف سطر.
ماذا تفعل الأداة
عروض الأسعار والإيصالات وقوالب البريد الإلكتروني كثيرًا ما تكون HTML. الصق هنا HTML وCSS، وشاهد المعاينة بالعرض القابل للطباعة للورق الذي اخترته، ثم احفظها PDF بإحدى طريقتين: عبر نافذة الطباعة لملف PDF نصي، أو ملف PDF من صور يُنزَّل مباشرة. يبقى الكود في هذه الصفحة ولا يُرسل شيء إلى خادم.
طريقة الاستخدام
- الصق HTML. من المستند الكامل (
<html>…) يُستخدم محتوى<body>وكتل<style>فقط. أضف CSS في المربع الثاني إن أردت. - اختر الورق (A4 أو Letter أو A3) والاتجاه والهوامش، وهل تُطبع الخلفيات.
- راجع المعاينة واضغط الحفظ بتنسيق PDF من نافذة الطباعة، ثم اختر «حفظ بتنسيق PDF» وجهةً.
- أو اضغط تنزيل PDF من صور لتحصل على PDF مكوّن من صور الصفحات.
طريقة العمل
- التنظيف: يُحلَّل الكود باستخدام DOMParser (مستند خامل) ومحلل CSS في المتصفح، ويُحذف كل عنوان ليس data: أو blob: (الصور و@import وurl() وsrcset)، وعناصر script وiframe وobject وlink، وسمات on*. تُعرض العناوين المحذوفة في قائمة.
- إطار المعاينة: إطار iframe معزول (sandbox) بلا إذن للسكربتات، مع Content-Security-Policy تمنع الطلبات والسكربتات.
- الخطوط والاتجاه: تُستخدم الخطوط المثبتة على الجهاز، فتظهر العربية وغيرها كما يعرضها المتصفح. الاتجاه الافتراضي للصفحة من اليسار إلى اليمين، لذا أضف
dir="rtl"إلى العنصر الخارجي لمحاذاة النص العربي إلى اليمين. - الورق: A4 بمقاس 210×297 mm وA3 بمقاس 297×420 mm (ISO 216)، وLetter بمقاس 8.5×11 inch؛ يضبط وضع الطباعة المقاس والهوامش بقاعدة CSS
@page. - PDF من صور: يُنسَّق المحتوى بالعرض القابل للطباعة (680 px لورق A4 بهوامش 15 mm)، ثم يُلتقط صفحةً صفحة بدقة مضاعفة 2× ويُحفظ بصيغة JPEG، حتى 50 صفحة، باستخدام html-to-image (MIT) وpdf-lib (MIT).
- الطول: حتى 500,000 حرف لـ HTML وCSS معًا.
أمثلة
| الهدف | الخطوات |
|---|---|
| عرض سعر PDF بنص قابل للبحث | إدراج مثال ← A4، هوامش عادية ← نافذة الطباعة ← حفظ بتنسيق PDF |
| الحصول على الملف فورًا على الهاتف | تنزيل PDF من صور |
| جدول عريض | أفقي، هوامش ضيقة |
لحفظ HTML صورةً بصيغة PNG استخدم أداة تحويل HTML إلى صورة؛ ولمعاينة Markdown على الشاشة استخدم معاينة Markdown.
الأسئلة الشائعة
هل يمكن تحويل صفحة ويب من عنوانها؟
لا. يُحوَّل HTML الملصق فقط. جلب موقع آخر نيابةً عنك يعني إرسال طلبات إليه من جهازك، وربما مع حالة تسجيل دخولك. لحفظ صفحة ويب افتحها واستخدم «طباعة ← حفظ بتنسيق PDF» في المتصفح.
ما الفرق بين الزرّين؟
«الحفظ بتنسيق PDF من نافذة الطباعة» يستخدم طباعة المتصفح نفسه، فيبقى النص قابلًا للبحث وتقع فواصل الصفحات بين الأسطر. أما «تنزيل PDF من صور» فيتخطى النافذة لكنه يحفظ كل صفحة صورةً، فلا يمكن تحديد النص وقد تنقسم الصفحة في منتصف سطر.
هل يظهر النص العربي بشكل صحيح؟
نعم. يرسم المتصفح المعاينة وملف PDF بالخطوط المثبتة على جهازك، فتظهر العربية متصلة الحروف كما في المتصفح. ولمحاذاة النص من اليمين إلى اليسار أضف السمة `dir="rtl"` إلى العنصر الخارجي في HTML.
لماذا لا تظهر صوري أو خطوط الويب؟
حفاظًا على الأمان والخصوصية، لا تُطلب أبدًا الصور والخطوط وأوراق الأنماط التي ليست بعناوين data: أو blob:. أدرج الصور بعناوين data: بترميز Base64؛ ويستخدم النص الخطوط المثبتة على الجهاز.
ماذا يحدث للسكربتات؟
تُحذف عناصر script وسمات الأحداث مثل onclick، ولإطار المعاينة سياسة تمنع السكربتات، فلا يُشغَّل شيء من الكود الملصق.
هل يمكنني التحكم في فواصل الصفحات؟
في وضع الطباعة تُحترم قواعد CSS مثل `break-before: page`، وتُطبَّق قواعد `@media print` في مربع CSS عند الطباعة فقط.
