كيف تحوّل HTML إلى PDF مجاناً: 3 طرق تعمل فعلاً

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

أبسط طريقة مجانية لتحويل HTML إلى PDF هي متصفحك: افتح الملف، اضغط Ctrl+P (أو Cmd+P على Mac)، اختر «حفظ بتنسيق PDF» وفعّل رسومات الخلفية. وللحصول على نسخة بصرية بنقرة واحدة، تلتقط html2canvas مع jsPDF الصفحة في ملف PDF. ويمكن للمطورين أتمتة العملية عبر Chrome بدون واجهة أو page.pdf() في Puppeteer.

أي طريقة مجانية تختار؟

الطرق الثلاث مجانية، ولا تحتاج أي منها إلى خدمة إلكترونية ترفع ملفك إلى خادم. لكنها تختلف في نقطة أساسية: هل يحتوي ملف PDF على نص حقيقي (قابل للتحديد والبحث وصغير الحجم) أم على صورة للصفحة (مطابقة للشاشة لكن لا يمكن تحديد النص)؟

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

الطريقة 1: طباعة ← حفظ بتنسيق PDF في المتصفح

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

1. افتح ملف .html في Chrome أو Edge أو Firefox أو Safari (بالنقر المزدوج أو بسحبه إلى نافذة المتصفح).
2. انتظر حتى يكتمل تحميل الخطوط والصور والرسوم البيانية.
3. اضغط Ctrl+P على Windows أو Linux، أو Cmd+P على Mac.
4. في Chrome وEdge: اجعل الوجهة «حفظ بتنسيق PDF». في Firefox: اختر «Save to PDF». في Safari: استخدم File ← Export as PDF، أو قائمة PDF في نافذة الطباعة.
5. افتح «مزيد من الإعدادات» (Chrome/Edge) وفعّل «رسومات الخلفية»؛ في Firefox اسم الخيار «Print backgrounds»؛ وفي Safari انقر «Show Details» ثم فعّل «Print backgrounds».
6. اختر حجم الورق (A4 أو Letter) والاتجاه والهوامش، وألغِ «الرؤوس والتذييلات» إن لم ترد ظهور التاريخ ومسار الملف في كل صفحة، ثم احفظ.

الإعدادات الأكثر تأثيراً في النتيجة

• رسومات الخلفية: معطّلة افتراضياً، ولهذا تخرج التصاميم الداكنة أو الملوّنة بيضاء.
• الهوامش: «بلا» أو «الحد الأدنى» للتصاميم الممتدة حتى الحواف، و«افتراضي» للمستندات.
• المقياس: 80 إلى 90% يمنع غالباً قصّ التخطيط العريض من الجهة اليمنى.
• الاتجاه: أفقي للوحات المعلومات والجداول العريضة.

على الهاتف

تعمل الطريقة نفسها على الهاتف. في Chrome على Android افتح القائمة، واختر مشاركة ← طباعة، ثم اختر «حفظ بتنسيق PDF» كطابعة. وفي Safari على iPhone اضغط مشاركة ← طباعة، ثم استخدم زر المشاركة في خيارات الطباعة لحفظ ملف PDF في تطبيق الملفات. خيارات الخلفيات والهوامش أكثر محدودية مما هي على الحاسوب.

الطريقة 2: التقاط الصفحة باستخدام html2canvas وjsPDF

تعيد html2canvas رسم الصفحة داخل عنصر canvas، ثم تضع jsPDF هذه الصورة في صفحات PDF. النتيجة قريبة جداً مما تراه على الشاشة، بما في ذلك الخلفيات وخطوط الويب، لأن CSS الطباعة يُتجاهل. لكن الثمن أن ملف PDF مجموعة صور: لا يمكن تحديد النص أو البحث فيه، والملفات أكبر حجماً.

أضف المكتبتين إلى صفحتك واستدعِ الدالة من زر. هذا المقطع يقسّم لقطة طويلة إلى صفحات A4:

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script>
async function savePdf() {
  const el = document.querySelector('#report');
  const canvas = await html2canvas(el, { scale: 2, useCORS: true });
  const img = canvas.toDataURL('image/jpeg', 0.92);

  const pdf = new window.jspdf.jsPDF({ unit: 'mm', format: 'a4' });
  const pageW = pdf.internal.pageSize.getWidth();
  const pageH = pdf.internal.pageSize.getHeight();
  const imgH = canvas.height * pageW / canvas.width;

  // one tall image, shifted up by one page height on each new page
  for (let y = 0; y < imgH; y += pageH) {
    if (y > 0) pdf.addPage();
    pdf.addImage(img, 'JPEG', 0, -y, pageW, imgH);
  }
  pdf.save('report.pdf');
}
</script>

• الخيار useCORS: true يسمح بظهور الصور القادمة من نطاقات أخرى، بشرط أن ترسل خوادمها ترويسات CORS؛ وإلا تبقى فارغة.
• الخيار scale: 2 يعطي نصاً أوضح مقابل ملف أثقل.
• تعيد html2canvas تنفيذ CSS بنفسها، لذا قد تُعرض بعض الميزات الحديثة بشكل خاطئ أو تفشل، مثل ألوان oklch() التي يستخدمها Tailwind CSS v4 وبعض المرشحات (filters).
• التقسيم حسب ارتفاع الصفحة قد يقطع سطراً من النص إلى نصفين؛ والتقسيم الذكي يتطلب كوداً إضافياً.

الطريقة 3: Chrome بدون واجهة وPuppeteer للمطورين

إذا كنت تحوّل ملفات كثيرة أو تحتاج إلى PDF على خادم، شغّل Chrome دون نافذة (headless). فهو يستخدم نفس محرك نافذة الطباعة في Chrome: نص حقيقي ودعم لـ CSS الطباعة، ومن دون أي نقر.

أمر واحد مع Chrome

يستطيع Chrome طباعة ملف محلي أو رابط مباشرة إلى PDF. استخدم مسارات كاملة على Windows.

# Windows (PowerShell)
& "C:\Program Files\Google\Chrome\Application\chrome.exe" --headless --no-pdf-header-footer --print-to-pdf="C:\out\page.pdf" "C:\work\page.html"

# macOS
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --headless --no-pdf-header-footer --print-to-pdf=page.pdf page.html

تحكّم أكبر مع Puppeteer

تتيح لك Puppeteer (على Node.js) انتظار توقف طلبات الشبكة، والإبقاء على الخلفيات، وتحديد حجم الصفحة والهوامش داخل الكود.

// npm install puppeteer   (downloads its own Chrome)
import puppeteer from 'puppeteer';
import { pathToFileURL } from 'node:url';

const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(pathToFileURL('page.html').href, { waitUntil: 'networkidle0' });
await page.pdf({
  path: 'page.pdf',
  format: 'A4',
  printBackground: true,
  margin: { top: '12mm', right: '12mm', bottom: '12mm', left: '12mm' }
});
await browser.close();

• الخيار printBackground: true هو المقابل البرمجي لخانة «رسومات الخلفية».
• أضف preferCSSPageSize: true إذا كانت ورقة الأنماط تحدد ‎@page size.
• توفر Playwright دالة page.pdf() مماثلة لمتصفح Chromium.

الطريقتان 1 و2 دون أي إعداد

معظم الناس لا يريدون تعديل الصفحة أو تثبيت Node.js. تجمع أداة HTML إلى PDF المجانية طريقتي المتصفح في شاشة واحدة. يُفتح ملفك داخل إطار معزول (sandbox) في متصفحك أنت ولا يُرفع أبداً؛ بلا تسجيل وبلا علامة مائية.

1. أسقط ملف .html واحداً أو أكثر، أو الصق الكود، أو أسقط ملف .zip يحتوي على HTML مع صوره وملفات CSS والخطوط.
2. اختر A4 أو US Letter أو شرائح 16:9، ثم الاتجاه والهوامش.
3. إذا كانت الصفحة تستخدم Tailwind عبر CDN أو رسوماً بيانية متحركة، فزد قيمة «الانتظار N ثانية».
4. أبقِ الإصلاحات مفعّلة: تجميد الحركات عند حالتها النهائية، إظهار المحتوى الذي يظهر عند التمرير، عرض الترويسات الثابتة مرة واحدة، ضبط الأقسام بملء الشاشة على ارتفاع الصفحة، والإبقاء على الخلفيات الداكنة.
5. انقر «طباعة / حفظ PDF» لنص قابل للتحديد (الطريقة 1)، أو «تنزيل PDF» لنسخة مطابقة بنقرة واحدة (الطريقة 2، النص غير قابل للتحديد).

أسطر قليلة من CSS الطباعة لملف PDF أنظف

تتبع الطريقتان 1 و3 ورقة أنماط الطباعة الخاصة بالصفحة. كتلة ‎@media print قصيرة تعالج معظم مشاكل التخطيط من المصدر: حجم الصفحة، والهوامش، وألوان الخلفية، والفواصل غير المرغوبة.

@page {
  size: A4;          /* or: letter, or A4 landscape */
  margin: 12mm;
}

@media print {
  /* keep background colours and images */
  body {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* hide what makes no sense on paper */
  nav, .no-print, button {
    display: none !important;
  }
  /* avoid cutting blocks in half */
  figure, img, table, tr, .card {
    break-inside: avoid;
  }
  h1, h2, h3 {
    break-after: avoid;
  }
}

• الخاصية print-color-adjust: exact تطلب من المتصفح الإبقاء على الخلفيات حتى لو نسي المستخدم تفعيل الخانة (الإصدارات الأقدم من Chrome تحتاج أيضاً إلى البادئة ‎-webkit-).
• الخاصية break-inside: avoid تُبقي الصور والبطاقات وصفوف الجداول في صفحة واحدة قدر الإمكان.
• يحترم Chrome وEdge وFirefox قاعدة ‎@page size؛ أما دعم Safari فمحدود أكثر، لذا اضبط حجم الورق أيضاً في نافذة الطباعة.

للمزيد

إذا كانت صفحتك من إنتاج ذكاء اصطناعي، فاقرأ تحويل HTML من ChatGPT إلى PDF. وللعروض التقديمية، راجع تحويل شرائح HTML إلى PPTX.

مشاكل شائعة وحلول سريعة

• صفحة بيضاء بدل تصميم داكن: فعّل رسومات الخلفية أو أضف print-color-adjust: exact.
• خط خاطئ: لم يكن خط الويب قد حُمّل بعد؛ انتظر قليلاً قبل الطباعة، أو ضع ملفات الخط داخل ملف .zip.
• رسم بياني فارغ: كان لا يزال في حالة حركة؛ عطّل الحركة أو انتظر وقتاً أطول.
• ترويسة مكررة في كل صفحة: العناصر ذات position: fixed تُطبع في كل صفحة في Chrome؛ أخفها عبر ‎@media print أو استخدم إصلاح الترويسة الثابتة في المحوّل.
• فراغات كبيرة: الأقسام ذات height: 100vh تأخذ صفحة كاملة؛ اجعلها height: auto عند الطباعة.

كل حالة من هذه مشروحة بالتفصيل مع إصلاح CSS في مشاكل تحويل HTML إلى PDF وحلولها.

الخصوصية: إلى أين يذهب ملف HTML؟

كثير من «المحوّلات الإلكترونية» ترفع ملفك إلى خادم لمعالجته. وهذا مشكلة مع تقارير العملاء أو الفواتير أو الصفحات التي تحتوي على مفاتيح API. الطرق الثلاث أعلاه تُبقي الملف على حاسوبك، وكذلك محوّلنا الذي يعمل داخل المتصفح.

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