شرح كود تحويل HTML إلى PDF باستخدام JavaScript
مقدمة
<!DOCTYPE html>
<html>
<head>
<title>تحويل HTML إلى PDF باستخدام jsPDF الحديث</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<style>
#html2pdf {
font-family: 'Arial', sans-serif;
direction: rtl; /* للدعم الكامل للغة العربية */
padding: 20px;
background: white;
color: #333;
}
</style>
</head>
<body>
<div id="html2pdf">
<h2>مثال على التحويل إلى PDF</h2>
<p>هذا محتوى عربي سيتم تحويله إلى ملف PDF</p>
<p>يمكنك إضافة أي عناصر HTML هنا</p>
<table border="1" style="width:100%">
<tr>
<th>اسم العنصر</th>
<th>الوصف</th>
</tr>
<tr>
<td>العنصر 1</td>
<td>وصف العنصر الأول</td>
</tr>
<tr>
<td>العنصر 2</td>
<td>وصف العنصر الثاني</td>
</tr>
</table>
</div>
<button onclick="generatePDF()" style="margin:20px;padding:10px 20px;background:#4CAF50;color:white;border:none;cursor:pointer;">
تحميل PDF
</button>
-
</body>
</html>
الكود الذي قدمته يقوم بتحويل محتوى HTML إلى ملف PDF باستخدام مكتبة jsPDF. دعني أشرح لك كل جزء من هذا الكود بالتفصيل.
أجزاء الكود الرئيسية
إضافة مكتبة jsPDF
html
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.4/jspdf.debug.js"></script>
هذا السطر يقوم بتحميل مكتبة jsPDF من CDN (شبكة توصيل المحتوى). هذه المكتبة تسمح بإنشاء وتعديل ملفات PDF مباشرة من JavaScript.
عنصر HTML الذي سيتم تحويله إلى PDF
html
<div id="html2pdf" style="display: block; width: 90%; margin: auto;">
<!-- المحتوى هنا -->
</div>
هذا العنصر <div> يحتوي على المحتوى الذي نريد تحويله إلى PDF. تم تعيين id="html2pdf" ليتمكن JavaScript من تحديده بسهولة.
رابط تحميل PDF
html
<div style="display: block; width: 90%; margin: auto;">
<a href="javascript:generatePDF()">Download PDF</a>
</div>
هذا الرابط عند النقر عليه يستدعي الدالة generatePDF() التي تقوم بإنشاء وتحميل ملف PDF.
دالة JavaScript لإنشاء PDF
javascript
function generatePDF() {
var doc = new jsPDF();
doc.fromHTML(document.getElementById("html2pdf"), 15, 15, {
'width': 170
},
function(a) {
doc.save("HTML2PDF.pdf");
});
}
شرح مفصل لعمل الدالة
إنشاء مستند PDF جديد:
javascript
var doc = new jsPDF();
ينشئ كائن جديد من نوع jsPDF يمثل مستند PDF.
تحويل HTML إلى PDF:
javascript
doc.fromHTML(document.getElementById("html2pdf"), 15, 15, {
'width': 170
}, ...);
document.getElementById("html2pdf"): يحصل على العنصر HTML المطلوب تحويله 15, 15: إحداثيات X و Y لبدء وضع المحتوى في PDF (15 نقطة من الأعلى واليسار) {'width': 170}: عرض المحتوى في PDF (170 نقطة)
حفظ الملف:
javascript
function(a) {
doc.save("HTML2PDF.pdf");
}
هذه الدالة تستدعى بعد اكتمال التحويل، وتقوم بحفظ الملف باسم HTML2PDF.pdf.
فوائد هذا الكود
- سهولة الاستخدام: يمكن تحويل أي جزء من الصفحة إلى PDF بنقرة واحدة.
- لا يحتاج إلى سيرفر: كل المعالجة تتم على جهاز العميل.
- تخصيص سهل: يمكن تعديل الهوامش والأبعاد بسهولة.
- يدعم العربية: مكتبة jsPDF تدعم النصوص العربية إذا تم تكوينها بشكل صحيح.
تحسينات مقترحة
إضافة دعم للغة العربية:
javascript
var doc = new jsPDF({
orientation: 'p',
unit: 'mm',
format: 'a4',
putOnlyUsedFonts: true,
floatPrecision: 16
});
doc.addFont('Arial.ttf', 'Arial', 'normal');
doc.setFont('Arial');
إضافة معالجة للأخطاء:
javascript
try {
doc.fromHTML(/* ... */);
} catch (error) {
console.error('Error generating PDF:', error);
alert('Failed to generate PDF. Please try again.');
}
إضافة شاشة تحميل:
javascript
function generatePDF() {
showLoadingSpinner();
// ... باقي الكود ...
function(a) {
hideLoadingSpinner();
doc.save("HTML2PDF.pdf");
}
}
ملاحظات مهمة
- الإصدار 1.3.4 من jsPDF قديم نسبياً، ويوصى باستخدام إصدار أحدث.
- دالة fromHTML قد لا تعمل بشكل مثالي مع كل عناصر CSS المعقدة.
- للتصميمات المعقدة، قد تحتاج إلى استخدام مكتبات إضافية مثل html2canvas لتحويل HTML إلى صورة أولاً.
الخلاصـــــة
هذا الكود يوفر طريقة بسيطة وفعالة لتحويل محتوى HTML إلى PDF مباشرة من المتصفح دون الحاجة إلى أي معالجة على السيرفر. يمكن استخدامه في العديد من التطبيقات مثل إنشاء الفواتير، التقارير، أو حفظ المحتوى للمستخدمين.
