يعد PDF.js مشروعًا رائعًا مفتوح المصدر يتم تحديثه بشكل متكرر ويتم إضافة ميزات جديدة إليه، مهما كان مظهره قبيحًا، أو ربما دعنا نقول أنه يبدو قديمًا. ماذا عن الحصول على أحدث ميزات وإصلاحات PDF من PDF.js مع الحصول على نظرة رائعة على جانب العرض التقديمي؟

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

عادةً لا تقوم برامج عرض ملفات pdf الأخرى المستندة إلى PDF.js بتحديث المظهر الافتراضي، وتلك التي عادةً ما تفقد الوظائف بسبب فصلها إلى مكونات ولكنها تنفذها جزئيًا أو تقدم واجهة برمجة تطبيقات سيئة/جزئية.

ابدء

تثبيت الحزمة على مشروعك:

npm install pdfjskit

عند تثبيت الحزمة (أو تحديث الإصدار)، سيتم نسخ الأصول (css والصور وما إلى ذلك) التي يستخدمها PdfJsKit تلقائيًا منNode_modules\pdfjskit\dist\pdfjskit إلى public\pdfjskit. يعد الدليل الفرعي العام لمشروعك مكانًا شائعًا لأصول الويب، ولكن إذا كان إطار عمل JS الخاص بك يحتوي على بنية دليل مختلفة، فيمكنك نقل الأصول إلى مكان آخر.

افتراضيًا، يقوم PdfJsKit بتحميل الأصول من الدليل الفرعي pdfjskit المتعلق بالصفحة المضيفة ولكن يمكنك تغيير هذا المسار عبر تمرير خيار LibraryPath المخصص إلى مُنشئ PdfViewer.

الاستخدام

import PdfViewer from "pdfjskit";

var pdfViewer = new PdfViewer({
  documentUrl: "pdfjskit/sample.pdf",
  width: "80%",
  height: 720,
  resizable: true,
  language: "en-US",
  theme: "slate, classic-dark"
});

pdfViewer.render(document.getElementById("container"));

لاحظ أن حزمة NPM تحتوي على وحدة ES6 pdfjskit.min.mjs، كما يتم توفير نسخة البرنامج النصي pdfjskit.min.js في دليل GitHub dist/pdfjskit وفي حزمة المطور المقدمة هنا.

استخدام PdfJsKit في مشاريع JS البسيطة باستخدام Vite

يمكنك استخدام أي إطار عمل JS (React، Vue، Angular، Svelte، Blazor وما إلى ذلك) مع PdfJsKit، ولكن من أجل التبسيط في هذا المنشور، سأعرض الاستخدام لمشاريع JS العادية.

بالنسبة لمشاريع JS العادية، أوصي باستخدام Vite، وبهذه الطريقة يمكنك الاستيراد من الوحدة النمطية في ملفات HTML بسهولة:

1. إنشاء قالب مشروع Vite:
   

   npm create vite@latest
   

   اختر الإعدادات:
   

   ✔ Project name: … pdfjskit-vite-example
   ✔ Select a framework: › Vanilla
   ✔ Select a variant: › JavaScript
   

2. سيتم إنشاء دليل فرعي باسم مشروعك، قم بما يلي:
   

   cd pdfjskit-vite-example
   npm install
   npm install pdfjskit
   

3. تحرير ملف Index.html واستبدال المحتويات بـ:
   

4. الآن يمكنك تشغيل خادم الويب المطور:
   

   npm run dev
   

   والتي سوف تظهر:
   

   ➜  Local:   http://localhost:5173/
   ➜  Network: use --host to expose
   ➜  press h   enter to show help    
   

   انقر فوق عنوان url المحلي باستخدام مفتاح CTRL لتشغيل المتصفح.
   سترى أن عارض PDF معروض في الصفحة.

التوثيق

• مستندات واجهة برمجة تطبيقات HTML
• مستندات واجهة برمجة تطبيقات Markdown
• قاعدة المعرفة

العروض الحية

• اختبار حزمة الوحدة
• اختبار حزمة النص

الروابط:

• جيت هاب
• الآلية الوقائية الوطنية