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

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

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

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

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

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

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

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

السؤال هو

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

شاكر لكم

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

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

https://mozilla.github.io/p...

وأولاً، ستقوم بإنشاء صفحة 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 بمسارات الملفات التي قمت بتنزيلها في الخطوة الأولى.

مجهول

2023-07-26T21:00:14+00:00
المزيد
- رابط مختصر

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

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

Bader Al Mutairi

2023-07-27T23:26:22+00:00
المزيد
- رابط مختصر

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

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

Mustafa Suleiman

2023-07-31T13:00:24+00:00
المزيد
- رابط مختصر

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

GitHub - parallax/jsPDF: Client-side JavaScript PDF generation for everyone.
github.com/parallax/jsPDF
Client-side JavaScript PDF generation for everyone. - GitHub - parallax/jsPDF: Client-side JavaScript PDF generation for everyone.

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

Adnane Kadri

2023-07-27T23:21:16+00:00
المزيد
- رابط مختصر

Puppeteer بشكل أساسي هو مكتبة Node.js تسمح لك بتحكم واجتياز وأتمتة المتصفح بشكل برمجي. تم تطويره بواسطة فريق Chrome DevTools ويتم استخدامه بشكل رئيسي لأتمتة العمليات التفاعلية والأنشطة الخاصة بالمتصفح مثل القراءة من الصفحات والنقر على الروابط وإدخال النص والتفاعل مع العناصر والتحكم في تصفح الصفحات وأدوات المطورين (DevTools) وأكثر من ذلك.

لذلك فهو يستعمل حصرا للإختبار أو للتطوير المستند إلى الإختبار.

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

pdfmake
html-pdf

وسيكون هذا بطبيعة الحال بشكل لا محدود، ويمكنك طباعة واستعراض ما لانهاية من الفواتير متى ما شئت.

Bader Al Mutairi

2023-07-27T23:22:24+00:00
المزيد
- رابط مختصر

بارك الله فيك اخي

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

Adnane Kadri

2023-07-27T23:23:36+00:00
المزيد
- رابط مختصر

لم أختبر ذلك، ولكن يستبعد أن لا تدعم هاته المكتبات الترميز الذي تندرج تحته اللغة العربية.

تطوير الويب

مجتمع لمناقشة وتبادل الخبرات حول تطوير الويب. ناقش أحدث التقنيات، اللغات، والأدوات في عالم تطوير المواقع والتطبيقات. شارك مشاريعك، اسأل عن نصائح، وتعاون مع مطورين محترفين وهواة.

91 ألف متابع

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

التعليقات

اقرأ أيضًا

تطوير الويب