إصدار حديث من jsPDF لتحويل HTML إلى PDF
الإصدار الذي نشرناه في المقالة السابقة (1.3.4) قديم جداً. حالياً، الإصدار الأحدث هو 2.5.1. إليك كيفية تحديث الكود لاستخدام الإصدارات الحديثة:
تحديث رابط المكتبة
<!-- استبدل السطر القديم بهذا -->
<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>ملاحظة: في الإصدارات الحديثة، نستخدم عادةً html2canvas مع jsPDF لتحويل HTML إلى PDF بدقة أفضل.
الكود المحدث الكامل
<!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">
<h5>مثال على التحويل إلى PDF</h5>
<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>
<script>
// تهيئة jsPDF
const { jsPDF } = window.jspdf;
async function generatePDF() {
try {
// عرض رسالة تحميل
const loading = alert("جاري إنشاء PDF... الرجاء الانتظار");
// الحصول على العنصر المطلوب
const element = document.getElementById('html2pdf');
// استخدام html2canvas لالتقاط العنصر كصورة
const canvas = await html2canvas(element, {
scale: 2, // زيادة الدقة
logging: false,
useCORS: true,
allowTaint: true
});
// إنشاء مستند PDF جديد
const doc = new jsPDF({
orientation: 'portrait',
unit: 'mm',
format: 'a4'
});
// إضافة الصورة إلى PDF
const imgData = canvas.toDataURL('image/png');
const imgWidth = doc.internal.pageSize.getWidth() - 20; // هامش 10مم من كل جانب
const imgHeight = (canvas.height * imgWidth) / canvas.width;
doc.addImage(imgData, 'PNG', 10, 10, imgWidth, imgHeight);
// حفظ الملف
doc.save('document.pdf');
// إخفاء رسالة التحميل
loading.close();
} catch (error) {
console.error('Error generating PDF:', error);
alert('حدث خطأ أثناء إنشاء PDF: ' + error.message);
}
}
</script>
</body>
</html>أهم التحسينات في الإصدار الحديث:
- دعم أفضل للغة العربية: تمت إضافة
direction: rtlللنصوص العربية - جودة أعلى: استخدام
html2canvasيضمن الحفاظ على التنسيقات المعقدة - معالجة الأخطاء: تمت إضافة
try/catchللتعامل مع الأخطاء - واجهة مستخدم أفضل: زر تحميل واضح ورسائل تقدم
- دقة أعلى: استخدام
scale: 2فيhtml2canvasينتج صوراً بدقة مضاعفة
طريقة العمل الجديدة:
- يتم التقاط العنصر HTML كصورة باستخدام
html2canvas - تحويل الصورة إلى بيانات PNG
- إنشاء مستند PDF جديد
- إضافة الصورة إلى المستند PDF
- حفظ الملف النهائي
مميزات الإصدار الحديث:
- دعم أفضل للخطوط العربية
- الحفاظ على التنسيقات المعقدة
- سرعة أكبر في المعالجة
- تقارير أخطاء أكثر وضوحاً
- خيارات أكثر تخصيصاً لحجم الصفحة والاتجاه
هذا الكود المحدث سيعطيك نتائج أفضل بكثير مع المحتوى العربي والعناصر المعقدة في HTML.
