0

هل يمكن استعراض فواتير PDF عن طريق مكتبة معينة

السلام عليكم ورحمة الله وبركاته

الاخوة الكرام ،، حسب ماهو موضح

لدي سكربت PHP و اريد ان اضيف خاصية استعراض الفواتير في صفحة مستقلة

تقريباً مثل الصفحة التالية

تم الطلب من احد المبرمجين و افادني بأنه لايد من البرمجة تعتمد على nodejs وعدد الفواتير التي يتم طباعته او استعراضها 500 فاتورة بالشهر

وحسب افادته انها تطبع بشكل اوتوماتيكي عن طريق مايسمى ب puppeteer 

و الزيادة عن 500 يتم احتساب تكلفة حسب الاشتراك

السؤال هو

ماهو البديل ، ويكون مفتوح العدد ويتم استعراض الفاتورة عبر نافذة جديدة ، ويمكن من خلالها طباعة الفاتورة او تنزيلها ع الجهاز ، و ان تكون متوافقة مع اغلب الاستضافات ، دون طلب داول اضافية او برامج اضافية على السيرفر

شاكر لكم


0
Mustafa_Suleiman أضف ردا

يوجد العديد من المكتبات التي يمكن استخدامها لاستعراض فواتير PDF، ومنها:

  • PDF.js مكتبة JavaScript مفتوحة المصدر تسمح بعرض وتفاعل مع ملفات PDF في متصفح الويب.
  • TCPDF مكتبة PHP مفتوحة المصدر تسمح بإنشاء وعرض ملفات PDF.
  • iText مكتبة Java مفتوحة المصدر تسمح بإنشاء وعرض وتعديل ملفات PDF.

ومن الأفضل الإعتماد على "PDF.js" لعرض ملفات PDF في صفحة ويب حيث أنك لن تحتاج إلى تثبيت برامج إضافية على الخادم أو الاعتماد على Node.js، لأنها مكتبة JavaScript قوية وسهلة الاستخدام تمكنك من استعراض وتفاعل ملفات PDF داخل صفحة ويب، وذلك هو الرابط:

وأولاً، ستقوم بإنشاء صفحة HTML تحتوي على عنصر div لعرض الملفات PDF وزر لطباعة الفاتورة وتنزيلها، كالتالي:

<!DOCTYPE html>
<html>
<head>
  <title>PDF Viewer</title>
</head>
<body>
  <div id="pdfViewer"></div>
  <button id="printButton">طباعة</button>
  <button id="downloadButton">تنزيل</button>
  <script src="path/to/pdf.js"></script>
  <script src="path/to/pdf.worker.js"></script>
  <script src="your-script.js"></script>
</body>
</html>

ثم إنشاء ملف JavaScript "your-script.js":

وبه ستقوم بتهيئة مكتبة "PDF.js" وعرض الملف PDF في عنصر div المُحدد، كما ستُضيف السلوك المطلوب للأزرار.

// استعراض الفاتورة عند تحميل الصفحة
document.addEventListener('DOMContentLoaded', function() {
  const pdfViewer = document.getElementById('pdfViewer');
  const printButton = document.getElementById('printButton');
  const downloadButton = document.getElementById('downloadButton');
  const pdfUrl = 'path/to/your/invoice.pdf';


  // تحميل ملف الفاتورة
  PDFJS.getDocument(pdfUrl).promise.then(pdfDocument => {
    pdfDocument.getPage(1).then(page => {
      const scale = 1.5;
      const viewport = page.getViewport({ scale });
      const canvas = document.createElement('canvas');
      const context = canvas.getContext('2d');
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      pdfViewer.appendChild(canvas);


      const renderContext = {
        canvasContext: context,
        viewport: viewport,
      };
      page.render(renderContext);
    });
  });


  // سلوك زر الطباعة
  printButton.addEventListener('click', function() {
    window.print();
  });


  // سلوك زر التنزيل
  downloadButton.addEventListener('click', function() {
    const a = document.createElement('a');
    a.href = pdfUrl;
    a.download = 'invoice.pdf';
    a.click();
  });
});

وبالطبع استبدل path/to/pdf.js و path/to/pdf.worker.js بمسارات الملفات التي قمت بتنزيلها في الخطوة الأولى.

0
مجهول أضف ردا

لا اتوقع ان هذا هو المطلوب

هو يريد انشاء ملف pdf من صفحة html

0
Bader_vip أضف ردا

اعتقد خي لا تدعم العربية

هل يوجد شي اخي يدعم اللغة العربية

0
Mustafa_Suleiman أضف ردا

تستطيع استخدام مكتبة jsPDF بدلاً منها:

وعليك بقراءة قسم Use of Unicode Characters / UTF-8 في المستند README.md.