يقدم لك محرر Downcodes برنامجًا تعليميًا حول كيفية استخدام JavaScript وPHP لتحويل صفحات ويب HTML إلى ملفات PDF. ستتناول هذه المقالة بالتفصيل طريقتين: استخدام مكتبة JavaScript jsPDF واستخدام مكتبة PHP TCPDF أو mPDF. تسمح مكتبة jsPDF بالتحويل مباشرة من جانب العميل، بينما تتطلب مكتبة PHP المعالجة من جانب الخادم. سنركز على شرح كيفية استخدام jsPDF وتقديم أمثلة التعليمات البرمجية، ونغطي خطوات إدخال المكتبات، ومعالجة محتوى HTML، وإنشاء مثيلات PDF، وضبط التنسيقات، وحفظ الملفات، وما إلى ذلك. وسنقدم أيضًا بشكل مختصر طريقة التحويل والوظائف المتقدمة باستخدام PHP التنفيذ، مثل إضافة الصور والعلامات المائية والرؤوس والتذييلات وما إلى ذلك. بغض النظر عن الطريقة التي تختارها، ستساعدك هذه المقالة على إكمال تحويل HTML إلى PDF بكفاءة.

يعد تحويل صفحات الويب إلى PDF متطلبًا شائعًا، مما يسمح لنا بحفظ محتوى موقع الويب بتنسيق ثابت. يتضمن استخدام JavaScript أو PHP لتحويل صفحات ويب HTML إلى PDF ما يلي: استخدام مكتبات JavaScript واستخدام مكتبات PHP. ومن بين أدوات التحويل هذه، تحظى مكتبات JavaScript مثل jsPDF وhtml2pdf.js بشعبية كبيرة، بينما تحتوي PHP على مكتبات مثل TCPDF أو mPDF. سنركز على استخدام مكتبة jsPDF الخاصة بـ JavaScript لتحقيق التحويل، وذلك لأن مكتبة jsPDF توفر دعمًا جيدًا للعملاء، وسهلة التشغيل، ويمكنها إكمال التحويل دون الاتصال بالخادم.

jsPDF هي مكتبة مكتوبة بلغة JavaScript خالصة تعمل في بيئة أمامية ولا تتطلب أي دعم خلفي. لاستخدام jsPDF، عليك أولاً إدخال ملف المكتبة الخاص به في المشروع. يمكنك تثبيته من مستودع GitHub الخاص بـ jsPDF أو عبر npm. بمجرد تقديم مكتبة jsPDF، يمكنك استخدام كود JavaScript لقراءة محتوى HTML واستخدام واجهة برمجة التطبيقات التي يوفرها jsPDF لإنشاء ملفات PDF.

1. مقدمة عن مكتبة JSPDF

لبدء عملية التحويل، تحتاج أولاً إلى استيراد ملف jsPDF إلى صفحة الويب الخاصة بك. يمكنك تنزيل مكتبة jsPDF مباشرة وتمريرها

أو التثبيت باستخدام npm:

تثبيت npm jspdf

ثم قم باستيراده في ملف JavaScript الخاص بك:

استيراد {jsPDF} من jspdf؛

2. تحديد وتعديل محتوى HTML

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

// احصل على عناصر HTML التي تحتاج إلى تحويل

عنصر ثابت = document.getElementById('content-to-pdf');

// تعديل محتوى HTML، مثل إخفاء العناصر غير الضرورية

element.querySelectorAll('.no-print').forEach(element => element.style.display = 'none');

3. قم بإنشاء مثيل JSPDF وقم بتحويل HTML

قم بإنشاء مثيل jsPDF جديد واستخدم واجهة برمجة التطبيقات التي يوفرها jsPDF لقراءة عناصر HTML وتحويلها إلى تنسيق PDF.

const doc = new jsPDF();

// افترض أنك تريد عرض الصفحة بتنسيق PDF بحجم A4

وثيقة.html(document.body, {

رد الاتصال: وظيفة (وثيقة) {

doc.save('webpage.pdf');

},

س: 10،

ص: 10،

العرض: 190،

عرض النافذة: document.body.scrollWidth

});

4. اضبط تنسيق وتخطيط ملف PDF

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

وثيقة ثابتة = جديد jsPDF({

الاتجاه: "ص"، // عمودي

الوحدة: 'مم'، // الوحدة ملليمتر

التنسيق: 'a4'، // التنسيق هو ورق A4

});

5. حفظ ملفات PDF

بمجرد تحويل محتوى HTML إلى PDF، يمكنك استخدام طريقة save() لحفظ الملف، أو معالجة بيانات PDF الناتجة.

doc.save('converted-webpage.pdf'); // حفظ ملف PDF

6. استخدم PHP لتحويل HTML إلى PDF

إذا كنت تريد إجراء تحويل HTML إلى PDF على جانب الخادم، فيمكنك استخدام مكتبات PHP مثل TCPDF أو mPDF. لاستخدام هذه المكتبات، عليك أولاً إدخالها في بيئة PHP الخاصة بك، عادةً من خلال Composer.

يتطلب الملحن tecnickcom/tcpdf

ثم قم بإنشاء كائن TCPDF في برنامج PHP النصي واستخدم الطرق التي يوفرها الكائن لتحويل كود HTML إلى تنسيق PDF.

require_once('tcpdf_include.php');

// أنشئ مستند PDF جديدًا

$pdf = new TCPDF(PDF_PAGE_ORIENTATION, PDF_UNIT, PDF_PAGE_FORMAT, true, 'UTF-8', false);

// قم بتعيين معلومات المستند

$pdf->SetCreator(PDF_CREATOR);

$pdf->SetAuthor('اسمك');

$pdf->SetTitle('TCPDF مثال 001');

$pdf->SetSubject('البرنامج التعليمي لـ TCPDF');

$pdf->SetKeywords('TCPDF، PDF، مثال، اختبار، دليل');

// أضف صفحة

$pdf->AddPage();

//تعيين المحتوى

$أتش تي أم أل = '

مرحبا بكم في TCPDF!

';

$pdf->writeHTML($html, true, false, true, false, '');

// إخراج PDF

$pdf->Output('example_001.pdf', 'I');

7. إدارة الأسلوب والخط

عند التعامل مع تحويل PDF، قد ترغب في مراعاة الأنماط والخطوط الموجودة في المستند للتأكد من أن ملف PDF الناتج يحتفظ بنمط محتوى الويب.

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

doc.setFont(helvetica);

doc.setFontStyle(bold);

doc.setFontSize(16);

doc.text(Hello World!, 10, 10);

$أتش تي أم أل = '

';

$pdf->writeHTML($html, true, false, true, false, '');

8. الوظائف المتقدمة والتخصيص

أثناء عملية تحويل PDF، قد تحتاج أيضًا إلى التعامل مع بعض الوظائف المتقدمة، مثل إضافة الرؤوس والتذييلات والعلامات المائية والجداول والصور وما إلى ذلك. يتم دعم هذه الميزات بشكل عام في مكتبات jsPDF وTCPDF، ولكن يتم تنفيذها بشكل مختلف قليلاً. وفقًا للاحتياجات المحددة، يمكنك استدعاء وظيفة المكتبة المقابلة لتحقيق ذلك.

يوفر jsPDF طرقًا مختلفة لتحسين وظائف ملف PDF، مثل addImage() لإضافة الصور، وsetProperties() لتعيين خصائص المستند، وما إلى ذلك.

// إضافة صورة

doc.addImage(imgData, 'JPEG', 15, 40, 180, 160);

يوفر TCPDF أيضًا وظائف قوية للتعامل مع محتوى PDF المتقدم.

// تعيين الرأس

$pdf->setHeaderData('', 0, 'Title', 'Header', array(0,64,255), array(0,64,128));

$pdf->setHeaderFont(Array('helvetica', '', 10));

// أضف علامة مائية

$pdf->SetAlpha(0.3);

$pdf->صورة('watermark.png', 25, 110, 160, 40, '', '', '', false, 300, '', false, false, 0);

// استعادة الشفافية الكاملة

$pdf->SetAlpha(1);

لتلخيص ذلك، فإن استخدام JavaScript أو PHP لتحويل صفحات ويب HTML إلى ملفات PDF يتضمن اختيار مكتبة مناسبة، ومعالجة محتوى صفحة الويب، وضبط تخطيط PDF، واستخدام الوظائف المتقدمة التي توفرها المكتبة لتحقيق متطلبات التخصيص المعقدة. بغض النظر عما إذا اخترت jsPDF من جانب العميل أو TCPDF من جانب الخادم، فإن خطوات وأساليب التنفيذ الأساسية متشابهة. أثناء التنفيذ المحدد، يجب اختيار الأدوات والأساليب الأكثر ملاءمة بناءً على الاحتياجات الفعلية وبيئة المشروع.

الأسئلة الشائعة ذات الصلة:

1. كيفية تحويل صفحة ويب HTML إلى PDF باستخدام JavaScript؟

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

2. كيفية تحويل صفحات ويب HTML إلى PDF باستخدام PHP؟

الطريقة الأكثر شيوعًا لتحويل صفحات ويب HTML إلى PDF باستخدام PHP هي استخدام مكتبة TCPDF أو mPDF. يمكن لكلتا المكتبتين إنشاء ملفات PDF على جانب الخادم. تحتاج فقط إلى تثبيت المكتبة المقابلة على الخادم، ثم استخدام PHP لتحويل صفحات ويب HTML إلى ملفات PDF.

3. بالإضافة إلى jsPDF وTCPDF وmPDF، ما هي الأدوات الأخرى التي يمكنها تحويل صفحات ويب HTML إلى PDF؟

بالإضافة إلى jsPDF وTCPDF وmPDF الشائعة، هناك أدوات أخرى يمكنها تحويل صفحات ويب HTML إلى PDF، مثل: wkhtmltopdf وPhantomJS وغيرها. يمكن تشغيل جميع هذه الأدوات في الخلفية لتحويل صفحات ويب HTML إلى ملفات PDF. يمكنك اختيار الأداة التي تناسبك وفقًا لاحتياجاتك لتحقيق وظيفة تحويل صفحات الويب إلى PDF.

آمل أن يساعدك هذا البرنامج التعليمي في إتقان مهارات تحويل HTML إلى PDF. محرر Downcodes يتمنى لكم برمجة سعيدة!