تحويل HTML وCSS إلى PDF في PHP: دليل شامل مع أمثلة

مقدمة: لماذا قد تحتاج إلى تحويل HTML إلى PDF؟

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

السؤال «How Can I add HTML And CSS Into PDF» على موقع Stack Overflow حصد آلاف المشاهدات - وهذا يعني أن هذه المشكلة مهمة للعديد من المطورين. في هذه المقالة، سنستعرض ثلاث طرق شائعة للقيام بذلك باستخدام PHP، وسنقدم أمثلة على الكود، ونساعدك في اختيار أفضل أداة لمهمتك.

مقارنة المكتبات: Dompdf وTCPDF وmPDF

قبل كتابة الكود، دعنا نفهم ما هو الخيار الأنسب. في عالم PHP، هناك ثلاث مكتبات رئيسية لتحويل HTML إلى PDF:

\n
• Dompdf - مكتبة خفيفة، تفهم CSS 2.1 جيداً وجزءاً من CSS 3. مثالية للمستندات البسيطة.
\n
• TCPDF - مكتبة قوية ومستقرة، ولكنها تتطلب كوداً أكثر للتنسيقات المعقدة. ليست صديقة جداً لـ CSS.
\n
• mPDF - الخيار الأفضل إذا كنت بحاجة لدعم CSS المعقد (مثل Flexbox والتدرجات اللونية والشفافية). إنها المكتبة الأكثر "صداقة لـ CSS".
\n

في هذه المقالة، سنركز على mPDF باعتبارها الخيار الأكثر ملاءمة، ولكننا سنعرض أيضاً أمثلة باستخدام Dompdf للمقارنة.

تثبيت المكتبات عبر Composer

للبدء، سننشئ مشروعاً ونثبت التبعيات. افتح الطرفية (Terminal) ونفّذ الأمر التالي:

composer require mpdf/mpdf

إذا كنت تريد تجربة Dompdf:

composer require dompdf/dompdf

الآن، سننشئ ملفاً باسم generate_pdf.php في جذر المشروع ونبدأ في كتابة الكود.

مثال 1: تحويل HTML بسيط إلى PDF باستخدام mPDF

لنبدأ بأبسط مثال. لنفترض أن لدينا قالب فاتورة HTML:

<!DOCTYPE html>\n<html>\n<head>\n    <style>\n        body { font-family: Arial, sans-serif; }\n        .invoice { max-width: 800px; margin: 0 auto; }\n        .header { background: #4CAF50; color: white; padding: 20px; }\n        .total { font-size: 24px; font-weight: bold; }\n    </style>\n</head>\n<body>\n    <div class="invoice">\n        <div class="header">فاتورة رقم 123 بتاريخ 01/03/2025</div>\n        <p>العميل: أحمد محمد</p>\n        <table border="1" width="100%">\n            <tr><th>الخدمة</th><th>السعر</th></tr>\n            <tr><td>تطوير موقع</td><td>50,000 ريال</td></tr>\n            <tr><td>تحسين محركات البحث (SEO)</td><td>15,000 ريال</td></tr>\n        </table>\n        <div class="total">المجموع: 65,000 ريال</div>\n    </div>\n</body>\n</html>

الآن كود PHP لإنشاء PDF:

<?php\nrequire_once __DIR__ . '/vendor/autoload.php';\n\n$html = file_get_contents('invoice.html'); // أو مجرد نص HTML\n\n$mpdf = new \\Mpdf\\Mpdf();\n$mpdf->WriteHTML($html);\n$mpdf->Output('invoice.pdf', 'I'); // 'I' لعرضه في المتصفح، 'D' للتحميل\n?>

قم بتشغيل السكربت - وسيكون ملف PDF جاهزاً! لاحظ أن mPDF يلتقط تلقائياً CSS من داخل وسم <style>. هذا هو الجواب على سؤال "How Can I add HTML And CSS Into PDF" - فقط قم بتمرير HTML مع CSS إلى الدالة WriteHTML().

مثال 2: العمل مع ملفات CSS خارجية

غالباً ما يتم تخزين التنسيقات في ملفات منفصلة. يدعم mPDF ربط ملفات CSS الخارجية عبر الوسم <link>:

<?php\n$html = '\n<!DOCTYPE html>\n<html>\n<head>\n    <link rel="stylesheet" type="text/css" href="style.css">\n</head>\n<body>\n    <h1>تقرير لشهر