كيف تحوّل HTML من ChatGPT canvas إلى ملف PDF نظيف

آخر تحديث: 2026-10-14 · فريق دورني

انسخ HTML من canvas في ChatGPT إلى ملف باسم page.html وافتحه في متصفحك. ثم صدّره بمحوّل ينتظر Tailwind عبر CDN والرسوم البيانية، ويجمّد الحركات، ويحافظ على الخلفيات الداكنة، ويضبط أقسام ملء الشاشة، أو اطبعه بـ Ctrl+P بعد إضافة كتلة ‎@media print قصيرة. اختر «طباعة» إذا أردت نصاً قابلاً للتحديد.

الخطوة 1: استخراج HTML من ChatGPT canvas

يستطيع canvas في ChatGPT كتابة صفحة ويب كاملة: تقرير أو لوحة معلومات أو سيرة ذاتية أو صفحة هبوط. وما تحتاجه للحصول على PDF هو هذا الكود كملف ‎.html حقيقي على حاسوبك. والأمر نفسه ينطبق على الصفحات المنشأة في Canvas من Gemini أو كـ HTML artifact في Claude.

1. في canvas، استخدم خيار نسخ الكود، أو خيار التنزيل إن كان متاحاً.
2. إذا نسخت الكود، فالصقه في محرر نصوص بسيط (Notepad على Windows؛ TextEdit على Mac بعد Format ← Make Plain Text) واحفظه باسم page.html بترميز UTF-8.
3. انقر نقراً مزدوجاً على page.html. يجب أن يُفتح في متصفحك ويبدو مثل معاينة canvas.
4. إذا كان الكود مكوّن React وليس صفحة، فاطلب: «أعطني هذا كملف HTML واحد مستقل يمكنني فتحه في المتصفح».

لماذا يختلف ملف PDF عن المعاينة

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

لم ينتهِ Tailwind عبر CDN من تنسيق الصفحة

تستخدم صفحات كثيرة سكربت Tailwind Play CDN الذي يولّد CSS داخل المتصفح بعد تحميل الصفحة. إذا التقطت الصفحة مبكراً تحصل على نص بلا تنسيق. والحل ببساطة هو الانتظار بضع ثوانٍ قبل الالتقاط أو الطباعة.

تُلتقط الرسوم البيانية أثناء حركتها

تحرّك Chart.js والمكتبات المشابهة الأعمدة والخطوط انطلاقاً من الصفر. اللقطة المأخوذة خلال نصف الثانية تلك تُظهر رسوماً فارغة أو نصف مرسومة. انتظر أكثر، أو عطّل الحركات (الكود أدناه).

الوضع الداكن يتحول إلى أبيض

تحذف المتصفحات ألوان الخلفية عند الطباعة ما لم تُفعَّل «رسومات الخلفية»، فتتحول لوحة المعلومات الداكنة إلى نص رمادي فاتح على خلفية بيضاء. الخاصية print-color-adjust: exact أو خيار الخلفية يحافظان عليها.

قسم الواجهة بارتفاع 100vh يأخذ صفحة كاملة

الأقسام المحددة بـ 100vh (أو h-screen في Tailwind) تعتمد على ارتفاع النافذة. على الورق قد تملأ صفحة شبه فارغة أو تُقطع. اضبطها على ارتفاع الصفحة أو اجعل ارتفاعها تلقائياً عند الطباعة.

الترويسات الثابتة تتكرر والمحتوى الظاهر عند التمرير يبقى مخفياً

قد يُطبع شريط التنقل ذو position: fixed في كل صفحة في Chrome فوق النص. والمحتوى الذي يظهر تدريجياً عند التمرير يبقى مخفياً لأن أحداً لم يمرّر الصفحة. اعرض الترويسات مرة واحدة وأجبر المحتوى المخفي على الظهور.

تحقق من الصور والخطوط والبيانات التي تحتاجها الصفحة

كثيراً ما تعتمد الصفحة المولّدة بالذكاء الاصطناعي على ملفات ليست بداخلها. قبل التصدير، افتحها في متصفحك وابحث عن أيقونات صور مكسورة أو خطوط بديلة أو لوحات فارغة. لكل منها سبب مختلف.

• صور مشار إليها باسم ملف غير موجود على حاسوبك (مثل logo.png): اخترع الذكاء الاصطناعي مساراً. استبدله بصورة حقيقية، أو ضع صورك بجانب page.html داخل ملف ‎.zip مع الإبقاء على المسارات النسبية.
• صور مرتبطة من مواقع أخرى: تظهر عند فتح الصفحة وعند الطباعة، لكن الخوادم التي لا ترسل ترويسات CORS تمنعها في التصديرات المعتمدة على اللقطات مثل «تنزيل PDF» وPPTX وPNG.
• Google Fonts والمكتبات عبر CDN: يحمّلها متصفحك عند فتح الصفحة، لذا تحتاج إلى اتصال بالإنترنت أثناء التحويل.
• بيانات تُحمَّل عبر fetch() من API: إذا رفض الـ API الطلبات القادمة من ملف محلي، تبقى اللوحة فارغة. اطلب من الذكاء الاصطناعي وضع بيانات تجريبية داخل الصفحة مباشرة.

الإعدادات المقترحة حسب نوع الصفحة

تناسب نقاط الانطلاق هذه معظم الصفحات المولّدة بالذكاء الاصطناعي. إذا بقي شيء مفقوداً، فزد وقت الانتظار أولاً.

الخطوة 2: التحويل داخل متصفحك

يعمل محوّل HTML المولّد بالذكاء الاصطناعي المجاني بالكامل داخل متصفحك: يُفتح الملف في إطار معزول (sandbox) ولا يُرفع أبداً، بلا تسجيل وبلا علامة مائية. ويصدّر إلى PDF وPowerPoint وPNG/JPG وWord وMarkdown من الشاشة نفسها.

1. أسقط page.html، أو الصق الكود، أو أسقط ملف ‎.zip إذا كانت الصفحة تستخدم صوراً أو خطوطاً محلية.
2. اختر مقاس الصفحة واتجاهها وفق الجدول أعلاه.
3. اضبط «الانتظار N ثانية» على 3 أو أكثر للصفحات التي تستخدم Tailwind عبر CDN أو Chart.js.
4. أبقِ الإصلاحات مفعّلة: تجميد الحركات عند حالتها النهائية، إظهار المحتوى الظاهر عند التمرير، عرض الترويسات الثابتة مرة واحدة، ضبط أقسام 100vh على ارتفاع الصفحة، والإبقاء على الخلفيات الداكنة.
5. انقر «طباعة / حفظ PDF» للحصول على نص حقيقي، أو «تنزيل PDF» لنسخة مطابقة يكون فيها النص صورة.

الخطوة 3 (اختيارية): اطلب من الذكاء الاصطناعي إضافة CSS للطباعة

إذا كنت ستطبع الصفحة أكثر من مرة، فأصلحها من المصدر. الصق هذا الطلب في محادثة ChatGPT نفسها (بالإنجليزية أو مترجماً؛ ويعمل بالطريقة نفسها مع مساعدين آخرين):

Add print styles to this page so it exports cleanly to PDF.
Do not change how it looks on screen.
- an @page rule: A4 portrait, 12 mm margins
- inside @media print:
  - keep background colours (print-color-adjust: exact)
  - hide the navigation bar, buttons and form controls
  - make fixed or sticky elements position: static
  - replace full-screen heights (h-screen, min-h-screen, 100vh) with auto
  - avoid page breaks inside cards, tables, charts and images
  - disable animations and transitions; show scroll-reveal content
- create every chart with animation: false

@page { size: A4; margin: 12mm; }

@media print {
  html, body {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  nav, button, form { display: none !important; }

  /* fixed / sticky headers: print once, at the top */
  .fixed, .sticky, header { position: static !important; }

  /* full-screen hero sections (Tailwind h-screen, 100vh) */
  .h-screen, .min-h-screen { height: auto !important; min-height: 0 !important; }

  /* keep blocks whole */
  section > *, .card, table, tr, canvas, svg, img { break-inside: avoid; }

  /* no half-finished animations, show scroll-reveal content (AOS) */
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-aos] { opacity: 1 !important; transform: none !important; }
}

• كود CSS أعلاه هو نوع الكتلة التي يُفترض أن تحصل عليها؛ ويمكنك أيضاً لصقه بنفسك قبل وسم ‎</style>.
• مستخدمو Tailwind يمكنهم فعل الشيء نفسه بمتغيّر print:، مثلاً class="print:hidden" على شريط التنقل.
• قاعدة ‎[data-aos] لا تهم إلا إذا كانت الصفحة تستخدم مكتبة AOS لحركات التمرير؛ المكتبات الأخرى تستخدم سمات مختلفة.
• المحددات مثل header أو ‎section > *‎ واسعة عن قصد؛ عدّلها إذا أخفت أو جمّعت أكثر مما تريد.

تعطيل حركات الرسوم البيانية

الرسوم البيانية المتحركة هي السبب الأكثر شيوعاً للمساحات الفارغة في ملف PDF المصدَّر. مع Chart.js، يكفي سطر واحد لتعطيل الحركة في كل رسوم الصفحة:

// once, before creating the charts (Chart.js 3 and 4)
Chart.defaults.animation = false;

// or for a single chart
new Chart(document.getElementById('sales'), {
  type: 'bar',
  data: { labels: ['Q1', 'Q2', 'Q3'], datasets: [{ label: 'Sales', data: [12, 19, 15] }] },
  options: { animation: false }
});

طباعة أم تنزيل PDF: أي زر تختار؟

• «طباعة / حفظ PDF» يستخدم محرك الطباعة في المتصفح: نص قابل للتحديد والبحث، وملفات صغيرة، ويُطبَّق CSS الطباعة الخاص بك. الأنسب للمستندات التي ستُقرأ أو يُبحث فيها أو يُنسخ منها.
• «تنزيل PDF» ينشئ صفحات من لقطات شاشة: نقرة واحدة ومظهر مطابق للشاشة، لكن النص غير قابل للتحديد والملف أكبر. الأنسب للوحات المعلومات والصفحات البصرية.
• الصور القادمة من مواقع تمنع الوصول عبر النطاقات قد تغيب في «تنزيل PDF» لكنها تظهر عند الطباعة.
• البيانات المحمّلة من API يرفض الطلب، أو المحتوى الذي يتطلب تسجيل الدخول، لن يظهر في أي منهما.

إذا بدت النتيجة خاطئة رغم ذلك، فالدليل الكامل هو مشاكل تحويل HTML إلى PDF وحلولها. ولعرض شرائح بدل صفحة، راجع تحويل Claude artifact إلى PowerPoint، وللطرق العامة تحويل HTML إلى PDF مجاناً.