ما يفعله محول HTML إلى PDF
محول HTML إلى PDF يأخذ أي HTML لديك — ترميز ملصوق، ملف .html محمّل، أو URL عام — ويحوّله إلى PDF قابل للتحميل. الصفحة تُعرض في canvas خارج الشاشة بـ html2canvas، تُبلّط على صفحات PDF بـ jsPDF، وتُسلّم كملف واحد. اختر A4 أو Letter، عمودي أو أفقي، وهامش. كل شيء يحدث داخل متصفحك. لا شيء يُرفع.
كن صريحاً حول المقايضة. html2canvas يعيد تنفيذ مجموعة فرعية من CSS في JavaScript — يقرأ الأنماط المحسوبة من DOM ويرسمها على canvas. يُتقن الأشياء الشائعة: الألوان، الخطوط، التبطين، الحدود، الخلفيات، الوضع البسيط، flexbox الأساسي. يصارع في الحالات الحدية: تخطيطات grid المعقدة، subgrid، محاذاة baseline، فجوات نسبية داخل حاويات flex، حسابات تخطيط معينة بخصائص مخصصة. للمخرج بدقة بكسل، Print → Save as PDF في متصفحك يفوز — يستخدم محرك العرض الحقيقي. أداتنا للحالة حيث لديك HTML خام في يدك وتريد PDF دون فتح تبويب متصفح أولاً.
كيفية استخدامه
الأداة لها ثلاثة أوضاع إدخال. اختر الذي يطابق وضعك.
- اختر وضعاً. الصق HTML يعمل لأي ترميز لديك بالفعل. حمّل .html يقبل ملفاً محلياً. من URL يجلب صفحة عامة (معظمها سيفشل بسبب CORS — انظر أدناه).
- حدد حجم الصفحة (A4 أو Letter)، الاتجاه (عمودي أو أفقي)، والهامش (0، 10، 20، أو 40 mm). الافتراضيات هي A4 / عمودي / 20 mm.
- اضغط حوّل إلى PDF. HTML يُعرض في div مخفي، html2canvas يلتقطه بمقياس 2x للحدة، و jsPDF يُبلّط النتيجة عبر العدد اللازم من الصفحات.
- اضغط حمّل. اسم ملف المخرج يُشتق من المصدر: HTML ملصوق →
webpage.pdf، ملف محمّل → يعكس اسم الملف، URL → مُشتق من اسم المضيف (example.com→example-com.pdf).
لا شيء عن HTML الخاص بك يصل إلى خادم نتحكم به. وضع اللصق ووضع التحميل محليان بالكامل — افتح تبويب الشبكة في متصفحك أثناء التحويل وسترى صفر طلبات صادرة. وضع URL يقوم بطلب واحد بالضبط: متصفحك يجلب URL الذي أدخلته، والاستجابة تبقى في ذاكرة المتصفح.
أوضاع الإدخال الثلاثة ومتى تستخدم كلاً منها
كل وضع يحل مشكلة مختلفة. اختيار الصحيح في البداية يوفر الوقت.
| الوضع | ما يقبله | يعمل على | الأفضل لـ |
|---|---|---|---|
| الصق HTML | أي ترميز في منطقة النص | كل شيء (الترميز محلي بالفعل) | قوالب البريد الإلكتروني، مقتطفات CMS، تقارير مُصدّرة، أي شيء يمكنك نسخه ولصقه |
| حمّل .html | ملف .html محلي | كل شيء (الملف محلي بالفعل) | تقارير HTML مستقلة، فواتير مُولّدة، notebooks مُصدّرة |
| من URL | URL عام بـ CORS متساهل | حوالي 5% من URLs العامة (نقاط نهاية تسمح بـ CORS، بيئات تطوير، مواقعك الخاصة) | جلب سريع من APIs ترجع HTML، مواقعك الخاصة حيث تتحكم في الرؤوس |
إذا جربت وضع URL وحصلت على خطأ، صادفت Cross-Origin Resource Sharing — ميزة أمان للمتصفح، وليست خطأ يمكننا تصحيحه. الحل البديل عام: افتح URL في تبويب عادي، انقر بزر الفأرة الأيمن → View Page Source (أو DevTools → Elements → Copy outerHTML على علامة <html> إذا كانت الصفحة مُعرضة بـ JS)، والصق ذلك في وضع "الصق HTML". HTML الآن محلي، CORS لم يعد ينطبق، والتحويل يعمل.
مثال عملي بأرقام حقيقية
افترض أن لديك قالب بريد إلكتروني HTML — إعلان تسويقي، 1,200 كلمة من نص الجسم، صورتي رأس، زر CTA، تذييل بروابط اجتماعية. حوالي 18 KB من HTML و 240 KB من الصور المضمنة، كلها في ملف .html واحد بكتلة <style> واحدة في الأعلى.
عند A4 / عمودي / هامش 20mm: التحويل يأخذ 2.5 ثانية. المخرج 1.3 MB عبر 3 صفحات. صورة البطل حادة، نوع الجسم يقرأ بنظافة، زر CTA يحتفظ بشكله ولونه، شعارات التذييل تُعرض بالحجم الصحيح. الفرق الوحيد المرئي من المصدر: حالة hover على CTA غير ملتقطة (نعرض DOM في وضع الراحة، لا محاكاة hover)، و flex-wrap في التذييل وضع أيقونة واحدة على صف ثانٍ لأن html2canvas قاس فجوة flex بشكل مختلف قليلاً عن متصفح حقيقي.
عند A4 / أفقي / هامش 10mm: نفس المحتوى، صفحتان بدلاً من 3، أطوال أسطر أعرض قليلاً. 1.1 MB. Letter / عمودي / هامش 20mm: 3 صفحات، 1.3 MB، الأسطر تلتف عند نفس حدود الكلمات كـ A4 لأن العمود تقريباً بنفس العرض.
الآن اقلب المدخل: لوحة تطبيق صفحة واحدة معروضة بـ React، تُقدّم من localhost:3000. وضع URL يجلب HTML الإقلاع ويتخطى كل مكون كان React سيركّبه — تحصل على PDF فارغ مع مؤشر التحميل. الخطوة الصحيحة: افتح التطبيق في تبويب، اتركه يُعرض، انسخ outerHTML من DOM المعروض، والصق في وضع "الصق HTML". PDF الآن يطابق ما كان على الشاشة.
كيف يقارن هذا بـ Adobe Acrobat و SmallPDF و iLovePDF
خدمات HTML إلى PDF كبيرة الاسم — نسخة Adobe Acrobat على الويب، URL-to-PDF في SmallPDF، HTML-to-PDF في iLovePDF، PDFCrowd، DocRaptor — كلها تعمل على جانب الخادم، وهي المعمارية الصحيحة للدقة لكنها المعمارية الخاطئة للخصوصية والسرعة.
تلك الخدمات عادة تشغّل نسخة Chromium بدون رأس على خادمها. تعطيها URL أو HTML؛ تشغّل متصفحاً، تنتقل إلى محتواك، تشغّل JS، تنتظر تحميل الخطوط والصور، ثم تستدعي واجهة طباعة Chrome. المخرج بدقة بكسل لأنه خرج من متصفح حقيقي. السلبيات: HTML الخاص بك وأي بيانات بداخله تنتقل إلى بنيتهم التحتية وتجلس في سجلاتهم؛ تنتظر في طابور مع مهام عرض الجميع؛ هناك عادة حصة مجانية يومية وفئة مدفوعة تبدأ من 9-15 دولاراً شهرياً؛ ومعظمها يتطلب حساباً قبل الملف الثاني.
نفعل أقل، في متصفحك، مجاناً. المقايضة صريحة: CSS المعقد قد يُعرض بشكل غير كامل، JS لن يُنفّذ (لا نُشغّل برامج نصية في حاوية العرض خارج الشاشة)، خطوط الويب التي تحتاج جلباً مسموحاً به بـ CORS قد تعود إلى الافتراضي، والصفحات الطويلة جداً قد تنتج مخرجاً كبيراً. لقالب بريد إلكتروني، تقرير مُصدّر، معاينة CMS، أو فاتورة مُولّدة — مهام HTML إلى PDF الشائعة — أداتنا هي الاختيار الصحيح. لموقع تسويقي مصقول تريد أرشفته بايت ببايت، استخدم Print → Save as PDF في Chrome، أو إحدى الخدمات على جانب الخادم إذا كانت سكربتته تستحق التكلفة.
ما يستطيع html2canvas فعله وما لا يستطيع
html2canvas هو المحرك الذي يقوم بالعمل البصري، ومعرفة حدوده توفر صداعاً.
يعمل جيداً:
- خصائص CSS القياسية. اللون، الخلفية، الخط، التبطين، الهامش، الحدود، border-radius، box-shadow، opacity — كلها تُعرض بنفس طريقة متصفح حقيقي.
- الأنماط المضمنة وعلامات <style> في نفس الوثيقة. إذا كان CSS داخل HTML الذي تلصقه، يعمل. ضمّن CSS في كتلة <style> واحدة في الأعلى دائماً للحصول على أفضل النتائج.
- flexbox أساسي. تخطيطات الصفوف والأعمدة، المحاذاة البسيطة، gap، justify-content و align-items الأساسي — جيد للغالبية العظمى من التخطيطات.
- الصور المضمنة وصور الكتلة. JPEGs و PNGs المضمنة في HTML أو المُشار إليها بـ URL مطلق من خوادم تسمح بـ CORS تُعرض بشكل صحيح.
يعمل بشكل غير كامل:
- CSS Grid. الشبكات البسيطة بمسارات صريحة عادة تُعرض. التموضع التلقائي، subgrid، المناطق المُسماة، و grid-template-areas غالباً لا.
- الخصائص المخصصة (متغيرات CSS). تُحترم عندما تُقرأ الخاصية مباشرة، لكن بعض سلاسل القيم المحسوبة تنكسر.
- حالات flexbox الحدية. flex-wrap بأطفال بارتفاعات مختلطة، محاذاة baseline، فجوات نسبية، عناصر بـ flex-basis: 0% — تتخطّط أحياناً بأبعاد خاطئة قليلاً.
- خطوط الويب المُحمّلة من نطاقات خارجية. إذا سمحت رؤوس CORS للخط بقراءات عبر الأصول، يُعرض؛ وإلا نعود إلى نظام serif.
لا يعمل:
- JavaScript. لا نُنفّذ برامج نصية في حاوية العرض. إذا كان HTML الخاص بك يعتمد على JS لحقن المحتوى (الرسوم البيانية، SPAs، أي شيء ديناميكي)، التقط DOM المعروض في DevTools أولاً والصق ذلك.
- iframes. محتويات iframe تعيش في سياق وثيقة مختلف لا يمكن لـ html2canvas قراءته.
- حالات :hover, :focus, :active. DOM يُلتقط في الراحة. تأثيرات hover ليست محاكاة.
- الرسوم المتحركة. إطار واحد يُلتقط. انتقالات CSS ورسوم keyframe لا تظهر.
متى Print → Save as PDF في المتصفح هو الإجابة الصحيحة
Chrome و Firefox و Safari و Edge جميعها لديها خيار Save as PDF مدمج في حوار الطباعة. يستخدم محرك العرض الحقيقي للمتصفح (Blink، Gecko، WebKit)، مما يعني دقة مثالية على grid، flexbox، خطوط الويب، والمحتوى المُعرض بـ JS. يعالج أيضاً cookies المصادقة الخاصة بك — الصفحات خلف تسجيل الدخول تُعرض بشكل صحيح لأن حوار الطباعة في نفس سياق المتصفح كالصفحة.
المشكلة: يتطلب فعلاً فتح الصفحة في تبويب والمرور بحوار الطباعة. هذا جيد لـ PDF أو اثنين. إنه مرهق لمهام الدفعة أو لـ HTML الذي حصلت عليه عبر API أو تصدير CMS. أداتنا لتلك — HTML خام في يدك، تريد PDF، لا تريد تشغيل تبويب. Print → Save as PDF في المتصفح هو الأداة الصحيحة لكل شيء آخر.
شجرة القرار: بدقة بكسل، الصفحة مفتوحة في تبويب لديك → Print → Save as PDF. HTML خام في اليد، مخرج "جيد بما يكفي"، لا رفع → هذه الأداة. بدقة بكسل وتحتاج إلى سكربتته عبر مئات URLs → Chromium بدون رأس عبر Puppeteer أو إحدى الخدمات المدفوعة.
أدوات PDF ذات الصلة
محول HTML إلى PDF يتزاوج مع عدد قليل آخرين في الطريق إلى وثيقة منتهية:
- صور إلى PDF — اجمع مجلد صور في PDF واحد. غالباً الأداة الصحيحة إذا كان "HTML" الخاص بك في الواقع كومة من لقطات الشاشة.
- PDF Merger — اجمع مخرج HTML-to-PDF مع PDFs أخرى (رسالة غلاف، ملحق، صفحة موقّعة) في ملف واحد.
- ضغط PDF — إذا كان المخرج كبيراً بشكل غير متوقع (الصفحات الطويلة وكثير من الصور يمكن أن تدفع 5-10 MB)، مرّره عبر الضاغط.
- PDF إلى PNG — اعرض كل صفحة PDF كصورة بمجرد أن يكون لديك PDF في اليد.
- Word إلى PDF — إذا كان ما لديك في الواقع هو .docx وتعثرت بأداة HTML، هذا هو الجار الصحيح.
Microapp يشحن كل أداة PDF على جانب المتصفح. 10% من كل دولار من الإيرادات يذهب للجمعيات الخيرية، من القمة، مُدقق فصلياً — الأدوات يجب أن تكسب تلك الـ 10%، مما يعني يجب أن تعمل فعلاً دون دفنك في عروض ترقية.
الأسئلة الشائعة
لماذا يفشل URL الخاص بي؟
Cross-Origin Resource Sharing (CORS). عندما يجلب متصفحك URL من JavaScript على نطاق مختلف، يجب على الخادم المستهدف السماح صراحة عبر رؤوس الاستجابة. تقريباً لا موقع عام يفعل ذلك. هذه ميزة أمان للمتصفح، وليست شيئاً يمكننا الالتفاف عليه في الصفحة. المسار الموثوق: افتح URL في تبويب متصفح عادي، اعرض المصدر (أو انقر بزر الفأرة الأيمن → View Page Source)، انسخ HTML، والصقه في وضع "الصق HTML" هنا. هذا يتجاوز CORS تماماً لأن HTML الآن محلي. الصفحات التي تتطلب تسجيل دخول لن تعمل في كلتا الحالتين — تحتاج cookies جلستك، التي لا يمكن لجلبنا استعارتها.
هل يحفظ CSS؟
معظمه، نعم — لكن ليس كله. html2canvas يقرأ الأنماط المحسوبة من DOM المعروض ويرسمها على canvas. اللون القياسي، الخط، التبطين، الحد، الخلفية، والوضع الأساسي تعمل كلها. الأنماط المضمنة، علامات <style> داخل HTML، والأنماط المُطبّقة عبر أسماء فئات تصل إلى ورقة الأنماط الخاصة بك كلها تشارك. المشكلة: إذا كان HTML الخاص بك يشير إلى أوراق أنماط خارجية على نطاقات أخرى، قد تُحظر بواسطة CORS تماماً مثل جلب URL أعلاه — في تلك الحالة المخرج المعروض يستخدم الأنماط الافتراضية لتلك القواعد. للحصول على أفضل النتائج، ضمّن CSS في كتلة <style> في أعلى HTML الذي تلصقه.
ماذا عن flexbox و grid؟
Flexbox: يعمل معظمه للحالات الشائعة (تخطيطات صفوف/أعمدة، محاذاة أساسية). الحالات الحدية — flex-wrap بأطفال محتوى مختلط، محاذاة baseline، فجوات نسبية — أحياناً تُعرض بأبعاد خاطئة. Grid: دعم جزئي. الشبكات البسيطة بمسارات صفوف/أعمدة صريحة عادة تعمل؛ التموضع التلقائي، subgrid، والمناطق المُسماة غالباً لا. خصائص CSS المخصصة (--my-var) تُحترم عند القراءة المباشرة لكنها تكسر بعض حسابات التخطيط. إذا كانت وثيقتك تعتمد بشكل كبير على التخطيط الحديث، استخدم Print → Save as PDF في المتصفح (Chrome و Firefox و Safari يدعمها) بدلاً من ذلك — يستخدم محرك العرض الحقيقي للمتصفح، وليس إعادة تنفيذ JS.
ماذا عن JavaScript؟
لا يُنفّذ. لا نُجرد شيئاً، لكن html2canvas يلتقط DOM كما هو عند تسليمه — ولا نُشغّل برامج نصية في حاوية العرض خارج الشاشة. إذا كان HTML الخاص بك يعتمد على JS لحقن المحتوى، شغّل ذلك JS في تبويب متصفح عادي أولاً، اعرض المصدر على DOM المعروض (DevTools → Elements → Copy outerHTML على <html>)، والصق النسخة بعد JS هنا. الرسوم البيانية، تطبيقات صفحة واحدة، أي شيء يبني نفسه بـ JS — التقط DOM المعروض، ثم حوّل.
كيف يقارن هذا بـ Print → Save as PDF في المتصفح؟
Print → Save as PDF يستخدم محرك تخطيط حقيقي لمتصفحك (Blink في Chrome، WebKit في Safari، Gecko في Firefox)، فيُتقن كل شيء — flexbox، grid، خطوط الويب، محتوى مُعرض بـ JS، طباعة مثالية. المشكلة: يتطلب فتح الصفحة في تبويب أولاً والمرور بحوار الطباعة. أداتنا للحالة حيث لديك HTML خام (قالب بريد إلكتروني تختبره، تقرير مُصدّر، مقتطف من CMS) وتريد PDF دون فتحه في متصفح أولاً. استخدم Print للدقة، استخدم هذا للسرعة وإدخال HTML الخام الصديق للأتمتة.
هل HTML الخاص بي فعلاً لا يُرفع؟
صحيح لـ "الصق HTML" و "حمّل .html" — كلاهما يعمل بالكامل داخل متصفحك، لا طلبات صادرة. لـ "من URL" هناك طلب صادر واحد بالضبط: متصفحك يجلب URL الذي أدخلته، وهذا كل شيء؛ HTML المجلوب يبقى في الذاكرة ولا يصل أبداً إلى خوادمنا. تحقق من تبويب الشبكة في متصفحك. PDF يُبنى محلياً ويُحمّل عبر blob URL.
لماذا المخرج أكبر مما توقعت؟
لأن الصفحة تُحوّل إلى نقاط في canvas، ثم تُعاد ترميزها كـ JPG عند هبوطها في PDF. صفحة طويلة بكثير من الصور يمكن أن تنتج بسهولة PDF متعدد الميغابايت من بضعة كيلوبايت من HTML المصدر. إذا كان الحجم يهم، مرّر النتيجة عبر PDF Compressor لدينا — للمخرج كثيف الصور غالباً يُسقط 50-70%.
هل أستطيع تحويل صفحة محمية بكلمة مرور أو خلف تسجيل دخول؟
ليس من وضع URL — جلبنا ليس لديه وصول إلى cookies متصفحك أو رؤوس المصادقة. الحل البديل: افتح الصفحة في تبويب متصفحك العادي (حيث أنت مسجّل دخول)، افتح DevTools → Elements، انقر بزر الفأرة الأيمن على علامة <html> → Copy → Copy outerHTML، ثم الصق ذلك في "الصق HTML". ذلك يلتقط الصفحة المُعرضة بالكامل والمُصادق عليها بما في ذلك أي DOM بناه JS بعد تسجيل الدخول.