كيفية تحويل HTML إلى PDF في بلوجر

دليل شامل لتحويل HTML إلى PDF في بلوجر باستخدام jsPDF

اكواد

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

الإصدارات الحديثة من jsPDF

الإصدار الذي تستخدمه (1.3.4) قديم جداً. حالياً، الإصدار الأحدث هو 2.5.1. إليك كيفية تحديث الكود لاستخدام الإصدارات الحديثة:

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 بدقة أفضل.

2. الكود المحدث الكامل

  // الكود الأساسي لتحويل PDF
const { jsPDF } = window.jspdf;

async function generatePDF() {
  try {
    // عرض حالة التحميل
    const element = document.getElementById('content-to-print');
    
    // إنشاء مستند PDF جديد
    const pdf = new jsPDF({
      orientation: 'portrait',
      unit: 'mm',
      format: 'a4'
    });

    // التقاط المحتوى كصورة
    const canvas = await html2canvas(element, {
      scale: 2,
      logging: false,
      useCORS: true,
      allowTaint: true
    });

    // إضافة الصورة إلى PDF
    const imgData = canvas.toDataURL('image/png');
    const imgWidth = pdf.internal.pageSize.getWidth() - 20;
    const imgHeight = (canvas.height * imgWidth) / canvas.width;
    
    pdf.addImage(imgData, 'PNG', 10, 10, imgWidth, imgHeight);
    
    // حفظ الملف
    pdf.save('document.pdf');
    
  } catch (error) {
    console.error('Error:', error);
    alert('حدث خطأ أثناء إنشاء PDF: ' + error.message);
  }
}

أهم التحسينات في الإصدار الحديث

دعم اللغة العربية

تحسين دعم النصوص العربية مع اتجاه النص من اليمين لليسار (RTL) ودعم كامل للخطوط العربية.

جودة عالية

استخدام html2canvas مع مقياس 2x يضمن الحفاظ على التنسيقات المعقدة بدقة عالية.

معالجة الأخطاء

نظام متكامل للتعامل مع الأخطاء وعرض رسائل واضحة للمستخدم عند حدوث أي مشاكل.

كيفية إضافته إلى بلوجر

1. انتقل إلى لوحة تحكم بلوجر → قالب → تعديل HTML
2. ابحث عن </body> وأضف المكتبات قبلها:

  <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>
<script>
  window.jspdf = window.jspdf || { jsPDF: jsPDF };
</script>

3. أضف عنصر div يحتوي على المحتوى المراد تحويله:

  <div id="pdf-content">
  <!-- محتوى المنشور هنا -->
</div>

4. أضف زر التحويل مع دالة JavaScript:

  <button id="generate-pdf">تحويل إلى PDF</button>

<script>
  document.getElementById('generate-pdf').addEventListener('click', function() {
    // كود التحويل هنا
  });
</script>

حل مشكلة الصفحات المتعددة

لحل مشكلة التقاط جزء فقط من المنشور وإنشاء ملف PDF متعدد الصفحات، إليك الكود المحسن:

async function generateMultiPagePDF() {
  const { jsPDF } = window.jspdf;
  const element = document.getElementById('full-content');
  const pdf = new jsPDF();
  
  let position = 0;
  const pageHeight = pdf.internal.pageSize.getHeight() - 20;
  
  // حساب الارتفاع الكلي
  const tempCanvas = await html2canvas(element, { scale: 1 });
  const totalHeight = tempCanvas.height;
  
  // التقاط أجزاء الصفحة
  while (position < totalHeight) {
    const canvas = await html2canvas(element, {
      scale: 2,
      windowHeight: Math.min(element.scrollHeight - position, window.innerHeight * 2),
      y: position,
      height: Math.min(element.scrollHeight - position, window.innerHeight * 2)
    });
    
    const imgData = canvas.toDataURL('image/png');
    const imgWidth = pdf.internal.pageSize.getWidth() - 20;
    const imgHeight = (canvas.height * imgWidth) / canvas.width;
    
    if (position > 0) {
      pdf.addPage();
    }
    
    pdf.addImage(imgData, 'PNG', 10, 10, imgWidth, imgHeight);
    position += window.innerHeight * 2;
  }
  
  pdf.save('multi-page-document.pdf');
}
    

كيف يعمل؟

• يقسم المحتوى إلى أجزاء حسب الارتفاع
• يحول كل جزء إلى صورة
• يضيف كل صورة كصفحة جديدة

المميزات

• يدعم المقالات الطويلة
• يحافظ على التنسيق
• يعمل مع جميع العناصر

جاري تحويل المقال إلى PDF...

كيف كان المقال؟