طباعة ملفات PDF بكفاءة باستخدام جافا سكريبت

طباعة ملفات PDF مباشرةً من متصفح الويب باستخدام JavaScript ليست عملية مباشرة بسبب عدم اتساق المتصفحات واعتبارات الأمان. ومع ذلك، هناك عدة تقنيات يمكنها بفعالية تشغيل مربع حوار الطباعة للمتصفح لملفات PDF. تستعرض هذه المقالة طريقتين شائعتين: الاستفادة من iframe واستخدام مكتبة Print.js.

محتويات

• طباعة ملفات PDF باستخدام وسم iframe
• طباعة ملفات PDF باستخدام مكتبة Print.js
• اختيار الطريقة المناسبة

طباعة ملفات PDF باستخدام وسم iframe

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

التنفيذ:

1. دمج ملف PDF: استخدم وسم <iframe>، وقم بتعيين سمة src الخاصة به إلى عنوان URL لملف PDF وإخفائه باستخدام CSS:

<iframe id="pdf-iframe" src="your-pdf-file.pdf" style="display: none;"></iframe>

2. تشغيل الطباعة: استخدم JavaScript للوصول إلى نافذة محتوى iframe واستدعاء أسلوب print() الخاص بها:

function printPdf() {
  const iframe = document.getElementById('pdf-iframe');
  if (iframe.contentWindow) { // التحقق مما إذا كانت contentWindow موجودة لمنع الأخطاء
    iframe.contentWindow.focus(); // التأكد من أن iframe مُركز قبل الطباعة
    iframe.contentWindow.print();
  } else {
    console.error("خطأ: تعذر الوصول إلى نافذة محتوى iframe.");
  }
}

3. إضافة زر طباعة: أنشئ زرًا يقوم باستدعاء printPdf():

<button onclick="printPdf()">طباعة PDF</button>

القيود:

• التوافق مع المتصفح: تختلف الموثوقية عبر المتصفحات. قد تتطلب بعضها تفاعل المستخدم أو أذونات محددة.
• تحكم محدود: تحكم ضئيل في نطاق الصفحات أو إعدادات الطباعة.
• الأمان: قد يشكل دمج ملفات PDF مباشرةً مخاطر أمنية اعتمادًا على مصدر ملف PDF.

طباعة ملفات PDF باستخدام مكتبة Print.js

توفر Print.js حلاً أكثر قوة وغنىً بالمميزات، حيث تعالج عدم اتساق المتصفحات وتوفر تحكمًا أفضل. إنها مكتبة خفيفة الوزن يمكن دمجها بسهولة في مشروعك.

التنفيذ:

1. تضمين Print.js: أضف مكتبة Print.js إلى HTML الخاص بك باستخدام CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/print.js/1.6.2/print.min.js"></script>

2. تشغيل الطباعة: استخدم دالة printJS() الخاصة بـ Print.js:

function printPdf() {
  printJS({
    printable: 'your-pdf-file.pdf',
    type: 'pdf',
  });
}

3. إضافة زر طباعة (كما كان من قبل):

<button onclick="printPdf()">طباعة PDF</button>

المزايا:

• تحسين التوافق مع المتصفح: تعالج بفعالية الاختلافات بين المتصفحات.
• تحكم أكبر: توفر بعض خيارات التخصيص مقارنةً بطريقة iframe.
• أسهل في الاستخدام: واجهة برمجة تطبيقات أبسط وأكثر سهولة.

اختيار الطريقة المناسبة

طريقة iframe أبسط ولكنها أقل موثوقية وتوفر تحكمًا أقل. توفر Print.js حلاً أكثر قوة وغنىً بالمميزات وأسهل في الاستخدام، لكنها تتطلب إضافة مكتبة خارجية. يعتمد الاختيار الأمثل على احتياجات مشروعك، مع إعطاء الأولوية لعوامل مثل سهولة التنفيذ، والتحكم المطلوب، والتوافق مع المتصفح.