كيف تحوّل صفحة ويب إلى PDF؟ تحويل الرابط وكود HTML

تريد أرشفة صفحة ويب، أو حفظ مقال لقراءته دون اتصال، أو الاحتفاظ بطلب شراء كمستند، أو إنتاج تقرير من ملف HTML خاص بك. التحويل من HTML إلى PDF هو الجواب على هذه الاحتياجات، لكن لصفحات الويب بحكم طبيعتها بضع مفاجآت.

استخدامان مختلفان

تحويل الرابط: تعطي عنوان ويب فتحمّل الأداة تلك الصفحة وتنتج ملف PDF. ويُستخدم هذا للأرشفة والحفظ.

تحويل كود HTML: تعطي ملف HTML أعددته بنفسك. ويُستخدم هذا لإنتاج مستندات مثل الفواتير والتقارير والشهادات برمجيًا.

وكلاهما يستخدم المحرك نفسه لكنك تواجه مشاكل مختلفة.

الخطوة 1: تحقق من أن الصفحة قابلة للتحويل

إن كنت تحوّل رابطًا فبعض الصفحات تسبب مشاكل:

الصفحات التي تتطلب تسجيل الدخول. تصل الأداة إلى ذلك العنوان بنفسها ولا تحمل معلومات جلستك. والنتيجة ملف PDF لشاشة تسجيل الدخول أو لصفحة خطأ. ولمثل هذه الصفحات عليك استخدام "طباعة بصيغة PDF" في متصفحك وأنت مسجّل الدخول.

المحتوى خلف جدار الدفع. المشكلة نفسها.

المحتوى المُحمَّل بواسطة JavaScript. بعض المواقع تحمّل المحتوى بطلبات منفصلة بعد فتح الصفحة. فإن أخذت الأداة ملف PDF قبل تحميل المحتوى فستحصل على صفحة فارغة أو ناقصة. والأدوات الجيدة تنتظر تحميل الصفحة، لكن في الصفحات التي تستخدم التمرير اللانهائي (infinite scroll) لا يمكن الحصول على المحتوى كاملًا أبدًا.

المواقع التي تحجب الروبوتات. بعض المواقع تمنع الوصول الآلي.

تنبيهات ملفات تعريف الارتباط والنوافذ المنبثقة. تدخل هذه في ملف PDF وقد تحجب جزءًا من المحتوى.

الخطوة 2: افهم أنماط الطباعة

هذا هو الموضوع الأكثر إثارة للدهشة.

معظم المواقع تعرّف مجموعتي أنماط مختلفتين في CSS:

/* for screen */
nav { display: block; }

/* for print */
@media print {
  nav, .sidebar, .ads { display: none; }
  body { font-size: 12pt; color: #000; }
}

وإنتاج PDF يستخدم أنماط الطباعة. وهذا أمر جيد عادةً:

• تُخفى القوائم والأشرطة الجانبية والإعلانات.
• تُبسَّط الألوان ويصبح النص أوضح للقراءة.
• يُطبَّق تخطيط ملائم لعرض الصفحة.

لكنه يؤدي أحيانًا إلى نتائج غير مرغوبة:

• قد يُخفى صندوق معلومات مهم.
• قد تضيع الهوية البصرية للموقع.
• وبعض المواقع لم تعرّف نمط طباعة أصلًا فيخرج التخطيط مشوّهًا.

كما يدخل التصميم المتجاوب في المعادلة: فإن كانت الصفحة ذات بنية تغيّر تخطيطها بحسب عرض الشاشة، فقد يُفعِّل عرضُ صفحة PDF (نحو 794 بكسل لمقاس A4) تخطيطَ الجوال. والنتيجة ترتيب مختلف عمّا تراه على سطح المكتب.

الخطوة 3: حدد إعدادات الصفحة

ما ينبغي ضبطه قبل التحويل:

حجم الصفحة. A4 هو المعيار في أوروبا ومعظم دول العالم؛ وLetter يُستخدم في أمريكا. وإن كان المستند سيُطبع فاختر ما يناسب المنطقة الهدف.

الاتجاه. العمودي هو المعيار. وقد يعطي الاتجاه الأفقي نتيجة أفضل للصفحات التي تتضمن جداول عريضة أو رسومًا بيانية أفقية.

الهوامش. الافتراضي عادةً 1-2 سم. وخفضها إلى الصفر يمدّ المحتوى حتى الحافة، لكن الطابعات لا تستطيع الطباعة في مساحة تبلغ نحو 5 مم من الحافة — فاترك هامشًا إن كان المستند سيُطبع.

التحجيم. إن كانت الصفحة عريضة جدًا فقد يُطبَّق تصغير. لكن التصغير المفرط يجعل النص غير مقروء؛ والقيم التي تنزل تحت 70% إشكالية عادةً.

رسوميات الخلفية. معطّلة افتراضيًا — وهو سلوك مدمج بهدف توفير الحبر. وفي التصاميم ذات الخلفيات الداكنة قد يصبح النص غير مقروء إن كان هذا الإعداد معطّلًا (فالنص الأبيض فوق خلفية سوداء يصبح أبيض فوق أبيض حين لا تُطبع الخلفية). وقد يلزم تفعيله.

الترويسة والتذييل. تُضاف تلقائيًا في طباعة المتصفح عنوان الصفحة والرابط والتاريخ. وهذا مفيد للأرشفة لكنه قد يكون غير مرغوب في مستند نظيف.

الخطوة 4: حوّل الصفحة

افتح أداة التحويل من HTML إلى PDF، وأدخل الرابط أو الصق كود HTML، وحدد الإعدادات ثم حوّل.

وأثناء العملية تحمّل الأداة الصفحة وتطبّق الأنماط وتحسب التخطيط وتقسّمه إلى صفحات.

الخطوة 5: افحص الناتج

هل المحتوى كامل؟ خصوصًا: هل وصلت الأقسام المُحمَّلة بواسطة JavaScript؟

هل تقسيمات الصفحات منطقية؟ هل انقسم جدول إلى نصفين؟ وهل بقي عنوان وحيدًا في أسفل الصفحة؟ وهل اقتُطعت صورة من منتصفها؟

هل الروابط تعمل؟ المحوّلات الجيدة تحوّل الروابط التشعبية إلى روابط PDF. اختبر بعضها.

هل النص قابل للتحديد؟ هل جاء النص كنص حقيقي أم أن الصفحة حُوِّلت إلى صورة؟ فالنص القابل للتحديد أثمن بكثير من حيث إمكانية البحث فيه ونسخه.

هل الحروف العربية صحيحة؟ تحقق من ظهور الحروف وتشكيلها واتجاه النص بشكل سليم.

الألوان والخلفيات. هل خرجت كما توقعت؟

هل عدد الصفحات معقول؟ إن كان طويلًا بشكل غير متوقع فقد يوجد في الصفحة محتوى مخفي أو متكرر.

إن كنت تحوّل ملف HTML خاصًا بك

إن كنت تنتج مستندات مثل الفواتير أو التقارير أو الشهادات من HTML، فلديك تحكم كامل بالتخطيط. وقواعد CSS التي يمكنك استخدامها:

حجم الصفحة والهوامش:

@page {
  size: A4;
  margin: 2cm;
}

التحكم بتقسيم الصفحات:

/* keep this element from splitting */
table, figure { page-break-inside: avoid; }

/* start a new page before this element */
h1 { page-break-before: always; }

/* avoid a page break right after a heading */
h2 { page-break-after: avoid; }

التحكم بالأسطر اليتيمة والأرملة:

p {
  orphans: 3;  /* at least 3 lines at the bottom of the page */
  widows: 3;   /* at least 3 lines at the top of the page */
}

إظهار عناوين الروابط:

@media print {
  a[href]::after { content: " (" attr(href) ")"; }
}

وهذا يجعل وجهة الروابط مرئية في مستند مطبوع.

اختيار الخط. خطوط الويب (مثل Google Fonts) تُحمَّل من مصادر خارجية. فإن لم يكن الوصول إلى هذه المصادر متاحًا في بيئة التحويل فلن يُحمَّل الخط وسينزاح التخطيط. وفي المستندات الحساسة يكون تضمين الخط أو استخدام خطوط النظام أكثر أمانًا.

مشاكل متكررة

| المشكلة | السبب | الحل | |---|---|---| | الصفحة تخرج فارغة | محتوى JavaScript لم يُحمَّل | ضبط مدة الانتظار أو الطباعة من المتصفح | | لا توجد خلفيات | الإعداد الافتراضي | فعّل خيار رسوميات الخلفية | | القوائم والإعلانات موجودة | نمط الطباعة غير معرَّف | اطبع من المتصفح واستخدم وضع القراءة | | التخطيط بمظهر الجوال | تفعّل التصميم المتجاوب | زد عرض الصفحة أو استخدم الاتجاه الأفقي | | الجدول انقسم إلى نصفين | لا يوجد تحكم بنهاية الصفحة | أضف قاعدة CSS إن كان HTML خاصًا بك | | الخط مختلف | خط الويب لم يُحمَّل | استخدم خط نظام | | الروابط غير قابلة للنقر | حدّ في المحوّل | جرّب طريقة مختلفة | | خرجت صفحة تسجيل الدخول | الجلسة غير منقولة | اطبع من المتصفح |

بديل: الطباعة من المتصفح

في بعض الحالات تعطي خاصية "طباعة بصيغة PDF" في متصفحك نتيجة أفضل:

الصفحات التي تتطلب جلسة. فأنت مسجّل الدخول أصلًا.

الصفحات المعتمدة بكثافة على JavaScript. فالمحتوى مُحمَّل أصلًا.

المحتوى المخصّص. سلة مشترياتك، وحسابك، وإعداداتك.

وثمن ذلك أن المتصفح يطبّق إعدادات صفحته الخاصة ويضيف ترويسة/تذييلًا عادةً. ويمكنك تصحيح هذه الإعدادات من نافذة الطباعة.

كما أن خاصية "وضع القراءة" في بعض المتصفحات مفيدة: فهي تجرّد الصفحة من القوائم والإعلانات وتعرض نص المقال وحده. وأخذ ملف PDF في هذا الوضع يعطي نتيجة أنظف بكثير.

باختصار

ينتج التحويل من HTML إلى PDF مستندًا مقسّمًا إلى صفحات ثابتة باستخدام أنماط الطباعة الخاصة بصفحة الويب. ومن الطبيعي أن يخرج مختلفًا عمّا تراه على الشاشة — إذ تُخفى القوائم وتُبسَّط الألوان وقد ينتقل التصميم المتجاوب إلى تخطيط مختلف. ورسوميات الخلفية لا تُطبع افتراضيًا وقد يلزم تفعيل هذا الإعداد في التصاميم ذات الخلفيات الداكنة. وفي الصفحات التي تتطلب تسجيل الدخول والصفحات المُحمَّلة بواسطة JavaScript تكون خاصية الطباعة في المتصفح أكثر موثوقية. وإن كنت تحوّل ملف HTML خاصًا بك فيمكنك التحكم بتقسيمات الصفحات بقواعد CSS مثل @page وpage-break-inside وorphans/widows والحصول على ناتج احترافي.